Vue 學(xué)習(xí)筆記入門篇 vueJS中的內(nèi)置指令
5.1 基本指令
5.1.1 v--cloak一般與display：none進(jìn)行結(jié)合使用
作用：解決初始化慢導(dǎo)致頁面閃動的最佳實(shí)踐
5.1.2 v--once
定義：它的元素和組件只渲染一次
5.2 條件渲染指令
5.2.1 v--if, v--eles--if ,v--else
用法： 必須跟著屁股走
v-if的弊端 :
Vue 在渲染元素時 占贫，出于效率考慮魄揉，會盡可能地復(fù)用已有的元素而非重新渲染， 因此會出現(xiàn)烏龍翩肌，只會渲染變化的元素硫麻，也就是說，input元素被復(fù)用了。
解決方法： 加key魄鸦，唯一，提供key值可以來決定是否復(fù)用該元素
5.2.2 v--show
v-show: 顯現(xiàn)與否取決于布爾值
只改變了css屬性display
v--if和v--show的比較
v--if:
實(shí)時渲染：頁面顯示就渲染癣朗，不顯示拾因。我就給你移除。
v--show:
v--show的元素永遠(yuǎn)存在也頁面中旷余，只是改變了css的display的屬性绢记。
5.3 列表渲染指令v--for
用法: 當(dāng)需要將一個數(shù)組遍歷或枚舉一個對象屬性的時候循環(huán)顯示時，就會用到列表渲染指令 v--for正卧。
兩種使用場景：
- 遍歷多個對象
- 遍歷一個對象的多個屬性
v-for demo
<body>
<div id="demo">
//遍歷多個對象一定是遍歷的數(shù)組
//帶索引的寫法：括號的第一個變量蠢熄，代表item，第二個代表index
<ul>
<li v-for="vuestu in vueStudy">{{vuestu.name}}</li>
</ul>
<br>
//遍歷一個對象的多個屬性
//拿到value,key,index的寫法 v-k-i--外開
<div v-for="(value,key,index) in women">{{index}}-----{{key}}------{{value}}</div>
</div>
<script src="http://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#demo',
data:{
vueStudy:[
//每個對象對應(yīng)一個li
{name:'敲代碼'},
{name:'看資料'},
{name:'看博客'}
],
women:{
grid1: '張柏芝',
grid2: '迪麗熱巴',
grid3: '高圓圓'
}
}
})
</script>
</body>
5.4 數(shù)組更新炉旷，過濾與排序
改變數(shù)組的一系列方法：
- push() 在末尾添加元素
- pop() 將數(shù)組的最后一個元素移除
- shift() 刪除數(shù)組的第一個元素
- unshift（）：在數(shù)組的第一個元素位置添加一個元素
- splice() ：可以添加或者刪除函數(shù)—返回刪除的元素
三個參數(shù)：- 第一個參數(shù) 表示開始操作的位置
- 第二個參數(shù)表示：要操作的長度
- 第三個為可選參數(shù)：
- sort（）：排序
- reverse()
兩個數(shù)組變動vue檢測不到:
- 改變數(shù)組的指定項(xiàng)
- 改變數(shù)組長度
改變指定項(xiàng)：
Vue.set(app.arr,1,”car”)? // 第一個參數(shù)arr, 第二個index签孔，第三個值
app.arr.splice(1)： 改變數(shù)組長度
過濾：filter
解決方法：
- set
- splice
5.5 方法和事件
[object MouseEvent]
5.5.1 基本用法
v--on綁定的事件類似于原生 的onclick等寫法:
methods:{
handle:function (count) {
count = count || 1;
this.count += count;
}
}
如果方法中帶有參數(shù)，但是你沒有加括號窘行，默認(rèn)傳原生事件對象event
5.5.2 修飾符
- 在vue中傳入event對象用 $event
- 向上冒泡
stop:阻止單擊事件向上冒泡
prevent:提交事件并且不重載頁面
self:只是作用在元素本身而非子元素的時候調(diào)用
once: 只執(zhí)行一次的方法
可以監(jiān)聽鍵盤事件：
//13 -> enter鍵
<input @keyup.13 ="submitMe"> ——-指定的keyCode
<input @keyup.enter ="submitMe"> ——-指定的keyCode
vueJS為我們提供了：
.enter
.tab
.delete 等等饥追、、罐盔、但绕、、惶看、
