vue-computedAndMethods

Veröffentlicht am

忙于考试，无暇更博。学前端都耽搁了这么久了，时间要挤出来，先写一篇总结，一会儿滚去复习，还有四门考试，全背闭卷坑！！！

Recently, I have been learning Vue following the official website of Vue.There are many ways to add data to dom with vue.We can set a component,new a Vue,use ‘$mount’and so on.here u can see demos.This article is about ‘computed data’ and ‘methods vue’

  • 数据的计算属性，可以对data进行计算或者其他操作，然后再展示计算后的数据
1
<data id="example"></data>
1
2
3
4
5
6
7
8
9
10
11
12
13
var vm=new Vue({
    data:{
        msg:''
        },
    computed:{
        example:function(){
            return this.msg+'='+10*10;
        }
    }
    template:'<p>{{example}}</p>',
    el:'#example'
    });
    vm.msg='hi';
  • vue的方法属性，作用于实例上的方法，比如对按钮的点击操作
1
2
3
<div id="example">
        <button v-on:click="greet">Greet</button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
var vm = new Vue({
              el: '#example',
              data: {
                name: 'Vue.js'
              },
              // 在 `methods` 对象中定义方法
              methods: {
                greet: function () {
                  // 方法内 `this` 指向 vm
                  alert('Hello ' + this.name + '!');
                }
              }
        });