Vue2.0筆記——Vue常用實例屬性，實例方法
- vm.$el
- vm.$data
- vm.options
- vm.$refs
- vm.$root
vm.$el
該實例屬性用於獲取Vue實例使用的根DOM元素,即el選項所指的元素DOM
<body> <div id="app"> <h4>你好，這是四級標題</h4> <p>這是一個段落，我什麽都不想說</p> </div> <button onclick="getEl()">獲得el選項的DOM元素</button> <script> var vm = new Vue({ el:‘#app‘ }) function getEl(){ console.log(vm.$el);//獲得DOM元素 vm.$el.style.color=‘red‘;//設置字體顏色 } </script> </body>
vm.$data
Vue 實例觀察的數據對象。Vue 實例代理了對其 data 對象屬性的訪問。
即可以訪問data選項中的數據。
<button onclick="getData()">vm.$data獲得數據值</button>
data:{
msg:‘你好你好‘,
arr:[‘what‘,‘are‘,‘you‘,‘doing‘,‘?‘]
}
function getData(){
console.log(vm.$data.msg);
console.log(vm.$data.arr.join(‘ ‘));
}獲得msg屬性，獲得arr數組，並通過join生成字符串。
vm.$options
用於當前 Vue 實例的初始化選項。需要在選項中包含自定義屬性時會有用處。：
var vm = new Vue({ el:‘#app‘, data:{ msg:‘你好你好‘, arr:[‘what‘,‘are‘,‘you‘,‘doing‘,‘?‘] }, name:‘小小陳先森‘, user:{name:‘小小陳先森‘,age:18,sex:‘男‘}， show(){ console.log(this.user.sex); } }) console.log(vm.$options.name); console.log(vm.$options.user.age); console.log(vm.$options.show());
這個自定義屬性，就是跟data選項同級，定義的屬性或方法函數。通過$options可以操作調用。
vm.$refs
返回持有註冊過 ref 特性 的所有 DOM 元素和組件實例，該類型為Object，且只讀。
因為有好多ref，所以通過.名稱獲得組件實例。
<input type="text" ref="name" value="this is text"/>
<p ref="hello">HelloWorld</p>
console.log(vm.$refs.hello);
vm.$refs.name.value=‘whats‘;//.style.color=‘red‘;Vue實例中不需要任何設置，只要持有ref屬性的元素在根節點元素中即可。
vm.$root
當前組件樹的根 Vue 實例。如果當前實例沒有父實例，此實例將會是其自己。
console.log(vm.$root);若果只有這個一個vm實例，那麽麽vm.$root將返回自己，返回自己，直接相當於vm。
其他幾個實例屬性，將在講解組件的時候介紹，而且組件很重要。
實例方法(數據操作)
vm.$watch
語法:
vm.$watch( expOrFn, callback, [options] )觀察Vue實例變化中的一個表達式或計算屬性函數。監視某個屬性，如果被更該，將執行回調函數。
表達式只接受監督的鍵路徑。對於更復雜的表達式，用一個函數取代。
- 第一個參數為表達式或計算屬性函數，也可以是一個屬性。
- 第二個參數為，觸發的回調函數
- 第三個參數為，可添加的選項
<input type="text" v-model="msg"> data:{ msg:‘你好你好‘ } vm.$watch(‘msg‘,function(newVal,oldVal){ console.log(‘新值為:‘ + newVal + ‘,舊值為:‘ +oldVal); });你可以把第一個參數設置為計算屬性函數。
vm.$watch( function(){ return Number(this.a) +Number(this.b); }, function(newVal,oldVal){ console.log(‘新值為:‘ + newVal + ‘,舊值為:‘ +oldVal); } );另外vm.$watch返回一個取消觀察函數，用來停止觸發回調:
var unwatch = vm.$watch(‘a‘, cb) // 之後取消觀察 unwatch()一旦執行unwatch()函數，就不會觸發回調,且不再監視它。
[options]可選參數，可以放值deep:true,用來深度監視。
immediate：true,立即以表達式的當前值觸發回調。
另外vm.$watch方法與實例的watch選項具有相同的作用。
vm.$set
語法:
vm.$set( target, key, value )參數:
- {Object | Array} target
- {string | number} key
-
{any} value
設置對象的屬性。如果對象是響應式的，確保屬性被創建後也是響應式的，同時觸發視圖更新
示例：data:{ user:{ id:1001, name:‘tom‘ } } //通過普通方式為對象添加屬性時vue無法實時監視到 this.user.age=25; //通過vue實例的$set方法為對象添加屬性，可以實時監視 this.$set(this.user,‘age‘,18); //通過全局API方式設置，全局API在後面介紹 Vue.set(this.user,‘age‘,22);註意對象不能是 Vue 實例，或者 Vue 實例的根數據對象
vm.$delete
語法:
Vue.delete( target, key )參數:
- {Object | Array} target
- {string | number} key/index
僅在 2.2.0+ 版本中支持 Array + index 用法。
刪除對象的屬性。如果對象是響應式的，確保刪除能觸發更新視圖。
//使用js的方式無效
delete this.user.age;
//使用vm.$delete
vm.$delete(this.user,‘name‘);
//使用全局API的方式
Vue.delete(this.user,‘age‘);目標對象不能是一個 Vue 實例或 Vue 實例的根數據對象。
實例方法(事件操作)
vm.$on,vm.$emit
語法:
vm.$on( event, callback )監聽當前實例上的自定義事件。事件可以由vm.$emit觸發。回調函數會接收所有傳入事件觸發函數的額外參數。
語法:
vm.$emit( event, […args] )觸發當前實例上的事件。附加參數都會傳給監聽器回調。
示例:
<div id="app">
<p v-on:click="test($event,‘123‘)">自定義事件</p>
</div>
methods:{
test(event,num){
vm.$emit(‘test‘,num);
}
}
vm.$on(‘test‘,function(num){
console.log(‘已監聽，並執行回調函數‘);
console.log(‘獲得的值為:‘ + num);
});當單擊p標簽文字時，將觸發自定義的單擊事件test,我們可以在test函數裏進行單擊後的操作。
通過vm.$on監聽這個自定義的test事件，可以執行回調函數，但是它需要通過vm.$emit方法來觸發，第一個參數為自定義事件名，第二個參數為附加參數。
vm.$emit方法在父子組件中也用於子組件向上傳遞數據。
vm.$once
語法:
vm.$once( event, callback )監聽一個自定義事件，但是只觸發一次，在第一次觸發之後移除監聽器。
示例:
<button v-on:mouseover="mouseover">只執行一次監聽</button>
methods:{
mouseover(){
console.log(‘移動到了此節點‘)
vm.$emit(‘mouseover‘);//可隨時，在任何處觸發.
}
}
vm.$once(‘mouseover‘,function(){
console.log(‘已監聽，並執行回調函數‘);
});通過測試發現，第一次觸碰按鈕，將打印“移動到了此節點”，“已監聽，並執行回調函數”,但是，等第二次在觸碰則只打印“移動到了此節點”。將不會在調用監聽的回調函數，因為它已不再被監聽。
vm.$off
語法:
vm.$off( [event, callback] )移除自定義事件監聽器。
- 如果沒有提供參數，則移除所有的事件監聽器；
- 如果只提供了事件，則移除該事件所有的監聽器；
- 如果同時提供了事件與回調，則只移除這個回調的監聽器。
實例方法(生命周期)
vm.$mount
語法:
vm.$mount( [elementOrSelector] )如果 Vue 實例在實例化時沒有收到 el 選項，則它處於“未掛載”狀態，沒有關聯的 DOM 元素。可以使用 vm.$mount() 手動地掛載一個未掛載的實例。
這個方法返回實例自身，因而可以鏈式調用其它實例方法。
示例:
vm.$mount(‘#app‘);
//或
var vm=new Vue({
data:{
msg:‘小小陳先森‘,
name:‘tom‘
}
}).$mount(‘#app‘);查看Vue實例生命周期
vm.$forceUpdate()
迫使 Vue 實例重新渲染。註意它僅僅影響實例本身和插入插槽內容的子組件，而不是所有子組件。
vm.$nextTick( [callback] )
將回調延遲到下次 DOM 更新循環之後執行。在修改數據之後立即使用它，然後等待 DOM 更新。
在DOM更新完成後再執行回調函數，一般在修改數據之後使用該方法，以便獲取更新後的DOM。
舉個小例子:
<p ref="thisP">{{name}}</p>
data:{
name:‘小小陳先森‘
}
//js代碼
vm.name=‘Tom‘;
console.log(vm.$refs.thisP.textContent);如果你沒有添加最後一行的.textContent,那麽你執行起來也沒什麽數據的錯誤。
設置為“Tom”值，console.log依然為“Tom”。如果你加上.textContent或的其內容。
你會發現，雖然設置了值為“Tom”，但打印控制臺在依然為“小小陳先森”。
原因:
就如，該函數的介紹所說，當實例渲染加載完畢後顯示Tom，但因為Vue數據更新後，需要渲染視圖，所以需要等待這塊DOM更新後才能顯示出新值，而js代碼執行較快，而直接通過.$refs獲得了內容，沒等得及DOM加載渲染完畢。
而此方法就是來處理它的。
代碼:
vm.$nextTick(function(){
console.log(vm.$refs.thisP.textContent);
});將其放在回調函數裏，等DOM執行完後，在執行回調函數。這樣就額可以了。
vm.$destroy()
完全銷毀一個實例。清理它與其它實例的連接，解綁它的全部指令及事件監聽器。
觸發 beforeDestroy 和 destroyed 的鉤子函數。
在大多數場景中你不應該調用這個方法。最好使用 v-if 和 v-for 指令以數據驅動的方式控制子組件的生命周期。
- 參考生命周期
Vue2.0筆記——Vue常用實例屬性，實例方法