Vue响应式声明渲染机制

1.onclick响应式渲染

   

<div id="#app">
  <p>{{message}}</p>
  <input v-model="message"></input>
  <button onclick="alert('message='+app.message)">点击看看</button>
</div>

<script>
  var maDate = {
     message:'HELLO ZMR'
  }
  
  var app = new Vue({
     el:"#app",
     data:myDate
  })
</script>

现在的数据和DOM是绑定在一起的，所有的元素都是响应式的

直接修改app.message是可以直观的看到其中的变化的

onclick可以替换成@click来简写，效果一样

2.Vue属性绑定

   如果页面需要超链接，那么直接<a href={{url}}></a>,然后下面data数据里面url一个地址很明显是不可以的，这个时候就需要使用v-bind来进行属性值的绑定

<a v-bind:href="url">点击跳转</a>

当然，还可以使用缩写

<a:href="url">点击跳转</a>

3.Vue计算属性

     一般情况下计算属性用法的话是为了便于维护和利用代码的可重复开发性而生的，比如当购物车的数据需要经常改变的时候，每一次活动优惠券的减免还有免单的属性更是需要计算属性的加持才可以更大程度的完善代码的可复用性。

     

<div id="app">
   <h2>张某人图书</h2>
   <div>您购买了{{book.name}}共{{book.num}}本===￥{{book.price}}/本</div>
   <div>总价:{{totalprice}}元</div>
</div>

<script>
   var vm = new Vue({
     el:"#app",
     data:{
       book:{id:1,name:"Vue.js",num:1,price:10},
       discount:0.8,
       deliver:12
     },
     computend:{
       totalprice(){
        return (this.book.price*this.book.num)*this.discount+this.deliver;
      }
     }
   })
</script>

4.计算属性中的getter和setter

       计算属性中一般有一个getter和一个setter，一般计算属性的默认设置是getter，然后当计算属性里面的值发生变化的时候，那个setter就开始触发了。

      

computed:{
  fullName:{
   get:function(){return this.name},
   set:function(name){this.lastName}
 }
}

5.计算属性与methods的区别

1.    计算属性是数据处理结构清晰
2. 依赖于数据，若数据更新，则自动处理更新
3. 计算属性内部this指向vm实例
4. 不需要缓存功能就用methods，需要就用计算属性
5. 在模板调用时，直接写计算属性名即可
6. 常用的是getter方法，用于获取数据，也可以使用setter方法改变数据
7. 相比较而言，不管依赖的数据是否改变，methods都会重新计算，依赖的数据不变的时候，computend从缓存中获取，不会重新计算