Vuejs全家桶系列（五）---屬性和方法
vue例項屬性
vm.$el
Vue 例項使用的根 DOM 元素。
console.log(vm.$el === document.getElementById('#app')) //true
console.log(vm.$el);結果為
vm.$data
Vue 例項觀察的資料物件。Vue 例項代理了對其 data 物件屬性的訪問。
console.log(vm.$data);
console.log(vm.msg);
vm.$options
用於當前 Vue 例項的初始化選項。需要在選項中包含自定義屬性時會有用處：
var vm = new 
vm.$refs
一個物件，持有已註冊過 ref 的所有子元件。
<div id="app">
<h2 ref="one">one</h2>
<h2 ref="two">two</h2>
</div>
console.log(vm.$refs);
vue例項方法
vm.$nextTick(callback)
將回調延遲到下次 DOM 更新迴圈之後執行。在修改資料之後立即使用它，然後等待 DOM 更新。
通俗的說就是其內的程式碼會在DOM 更新迴圈完成以後執行
<body>
<div 
修改程式碼後
update(){
this.msg = 'why';
vm.$nextTick(function(){
console.log(this.$refs.word.textContent);
})
}
vm.$set(object,key,value)
<body>
<div id="app">
<h2>{{user.name}}</h2>
<h2>{{user.age}}</h2>
<h2>{{user.nek}}</h2>
<button @click="add">新增一個屬性</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
user:{
name:'panini',
age:20
}
},
methods:{
add(){
this.user.nek = "mm";//給user新增一個屬性
}
}
});
</script>
</body>執行這段程式碼我們本以為在“20”所在行下會出現一行”mm”，但是卻沒有。
可是user.nek明明有值的
console.log(user.nek); //mm但是卻不顯示出來
<h2>{{user.nek}}</h2>因為vue有一套資料繫結的規則，我們如果要新增一個屬性按規定必須要知會他一聲，怎麼通知vue呢？我們用set方法
修改程式碼後
add(){
Vue.set(this.user,'nek','mm'); /*這裡用的是全域性api，換成vm.$set也是一樣的*/
}
結果為
vm.$delete(object,key)
類似於set，delete是刪除一個屬性
<body>
<div id="app">
<h2>{{user.name}}</h2>
<h2>{{user.age}}</h2>
<h2>{{user.nek}}</h2>
<button @click="remove">刪除一個屬性</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
user:{
name:'panini',
age:20
}
},
methods:{
remove(){
Vue.delete(this.user,'age');
}
}
});
</script>
</body>結果為
vm.$watch(data,callback[,options])
一個物件，鍵是需要觀察的表示式，值是對應回撥函式。值也可以是方法名，或者包含選項的物件。Vue 例項將會在例項化時呼叫 $watch()，遍歷 watch 物件的每一個屬性。
通俗來說就是watch監視鍵的狀態，一旦鍵發生變化，就去執行對應的值方法
<body>
<div id="app">
{{msg}}
<button @click="change">改變msg</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:"hello world"
},
methods:{
change:function(){
this.msg += "1";
}
},
watch:{
msg:function(newValue,oldValue){
console.log('msg被修改啦，原值：'+oldValue+'，新值：'+newValue);
}
}
});
</script>
</body>一旦我點選”改變msg“按鈕一次，this.msg的值+=”1”，執行watch的鍵msg對應的方法一次。
這裡有很多人會把computed和watch的使用搞混淆。
但是這裡有一個問題：
如果watch監視的鍵是一個物件
<body>
<div id="app">
{{user.name}}
<button @click="change">改變user</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
user:{
name:'panini',
age:20
}
},
methods:{
change(){
this.user.name += "1";
}
},
watch:{
user:function(newVal,oldVal){
console.log("user改變了");
console.log(newVal+"and"+oldVal);
}
}
});
</script>
</body>不論我點選多少次”改變user“按鈕，watch都絲毫不為所動
直到我一怒之下，做了以下的修改
change(){
this.user = {
name: "hhh",
age:18
};
}watch終於感到了
輸出了以下的語句
user改變了
[object Object]and[object Object]沒錯newVal和oldVal都是一個物件，到這裡你應該明白了：
如果watch監視的鍵是一個物件，那麼只有當物件的地址改變了，watch才會呼叫對應的值方法
那麼我想當物件的某個屬性變化了就觸發watch有沒有辦法呢？
辦法總是有的!!
請看下面的程式碼
watch:{
user:{
handler:(newValue,oldValue) => {
console.log('user被修改啦，原值：'+oldValue.name+'，新值：'+newValue.name);
},
deep:true //深度監視，當物件中的屬性發生變化時也會監視
}
}現在你明白了watch裡面deep：ture的意義所在了吧
輸出的結果是
user被修改啦，原值：panini1，新值：panini1
怎麼樣，user終於成功被修改了。
咦，不對，等一下。為什麼原值和新值都是panini1啊
那是因為newVal和oldVal都是同一個物件啊!!!