v-cloak
v-cloak 不需要表達式颂砸，它會在Vue實例結束編譯時從綁定的HTML元素上移除渊胸，經常和CSS的display:none配合使用。
v-cloak 是一個解決初始化慢導致頁面閃動的最佳實踐奄容。
示例代碼
<template>
<div v-cloak>{{msg}}</div>
</template>
<script>
export default {
name: "Directive",
data() {
return {
msg: "v-cloak"
};
}
};
</script>
<style scoped>
[v-cloak] {
display: none;
}
</style>
v-once
v-once 也是一個不需要表達式的指令踊东，作用是定義它的元素或組件只渲染一次，包括元素或者組件的所有子界面胞四。首次渲染后恬汁，不在隨數據的變化重新渲染，將被視為靜態(tài)內容辜伟。
示例代碼
<template>
<div v-once>{{msg}}</div>
</template>
<script>
export default {
name: "Directive",
data() {
return {
msg: "v-once"
};
}
};
</script>
v-if蕊连、v-else-if、v-else
和JavaScript的條件語句if游昼、else甘苍、else-if類似，Vue的條件指令可以根據表達式的值在DOM中渲染或銷毀元素或者組件烘豌。v-else-if要緊跟v-if,v-else要緊跟v-else-if或v-if,表達式值為true時载庭，當前元素或組件及所有子節(jié)點將被渲染，為false時被移除廊佩。
示例代碼
<template>
<p v-if="status===1">Status=1</p>
<p v-else-if="status===2">Status=2</p>
<p v-else>Status={{status}}</p>
</template>
<script>
export default {
name: "IfComponent",
data() {
return {
status: 1
};
}
};
</script>
如果一次判斷的是多個元素囚聚，可以在vue內置的<template>元素上使用條件指令，最終渲染的結果不會包含該元素标锄。
示例代碼
<template>
<div>
<template v-if="status===1">
<p>??</p>
<p>??</p>
<p>??</p>
</template>
</div>
</template>
<script>
export default {
name: "IfComponent",
data() {
return {
status: 1
};
}
};
</script>
vue在渲染元素是顽铸，出于效率考慮，會盡可能的復用已有的元素而非重新渲染料皇。
代碼示例
<template>
<div>
<template v-if="type==='name'">
<label>用戶名: </label>
<input placeholder="請輸入用戶名">
</template>
<template v-else>
<label>郵箱: </label>
<input placeholder="請輸入郵箱">
</template>
<button @click="handleChangeInputType">切換輸入類型</button>
</div>
</template>
<script>
export default {
name: "IfComponent",
data() {
return {
type: "name"
};
},
methods: {
handleChangeInputType: function() {
this.type = this.type === "name" ? "mail" : "name";
}
}
};
</script>
結果
我們可以使用vue提供的key屬性來決定是否要復用元素谓松，key值必須是唯一的。有了key只有践剂，元素就不會重用了鬼譬。
代碼示例
<template>
<div>
<template v-if="type==='name'" >
<label>用戶名: </label>
<input placeholder="請輸入用戶名" key="name-input">
</template>
<template v-else>
<label>郵箱: </label>
<input placeholder="請輸入郵箱" key="email-input">
</template>
<button @click="handleChangeInputType">切換輸入類型</button>
</div>
</template>
<script>
export default {
name: "IfComponent",
data() {
return {
type: "name"
};
},
methods: {
handleChangeInputType: function() {
this.type = this.type === "name" ? "mail" : "name";
}
}
};
</script>
結果
v-show
v-show的用法與v-if基本一致，只不過v-show是改變元素的CSS屬性display逊脯。當v-show表達式為false時优质，元素會被隱藏。為true時顯示。
示例代碼
<template>
<div>
<h3 v-show="isShow">{{msg}}</h3>
</div>
</template>
<script>
export default {
name: "Show",
data() {
return {
isShow: falses,
msg: "v-show"
};
}
};
</script>
結果
v-if和v-show應用場景
v-if 更適合條件不經常改變的場景巩螃，應為它切換開銷相對較大演怎，而v-show 適用于頻繁切換條件。
列表渲染指令 v-for
當需要將一個數組遍歷或者枚舉一個對象循環(huán)顯示時避乏，就會用到列表渲染指令v-for颤枪。它的表達式需要結合in或者of來使用，類似item in items或者 item of items的形式淑际。
代碼示例
<template>
<div>
<ul>
<li v-for="book in books" :key="book.name">{{book.name}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "For",
data() {
return {
books: [
{ name: "《Vue》" },
{ name: "《Angular》" },
{ name: "《React》" }
]
};
}
};
</script>
結果
v-for 表達式支持一個可選參數作為當前的索引。
示例代碼
<template>
<div>
<ul>
<li v-for="(book,index) in books" :key="book.name">{{index}}扇住、{{book.name}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "For",
data() {
return {
books: [
{ name: "《Vue》" },
{ name: "《Angular》" },
{ name: "《React》" }
]
};
}
};
</script>
結果
與v-if一樣春缕，v-for也可以用在內置標簽<template>上，將多個元素進行渲染艘蹋。
v-for對象遍歷
v-for 遍歷對象屬性時锄贼，有兩個可選參數，分別為鍵名和索引女阀。
示例代碼
<template>
<div>
<ul>
<li v-for="(value,key,index) in user" :key="key">{{index}}-{{key}}-{{value}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "For",
data() {
return {
user: {
name: "Nick",
age: 18,
sex: "男"
}
};
}
};
</script>
結果
v-for 還可以迭代整數宅荤。
示例代碼
<template>
<div>
<ul>
<li v-for="n in 3">{{n}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "For",
data() {
return {};
}
};
</script>
結果
數組更新
vue的核心是數據與視圖的雙向綁定，當我們修改數組時浸策，vue會檢測到數據變化冯键，所以用v-for渲染的視圖也會立即更新。vue包含了一組觀察數組變異的方法庸汗，使用它們改變數組也會觸發(fā)視圖的更新惫确。
- push( ) 向數組的末尾添加一個或更多元素
- pop( ) 刪除并返回數組的最后一個元素
- shift( ) 刪除并返回數組的第一個元素
- unshift( ) 向數組的開頭添加一個或更多元素，并返回新的長度蚯舱。
- splice( ) 刪除元素改化，并向數組添加新元素。
- sort( ) 對數組的元素進行排序
- reverse( ) 顛倒數組中元素的順序枉昏。
但有一些方法不會改變原數組陈肛，它們都返回的是一個新數組，我們可以用新數組來替換原數組兄裂。
- filter( ) 過濾不符合條件的元素句旱，返回結果。
- concat( ) 連接兩個或更多的數組晰奖，并返回結果
- slice( ) 從某個已有的數組返回選定的元素
注意
以下變動數組中前翎，vue是不能檢測到的，也不會觸發(fā)視圖更新畅涂。
- 通過索引直接設置項港华。 例如
books[2]={name:"Python"} - 修改數組長度，例如
books.length=2
解決辦法
解決第一個問題可以用兩種方法實現(xiàn)同樣的效果午衰，第一種是使用vue內置的set方法:
Vue.set(this.books,2,{name:"《Python》"});
如果是在webpack中使用組件化的方式立宜，默認是沒有導入vue的冒萄，這是可以使用 $set:
this.$set(this.books, 2, { name: "《Python》" });
另一種方法:
通過數組的splice函數實現(xiàn)
this.books.splice(2, 1, { name: "《Python》" });
第二個問題也可以直接使用splice函數解決:
this.books.splice(2);
過濾和排序
當你不想改變原數組，想通過一個數組的副本來做過濾或排序的顯示時橙数，可以使用計算屬性來返回過濾或排序后的數組尊流。
示例代碼
<template>
<div>
<ul>
<template v-for="(book,index) of filiterBooks" class="line">
<li>技術: {{book.name}} <p>作者: {{book.author}}</p></li>
</template>
</ul>
</div>
</template>
<script>
export default {
name: "Sort",
data() {
return {
books: [
{
name: "Vue",
author: "Vue"
},
{
name: "Angular",
author: "Google"
},
{
name: "React",
author: "Facebook"
}
]
};
},
computed: {
filiterBooks: function() {
return this.books.sort(function(a, b) {
return a.name.length > b.name.length;
});
}
}
};
</script>
事件和方法
v-on:click 等于 @click
在methods中定義了我們需要的方法提供@click調用，需要注意的是灯帮，@click調用的方法名后可以不跟"()"崖技。此時，如果該方法有參數钟哥，默認會將原生事件對象event傳入迎献，可以嘗試修改為@click="handleChangeBook",然后在handleChangeBooks內打印出book參數看看。
這種在HTML元素上監(jiān)聽事件的設計看似將DOM與JavaScript緊耦合腻贰，違背分離的原理吁恍，實則剛好相反。因為通過HTML就可以知道調用的是哪一個方法播演，將邏輯與DOM 解耦冀瓦。便于維護。最重要的是写烤，當ViewModel銷毀時翼闽，所有的時間處理器都會自動刪除，無須自己清理洲炊。
vue提供了一個特殊變量$event,用于訪問原生DOM事件肄程，例如下面的實例可以阻止鏈接打開:
示例代碼
<template>
<div>
<a :href="url" @click="handleClick('禁止打開',$event)">百度一下</a>
</div>
</template>
<script>
export default {
name: "Methods",
data() {
return {
msg: "methods",
url: "https://www.baidu.com"
};
},
methods: {
handleClick: function(message, event) {
event.preventDefault();
window.alert(message);
}
}
};
</script>
修飾符
在@綁定的事件后加上小圓點.,再跟一個后綴來使用修飾符。vue支持一下修飾符:
- .stop
- .prevent
- .capture
- .self
- .once
具體用法如下:
<!-- 阻止單擊事件冒泡 -->
<a @click.stop="handleClick"></a>
<!-- 提交事件不再重載頁面 -->
<form @submit.prevent="handle"></form>
<!-- 修飾符可以串聯(lián) -->
<a @click.stop.prevent="handle"></a>
<!-- 只有修飾符 -->
<form @submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div @click.capture="handle"></div>
<!-- 只當事件在該元素本身（而不是子元素）觸發(fā)時觸發(fā)回調 -->
<div @click.self="handle"></div>
<!-- 只觸發(fā)一次选浑，組件同樣適用 -->
<div @click.once="handle"></div>
在表單元素上監(jiān)聽鍵盤事件時蓝厌，還可以使用按鍵修飾符，比如按下具體某個鍵時才調用方法:
<!-- 只有在keyCode試13時候調用vm.submit() -->
<input @keyup.13="submit">
也可以自己配置具體按鍵:
Vue.config.keyCodes.f1=112;
全局定義后古徒，就可以使用@keyup.f1
除了具體的某個keyCode外拓提，Vue還提供了一些快捷名稱，以下是全部別名：
- .enter
- .tab
- .delete (捕獲”刪除“和”退格“鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
這些按鍵修飾符也可以組合使用隧膘，或和鼠標一起配合使用：
- .ctrl
- .alt
- .shift
- .meta (Mac下是Command鍵,Windows下是窗口鍵)
