vue常用方法（2018-07-27）

1、filters 过滤器

example：

 let vm = new Vue({
    //挂载元素
  el:'#app',

    //实例vm的数据
  data:{
         num1:33.141,
         num2:46.212,
         num3:78.541
    }
 });

    num1，num2，num3都是Vue实例vm的小数，我们把它展示在视图上：

<div id="app">
   数字1：{{ num1 }}<br>
   数字2：{{ num2 }}<br>
   数字3：{{ num3 }}
 </div>

    如果新需求要求保存取整，那么就要用到filters了

  let vm = new Vue({
    //挂载元素
  el:'#app',
    //实例vm的数据
  data:{
         num1:33.141,
         num2:46.212,
         num3:78.541
    },
    //过滤器
  filters:{
      toInt(value){  // => toInt: function() {}
         return parseInt(value);
      }
    }
  });

    html用法：

  <div id="app">
    数字1：{{ num1 | toInt}}<br>
    数字2：{{ num2 | toInt}}<br>
    数字3：{{ num3 | toInt}}
  </div>

    num会被传到toInt方法的value然后运行

展示效果为整数

2、computed 计算属性

    假如有需求要显示三个num的和，就会用到computed：

 let vm = new Vue({
    //挂载元素
  el:'#app',
    //实例vm的数据
  data:{
         num1:1,
         num2:3,
         num3:6
    },
    //计算属性
  computed:{
        sum(){
          return this.num1+this.num2+this.num3
        }
    }
 });

    html用法：

 <div id="app">
   总和：{{ sum }}
 </div>

这边直接在花括号里放入属性就可以展示结果（并且其中一个值发生改变，结果也会发生改变）：

结果

3、methods 方法

    methods中用来定义一些方法，比如定义一个方法，点击后增加a的值：

let vm = new Vue({
    //挂载元素
  el:'#app',
    //实例vm的数据
  data:{
         a:0
    },
    //方法
  methods:{
        plus(){
            return this.a++;
        }
    }
 });

    html用法：

  <div id="app">
    {{ a }}
    <button :click="plus">加1</button>
  </div>

点击按钮，a的值就会增加

4、wathc### 侦听属性

    用来检测指定数据发生变化：

let vm = new Vue({
    //挂载元素
  el:'#app',
    //实例vm的数据
  data:{
         a:0
    },
    //方法
  methods:{
        plus(){
            return this.a++;
        }
    },
    //观察
  watch:{
        a(){
          console.log(`有变化了，最新值：`);
          console.log(this.a);
        }
    }
 });

    点击按钮的时候，a的值加1发生了变化，而此时watch监听到了它的变化，便在控制台输出了我们指定的内容。