一、基本指令
1. v--cloak
一般與 display: none;
結合使用。
作用:解決初始化較慢時導致的頁面閃動。
原理:v-cloak
使其在 Vue 實例渲染之后再進行渲染,改變了渲染順序。
2. v--once
作用:定義它的元素或組件只渲染一次,后續(xù)都不會再重新渲染。
二、條件渲染指令
1. v--if,v--else--if,v--else
- 用法:
v-if
和v-else-if
后接的是等號,等號后必須是布爾值。
<p v-if="6<3">{{apple}}</p>
<p v-else-if="6<9">{{banana}}</p>
<p v-else>{{pear}}</p>
- 弊端 :
Vue 在渲染元素時,出于效率考慮,會盡可能地復用已有的元素而非重新渲染,因此會出現(xiàn)烏龍。(只會渲染變化的元素,即同一類元素會被復用,如input
) - 解決方法:
對不想使其復用的元素或標簽加(唯一的)key
值。
2. v--show
顯現(xiàn)與否取決于布爾值,只改變了 css 屬性 display
。
- 用法:
<p v-show="9>3">我被渲染了</p>
3. v--if 和 v--show 的比較
是否刪除dom節(jié)點。
- v--if:
實時渲染:頁面顯示就渲染,不顯示則移除。 - v--show:
v--show 的元素永遠存在于頁面中,只是改變了 CSS 的display
屬性。
三、列表渲染指令 v--for
當需要將一個數(shù)組遍歷或枚舉一個對象屬性循環(huán)顯示時,就會用到列表。
兩種使用場景:
遍歷多個對象。
遍歷一個對象的多個屬性。用法:
v-for
一定要寫在要遍歷的元素上,v-for
后接等號,類似于item in items
。遍歷多個對象遍歷的一定是數(shù)組。
(1)遍歷多個對象,vueMth 是自己定義的變量:
<ul>
<li v-for="vueMth in vueMethods">{{vueMth.name}}</li>
</ul>
data: {
vueMethods: [
{name: '多思考'}, // 每個對象對應一個li
{name: '多練習'},
{name: '多使用'}
]
}
帶索引的寫法:括號里第一個變量代表 item,第二個變量代表 index:
<ul>
<li v-for="(vueMth,index) in vueMethods">{{index}}---{{vueMth.name}}</li>
</ul>
(2)遍歷一個對象的多個屬性:
<span v-for="value in nvshen">{{value}}</span>
data: {
nvshen: {
girl2: '湯唯 ',
girl1: '高圓圓 ',
girl3: '朱茵 '
}
}
拿到 value,key,index 的寫法,v-k-i 諧音外開:
<div v-for="(value,key,index) in nvshen">第{{index}}個,鍵是{{key}},{{value}}</div>
四、數(shù)組更新,過濾與排序
- 改變數(shù)組的一系列方法:
-
push()
:在末尾添加元素 -
pop()
:將數(shù)組的最后一個元素移除 -
shift()
:刪除數(shù)組的第一個元素 -
unshift()
:在數(shù)組的第一個元素位置添加一個元素(返回新數(shù)組的長度) -
splice()
:可以刪除或者添加元素(返回刪除的元素,添加元素時返回空數(shù)組)
(1)三個參數(shù):
第一個參數(shù)表示開始操作的位置
第二個參數(shù)表示要操作的長度
第三個為可選參數(shù),添加時使用
(2)用法
app.arr.splice(1,1) // 從第一個元素位置開始,刪除一個元素(即刪除第二個元素)
app.arr.splice(1,0,"eraser") // 從第一個元素位置開始,添加一個元素
app.arr.splice(1,0,"eraser","rule") // 從第一個元素位置開始,添加兩個元素
-
sort()
:排序 -
reverse()
:翻轉數(shù)組
- 兩種數(shù)組變動 Vue 檢測不到:
- 改變數(shù)組的指定項:
app.arr[0] = 'car'
- 改變數(shù)組長度:
app.arr.length = 1
- 解決方法:
- set
改變數(shù)組指定項:Vue.set(app.arr,index,"car")
- splice
改變數(shù)組長度:app.arr.splice(0)
(從第0個位置開始,刪除所有項)
五、方法和事件
1. 基本用法
v--on
綁定的事件類似于原生的 onclick
等寫法。
methods:{
handle:function (count) {
count = count || 1;
this.count += count;
}
}
使用帶有參數(shù)的方法時,一定要在方法后面加括號 ()
。
如果方法中帶有參數(shù),但使用方法時沒有加括號,則默認傳原生事件對象 event。
2. 修飾符
在 Vue 中傳入 event 對象用 $event
。
- 監(jiān)聽單機事件
-
stop
:阻止單擊事件向上冒泡(用于子元素) -
prevent
:提交事件并且不重載頁面 -
self
:只是作用在元素本身而非子元素的時候調用(用于父元素) -
once
:只執(zhí)行一次的方法
- 監(jiān)聽鍵盤事件
- 指定的 keyCode:
<input @keyup.13 ="submitMe">
- Vue.js 還為我們提供了
.enter
,.tab
,.delete
等快捷用法