Vue实例的属性 计算属性

body部分：

<div id="app">
   {{message}}
   <p ref='hello'>你好</p>
</div>

js部分：

var vm=new Vue({
        el:'#app',
        data:{
            message:'hello world'
        },
        uname:'jack',
        age:18
})

//$el  获取Vue绑定的元素
    console.log(vm.$el)
    vm.$el.style.color='pink'
//data  获取Vue实例中的数据
    console.log(vm.$data)
//options  获取Vue实例中的自定义属性
    console.log(vm.$options.uname)
    console.log(vm.$options.age)
//refs  获取所有带ref属性的元素
    console.log(vm.$refs)
    console.log(vm.$refs.hello)

计算属性：
案例：hello Vue变成 Vue===hello 虽然{{}}可以解析数据，但是{{}}中不能写复杂的逻辑属性，所有复杂的业务逻辑都要使用计算属性，使用计算属性便于后期维护

<div id='itany'>
<!--   <p>{{msg.split(' ').reverse().join('===')}}</p>   -->
     <h1>{{msg}}</h1>
     <a href="#">{{revMsg}}</a>
</div>

new Vue({
   el:'#itany',
   data:{
       msg:'hello vue'
   },
   computed:{
       revMsg:function(){
          return this.msg.split(' ').reverse().join('===')
       }
   }
 })    

案例：
效果：点击加货总价会变化

QQ截图20180917175031.png

body部分：

<div id="app">
   <button v-on:click='jh'>加货</button>
   <h1>总价为:{{tota}}</h1>
</div>

js部分：

new Vue({
        el:'#app',
        data:{
            pack1:{count:5,price:3},
            pack2:{count:8,price:4}
        },
        computed:{
            tota:function(){
                return this.pack1.count*this.pack1.price+this.pack2.count*this.pack2.price
            }
        },
        methods:{
            jh:function(){
                this.pack1.price++
            }
        }
    })

有人说为什么price加1而最后结果加5，因为price+1后的pack1的结果变为54=20，未+1时53=15，所以结果每次都加5