vue學習總結(一)

2022-09-04 09:09:11 字數 1070 閱讀 2539

html部分:

} 插值表示式:存在閃爍問題,但不會覆蓋元素中原本的內容

v-cloak:解決插值表示式閃爍的問題

v-text:沒有閃爍問題且覆蓋元素中原本的內容,內容當作字串顯示

v-html:沒有閃爍問題且覆蓋元素中原本的內容,內容當作html顯示

v-bind:vue提供的屬性繫結機制  縮寫是 :

v-on: vue提供的事件繫結機制  縮寫是 @

v-model:可以實現表單元素和 model 中資料的雙向繫結,只能運用再表單元素中

js部分:

new vue():建立乙個vue例項

el : '  '  :繫結vue的使用範圍dom

data : :展示的資料

methods :  :呼叫的方法

this:如果想要獲取 data 上的資料,或者 想要呼叫 methods 中的 方法,必須通過 this.資料屬性名  或  this.方法名來進行訪問,這裡的this,就表示 我們 new 出來的 vm 例項物件

filters : :定義私有過濾器

vue指令值v-for:

迭代陣列:}----}

迭代物件陣列,i 為索引:}----}----}

迴圈物件屬性,將屬性列印,i 為索引:}----}----}

迭代數字,注意:如果使用v-for迭代數字的話,count從 1 開始:這是第 } 次迴圈

v-if:每次都會重新刪除活建立元素,有較高的切換效能消耗

v-show:每次不會重新進行dom的刪除和建立操作,只會切換元素的 display:none樣式,有較高的初始渲染消耗

vue的其他屬性:

建立乙個vue物件  var vm = new vue(,

vm.$el:掛載vue例項

vm.$nexttick :渲染完成以後執行

vm.$nexttick(function())

vm.$mount :等同於例項中的el屬性

必須在腳手架的情況下才能正常使用

VUE學習總結(一)

1 簡介 vue.js簡單小巧 17kb 漸進式 不必一開始會所有內容,可階段性使用 2 mvvm model view viewmodel view與viewmodel之間雙向繫結,vue通過mvvm拆分檢視和資料 3 例項 4 生命週期 5 如果將使用者產生的內容使用v html輸出後,有可能導...

Vue學習總結(一)

2.插值語法 計算屬性 h1 div src js vue.js script newvue script 在script標籤中new乙個vue例項,其構造引數為乙個物件,物件中包含有options和每個option對應的資料,以上 中的el 例項對應的是此vue例項需要掛載的元素id,data 對...

vue學習問題總結(一)

使用comopontent元件報錯 錯誤資訊 vue.js 491 vue warn unknown custom element did you register the component correctly?for recursive components,make sure to provi...