摘要：就是實(shí)例中的對(duì)象當(dāng)前組件接收到的對(duì)象。當(dāng)前組件數(shù)的根實(shí)例如果當(dāng)前實(shí)例沒有父實(shí)例，此實(shí)例將會(huì)是其自己當(dāng)前實(shí)例的直接子組件。
vue實(shí)例
每個(gè) Vue 應(yīng)用都是通過用 Vue 函數(shù)創(chuàng)建一個(gè)新的 Vue 實(shí)例開始的：
var vm = new Vue({
// 選項(xiàng)
})
當(dāng)創(chuàng)建一個(gè) Vue 實(shí)例時(shí)，你可以傳入一個(gè)選項(xiàng)對(duì)象。作為參考，你也可以在 api/#選項(xiàng)-數(shù)據(jù) 文檔 中瀏覽完整的選項(xiàng)列表。
const app = new Vue({
el: "#root", // vue實(shí)例掛載的位置，如果不用el掛載，則也可以用app.#mount("#root")
template: "{{text}} {{obj.a}}
", //模板選項(xiàng)
data: { //實(shí)例數(shù)據(jù)選項(xiàng)
text: 0
}
})
vue實(shí)例屬性（常用）
除了數(shù)據(jù)屬性，Vue 實(shí)例還暴露了一些有用的實(shí)例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區(qū)分開來。
$data
app.$data //{text:1},就是vue實(shí)例中的data對(duì)象
$props
app.$props // 當(dāng)前組件接收到的 props 對(duì)象。父組件向子組件傳遞的數(shù)據(jù)
$el
app.$el //vue掛載的dom節(jié)點(diǎn)
$options
// 需要在選項(xiàng)中包含自定義屬性時(shí)會(huì)有用處
app.$options //當(dāng)前 Vue 實(shí)例的初始化選項(xiàng)，注意：直接修改app.$options.data.text = 1的值是沒有效果的
$parent
app.$parent //父實(shí)例，如果當(dāng)前實(shí)例有的話。
$root
app.$root //當(dāng)前組件數(shù)的根vue實(shí)例,如果當(dāng)前實(shí)例沒有父實(shí)例，此實(shí)例將會(huì)是其自己
$children
// 當(dāng)前實(shí)例的直接子組件。使用組件時(shí)使用，比如使用
$slots
app.$slots//作為插槽的時(shí)候引用
app.$scopedSlots//
$refs
//模板的引用，快速定位到節(jié)點(diǎn)或組件，返回HTML對(duì)象或組件，例如
app.$refs
$isServer
app.$isServer//當(dāng)前 Vue 實(shí)例是否運(yùn)行于服務(wù)器。 應(yīng)用于服務(wù)端渲染
實(shí)例方法
$watch( expOrFn, callback, [options] )
app.$watch //監(jiān)聽數(shù)據(jù)變化時(shí)執(zhí)行，與選項(xiàng)里面的watch一樣
對(duì)比：
unWatch = this.$watch("text", (newText, oldText) => {
console.log(`${newText} : ${oldText}`)
})
watch: {
text(newText, oldText) {
console.log(`${newText} : ${oldText}`);
}
},
//使用watch監(jiān)聽時(shí)，組件銷毀時(shí)會(huì)自動(dòng)銷毀，而$watch則不會(huì)，必須自己調(diào)用unWatch()進(jìn)行銷毀
$on(event,callback) $emit( eventName, […args] ) $once( event, callback )
//監(jiān)聽事件
app.$on("test", function (msg) {
console.log(msg) //hi
})
//觸發(fā)事件
app.$emit("test", "hi")
//監(jiān)聽事件,只觸發(fā)一次
app.$once("test", function (msg) {
console.log(msg) //hi
})
$forceUpdate()
//迫使 Vue 實(shí)例重新渲染。
app.$forceUpdate()
//當(dāng)給初始化未設(shè)置的屬性時(shí)，就不會(huì)自動(dòng)響應(yīng)數(shù)據(jù)，這樣迫使重新渲染，可以重新響應(yīng)
//盡量不要以這種方式來做，這樣性能開銷很大
$set( target, key, value ) $delete( target, key )
//設(shè)置某一個(gè)值
app.$set(this.obj,"a",i)
//刪除某一個(gè)值
app.$set(this.obj,"a)
$nextTick ( [callback] )
//$nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM，Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化，而是異步更新的
new Vue({
// ...
methods: {
// ...
example: function () {
// 修改數(shù)據(jù)
this.message = "changed"
// DOM 還沒有更新
this.$nextTick(function () {
// DOM 現(xiàn)在更新了
// `this` 綁定到當(dāng)前實(shí)例
this.doSomethingElse()
})
}
}
})
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/110157.html
