Vue學習筆記 2

2021-08-21 16:29:09 字數 1682 閱讀 9209

一、條件渲染

v-if:一種依據條件,判斷是否渲染元素的屬性。(具有控制元素是否顯示的能力)可與v-else-if即v-else並用,使用方法與其他程式語言中類似。

key屬性在v-if中的應用:由於vue是惰性的,即載入過一次的相同元件不會重複載入,這對於if條件改變的某些情況會不符合常理。

即if與else中有相同元件但具有不同意義時,由於只載入一次,其值在切換時會被保留。這是可以用key屬性來標註這兩個元件是不相同的。

v-show :一種依據條件,判斷是否顯示元素的屬性。(屬性只改變元素的display屬性,換言之原有屬性即使不顯示依舊會被渲染)

兩者區別:v-if只有在其屬性第一次為true時才渲染元件,而v-show則在一開始都會渲染,故v-show的初始渲染開銷會更大。而v-if的切換開銷會更大。

二、列表渲染

v-for:使用item in items的表達,items是需要迴圈的陣列,item則代表迭代中的個例。v-for中有個可選的第二屬性index書寫格式為:(item,index) in items index的值為item的索引位置。

v-for可以用於object的屬性迭代,即 value in object ,value將迭代為object的屬性值。同樣也有可選的第二個屬性key,書寫格式為:(value,key)key的值將為value對應的屬性名稱。當然你也可以加上index寫為(value,key,index)這時也將會取到索引的值。

v-for可以用於整數,v-for=「n in 10」n將迴圈1-10。

v-for中的元素更新是使用就地重用策略,這意味著在僅僅是資料順序發生改變時,v-for不會重排已經渲染的元件來達到更新的效果。這時我們使用key屬性繫結每項都有且唯一的item.id實現追蹤。

vue會觀察陣列的變化,所以如下陣列變異方法會觸發檢視的更新(變異方法:會使陣列本身發生改變的方法)

同樣的非變異方法不改變原先的陣列,故不會觸發使徒的更新,但你可以通過賦值,用返回的新陣列替代原有陣列實現檢視的更新。

vue無法檢測以下兩種形式的陣列變化

1.當你利用索引直接設定乙個項時,例如:

vm.items[indexofitem] = newvalue

替代的方法有:

vue.set(vm.items, indexofitem, newvalue)

vm.items.splice(indexofitem, 1, newvalue)

2.當你修改陣列的長度時,例如:

vm.items.length = newlength

替代的方法有:

vm.items.splice(newlength)

vue無法件測物件屬性的新增或刪除

可以採用這種方式新增響應屬性

vue.set(vm.userprofile, 'age', 27)

三、當我們需要顯示乙個陣列的排序或某種計算結果卻不想改變陣列原先的值時

1.使用計算屬性

定義相應的計算屬性,for屬性中 『item in 計算屬性』 

2.使用方法

定義相應的犯法,for屬性中『item in method(items)』

四、v-for與v-if

v-for比v-if優先順序高,即在同一標籤下具有這兩種屬性將迴圈並判斷每個子項。如需判斷是否進行迴圈,需要將v-if屬性寫在具有v-for標籤的屬性的父標籤中(外層標籤)。

VUE學習筆記2

一 安裝vue腳手架的常用外掛程式 axios 前後端聯調外掛程式 mockjs 模擬後端外掛程式 element ui 元件庫,統一風格的按鈕 彈框等 vuex 狀態管理工具,可理解為管理全域性變數 配置檔案的說明鏈結可參考 實際工程配置時主要關注發布路徑 靜態檔案儲存路徑設定 後端聯調相應配置,...

Vue學習筆記 2

在計算屬性的函式中,不能使用vue建構函式返回的vm變數,因為此時vm還未返回,依然處於vue內部建構函式過程中,遂只能使用this來代替vm。若要使用typescript,可使用以下方法來實現 智慧型感知 vm vm this 另 其他不能用vm變數,只能使用this變數的地方,都可以通過此方法來...

vue學習筆記2

1,非父子元件間的傳值 1,非父子元件之間的傳值有兩種方法.方法一 用vuex比較難.方法二 利用bus 匯流排 觀察者模式 發布訂閱模式 2,bus的使用.首先vue.prototype.bus new vue 意思是給vue的原型物件新增bus屬性,且bus是vue的例項 其次就是如何觸發傳值 ...