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實例中的數(shù)據(jù)
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 雖然{{}}可以解析數(shù)據(jù)温算，但是{{}}中不能寫復(fù)雜的邏輯屬性，所有復(fù)雜的業(yè)務(wù)邏輯都要使用計算屬性，使用計算屬性便于后期維護(hù)
<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而最后結(jié)果加5，因為price+1后的pack1的結(jié)果變?yōu)?4=20，未+1時53=15凑耻，所以結(jié)果每次都加5
