實例屬性
- 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');
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 指令以數據驅動的方式控制子組件的生命週期。
- 參考生命週期