小白初学Vue 之属性计算与侦听器自我总结篇~

内容：计算属性与侦听器

一、计算属性

自我理解的意思是：一个属性与其他属性的计算

<!--容器-->

  <div id="root">

   姓：<input type="text" v-model="xing" /> 名：

   <input type="text" v-model="ming" />

   <!--如果我想让姓名一起展示，并且随着input的变化而变化，怎么处理呢？可以进行如下操作-->

   <div>{{xing}}{{ming}}</div>

   <!--但是我并不想像上面那样放2个变量麻烦，那该怎么办呢？此时我们就可以用到了计算属性，下面我们来新建一个 变量xingMing,并在Vue实例中新增一个 computed属性，代码如下所示-->

   <div>姓名：{{xingMing}}</div>

 </div>  

 <script>

   new Vue({

    el: '#root',

    data: {

     xing: "小",

     ming: "丸子"

    },

    computed: { // 计算属性用computed 注意点：xing与ming没有变化时，此时会自动在页面中展示之前计算结果的缓存，而不会进行计算。即只有当计算的相关变量有所变化时，才会进行计算。

     xingMing: function() { // 此处的xingMing的值是xing与ming计算的结果

      return this.xing + this.ming;

     }

    }

   });

  </script>

---

二、侦听器

自我理解意思：监听某一个数据或属性值的变化

<div id="root2">

    <input type="text" v-model="msg"/>

    <div>{{msg}}</div>

    <!--实现：只要input变化就加1；用到侦听器，代码如下，新增一个count变量默认为0，然后再实例中新增一个watch属性代码如下-->

    <div >计数：{{count}}</div>

</div>

<script>

   new  Vue({

     el:"#root2",

     data:{

       msg:"小丸子",

       count:0

     },

     watch:{

      msg:function(){

        this.count++;

      }

     }

   })

</script>