摘要:就是實例中的對象當前組件接收到的對象。當前組件數的根實例如果當前實例沒有父實例,此實例將會是其自己當前實例的直接子組件。
vue實例
每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例開始的:
</>復制代碼
var vm = new Vue({
// 選項
})
當創建一個 Vue 實例時,你可以傳入一個選項對象。作為參考,你也可以在 api/#選項-數據 文檔 中瀏覽完整的選項列表。
</>復制代碼
const app = new Vue({
el: "#root", // vue實例掛載的位置,如果不用el掛載,則也可以用app.#mount("#root")
template: "{{text}} {{obj.a}}", //模板選項
data: { //實例數據選項
text: 0
}
})
vue實例屬性(常用)
除了數據屬性,Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $,以便與用戶定義的屬性區分開來。
$data
</>復制代碼
app.$data //{text:1},就是vue實例中的data對象
$props
</>復制代碼
app.$props // 當前組件接收到的 props 對象。父組件向子組件傳遞的數據
$el
</>復制代碼
app.$el //vue掛載的dom節點
$options
</>復制代碼
// 需要在選項中包含自定義屬性時會有用處
app.$options //當前 Vue 實例的初始化選項,注意:直接修改app.$options.data.text = 1的值是沒有效果的
$parent
</>復制代碼
app.$parent //父實例,如果當前實例有的話。
$root
</>復制代碼
app.$root //當前組件數的根vue實例,如果當前實例沒有父實例,此實例將會是其自己
$children
</>復制代碼
// 當前實例的直接子組件。使用組件時使用,比如使用 組件時,里面的就是item的children
app.$children
$slots
</>復制代碼
app.$slots//作為插槽的時候引用
app.$scopedSlots//
$refs
</>復制代碼
//模板的引用,快速定位到節點或組件,返回HTML對象或組件,例如
app.$refs
$isServer
</>復制代碼
app.$isServer//當前 Vue 實例是否運行于服務器。 應用于服務端渲染
實例方法
$watch( expOrFn, callback, [options] )
</>復制代碼
app.$watch //監聽數據變化時執行,與選項里面的watch一樣
對比:
</>復制代碼
unWatch = this.$watch("text", (newText, oldText) => {
console.log(`${newText} : ${oldText}`)
})
watch: {
text(newText, oldText) {
console.log(`${newText} : ${oldText}`);
}
},
//使用watch監聽時,組件銷毀時會自動銷毀,而$watch則不會,必須自己調用unWatch()進行銷毀
$on(event,callback) $emit( eventName, […args] ) $once( event, callback )
</>復制代碼
//監聽事件
app.$on("test", function (msg) {
console.log(msg) //hi
})
//觸發事件
app.$emit("test", "hi")
//監聽事件,只觸發一次
app.$once("test", function (msg) {
console.log(msg) //hi
})
$forceUpdate()
</>復制代碼
//迫使 Vue 實例重新渲染。
app.$forceUpdate()
//當給初始化未設置的屬性時,就不會自動響應數據,這樣迫使重新渲染,可以重新響應
//盡量不要以這種方式來做,這樣性能開銷很大
$set( target, key, value ) $delete( target, key )
</>復制代碼
//設置某一個值
app.$set(this.obj,"a",i)
//刪除某一個值
app.$set(this.obj,"a)
$nextTick ( [callback] )
</>復制代碼
//$nextTick 是在下次 DOM 更新循環結束之后執行延遲回調,在修改數據之后使用 $nextTick,則可以在回調中獲取更新后的 DOM,Vue 實現響應式并不是數據發生變化之后 DOM 立即變化,而是異步更新的
new Vue({
// ...
methods: {
// ...
example: function () {
// 修改數據
this.message = "changed"
// DOM 還沒有更新
this.$nextTick(function () {
// DOM 現在更新了
// `this` 綁定到當前實例
this.doSomethingElse()
})
}
}
})
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/110157.html
摘要:此時還未有選項鉤子函數和間的生命周期完成后,會有一個判斷過程,判斷對象是否有選項。鉤子函數和鉤子函數間的生命周期當發現中的數據發生了改變,會觸發對應組件的重新渲染,先后調用和鉤子函數。和鉤子函數間的生命周期鉤子函數在實例銷毀之前調用。 vue生命周期 這是vue生命周期的圖示具體內容:showImg(https://segmentfault.com/img/bV4xju?w=1200&...
摘要:更推薦用和實現父子組件通信創建實例此時打印出組件繼承使用基礎構造器,創建一個子類。包含組件選項的對象創建構造器創建實例,并掛載到一個元素上。該對象包含可注入其子孫的屬性。和綁定并不是可響應的。 組件注冊 關于組件名: *組件名可以是kebab-case (短橫線分隔命名)或者PascalCase (駝峰式命名) 當使用 kebab-case (短橫線分隔命名) 定義一個組件時,你也必...
摘要:更推薦用和實現父子組件通信創建實例此時打印出組件繼承使用基礎構造器,創建一個子類。包含組件選項的對象創建構造器創建實例,并掛載到一個元素上。該對象包含可注入其子孫的屬性。和綁定并不是可響應的。 組件注冊 關于組件名: *組件名可以是kebab-case (短橫線分隔命名)或者PascalCase (駝峰式命名) 當使用 kebab-case (短橫線分隔命名) 定義一個組件時,你也必...
摘要:指令指令帶有前綴,以表示它們是提供的特殊特性。添加事件偵聽器時使用模式。只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。差別在哪里將特性名轉換為從開始支持語法糖,會擴展成一個更新父組件綁定值的偵聽器。 vue指令 指令帶有前綴 v-,以表示它們是 Vue 提供的特殊特性。 v-text {{msg}} v-html //渲染HTML文本,更新元素的 innerHTML 。注意:內...
摘要:哪吒社區技能樹打卡打卡貼函數式接口簡介領域優質創作者哪吒公眾號作者架構師奮斗者掃描主頁左側二維碼,加入群聊,一起學習一起進步歡迎點贊收藏留言前情提要無意間聽到領導們的談話,現在公司的現狀是碼農太多,但能獨立帶隊的人太少,簡而言之,不缺干 ? 哪吒社區Java技能樹打卡?【打卡貼 day2...
閱讀 1183·2021-09-27 13:34
閱讀 993·2021-09-13 10:25
閱讀 519·2019-08-30 15:52
閱讀 3457·2019-08-30 13:48
閱讀 658·2019-08-30 11:07
閱讀 2179·2019-08-29 16:23
閱讀 2005·2019-08-29 13:51
閱讀 2338·2019-08-26 17:42