迴首 在 零基礎入門Vue之夢開始的地方——插值語法 我記錄了v-bind、v-on、v-model的學習 在 零基礎入門Vue之To be or not to be——條件渲染 我記錄了v-if、v-else-if、v-else、v-show的學習 在 零基礎入門Vue之影分身之術——列表渲染&渲 ...
迴首
在 零基礎入門Vue之夢開始的地方——插值語法 我記錄了v-bind、v-on、v-model的學習
在 零基礎入門Vue之To be or not to be——條件渲染 我記錄了v-if、v-else-if、v-else、v-show的學習
在 零基礎入門Vue之影分身之術——列表渲染&渲染原理淺析 我記錄了v-for的學習
為了推進我的Vue的學習，本篇將一次性介紹其他常用指令，並且記錄如何 自定義指令
其他常用指令
在Vue中，除了已學過的八個指令之外，還有另外五個比較常用的指令
v-text 文本綁定指令
更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
假設有如下數據：
new Vue({
el:"#root",
data(){
return {
msg:"Hello world"
}
}
})
那麼html除了使用插值語法來顯示msg內容之外，還可以這樣子寫：
<div id="root">
<span v-text="msg"></span>
</div>
v-html 富文本綁定指令
更新元素的 innerHTML。註意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯。如果試圖使用 v-html 組合模板，可以重新考慮是否通過使用組件來替代
如果是v-text，僅僅只會當作文本解析，但如果我掏出了v-html，那麼我所寫的內容將會作為html來解析
new Vue({
el:"#root",
data(){
return {
msg:"<h1>Hello worldM</h1>"
}
}
})
此時，使用v-html會自動解析<h1>這個標簽
<div id="root">
<span v-html="msg"></span>
</div>
警告：為了預防xss的攻擊，千萬不要在輸入類元素或者具有提交類元素上使用v-html，請在可信任的元素上使用v-html
v-pre 阻止渲染指令
跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標簽。跳過大量沒有指令的節點會加快編譯。
假設dom節點中，有些元素不需要渲染的，即可給這個節點打上v-pre指令，用法如下：
<div id="root">
<span v-pre>這樣子寫：{{data裡面的屬性}} 標識Vue的插值語法</span>
</div>
span標簽裡面的內容不會被Vue進行解析，這個指令可以提高渲染效率
v-cloak 渲染前標識指令
這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。
當給標簽打上v-cloak時，未被解析的標簽，會存在這個屬性，當標簽被解析時，這個屬性消失，因此可以配合css這麼用：
[v-cloak] {
display: none;
}
<div id="root">
<span v-html="msg" v-cloak></span>
</div>
當頁面未被解析時，span標簽沒被顯示，只有當頁面被解析完成時，span標簽才會出現
此指令可以語法網路卡頓時，未被解析的內容率先顯示到頁面上
v-once 指令
只渲染元素和組件一次。隨後的重新渲染，元素/組件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新性能
這個指令，使得節點只被解析一次，後續的數據修改，此指令都不會有任何變化
<div id="root">
<span v-text="msg" v-once></span>
</div>
Vue 自定義指令
在創建Vue配置項中，directives配置項，允許使用的人註冊自定義指令
其中自定義指令可分為：
- 全局指令
- 局部指令
局部指令
new Vue({
el:"#root",
directives:{
orderName:{
bind(el,binding,vnode,oldVnode){}, //指令第一次綁定到元素時調用
inserted(el,binding,vnode,oldVnode){}, //綁定元素插入父節點調用
update(el,binding,vnode,oldVnode){}, //當前模板更新前調用（可能不是當前節點的更新）
componentUpdated(el,binding,vnode,oldVnode){}, //當前模板更新後調用（可能不是當前節點的更新）
unbind(el,binding,vnode,oldVnode){} //指令解綁時調用
},
}
});
<div id="root">
<!-- 註意雖然js里採用了駝峰命名，但標簽使用時請用-連接每個單詞 -->
<span v-order-name="1+1">hello</span>
</div>
參數詳解 如下（詳情請查看官網）：
- el：當前綁定節點
- binding：當前指令的綁定信息
- vnode：當前虛擬節點
- oldVnode：上一個虛擬節點
舉個例子：假設我想創建一個v-big，指令使得綁定標簽的文本放大到45px
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 註意雖然js里採用了駝峰命名，但標簽使用時請用-連接每個單詞 -->
<span v-order-name>hello</span>
</div>
</body>
<script>
new Vue({
el:"#root",
directives:{
orderName:{
bind(el,binding,vnode,oldVnode){
el.style.fontSize = '45px';
}
},
}
});
</script>
</html>
改進：如果我希望，這個大小由我自己定義，而不是寫死
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 註意雖然js里採用了駝峰命名，但標簽使用時請用-連接每個單詞 -->
<span v-order-name="'45px'">hello</span>
</div>
</body>
<script>
new Vue({
el:"#root",
directives:{
orderName:{
bind(el,binding,vnode,oldVnode){
el.style.fontSize = binding.value;
}
},
}
});
</script>
</html>
更多的請參考官方例子：簡介
全局指令
在Vue上一小節時，directives配置項配置出來的節點只允許當前Vue實例使用，當涉及到一個自定義指令給多個Vue實例/組件去使用，就該引入全局指令了
在Vue對象上有一個靜態方法：directive
允許用戶設置全局指令，並且能在多個實例中通用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root1">
<!-- 註意雖然js里採用了駝峰命名，但標簽使用時請用-連接每個單詞 -->
<span v-order-name="'45px'">hello</span>
</div>
<div id="root2">
<!-- 註意雖然js里採用了駝峰命名，但標簽使用時請用-連接每個單詞 -->
<span v-order-name="'78px'">hello</span>
</div>
</body>
<script>
Vue.directive("orderName",{
bind(el,binding,vnode,oldVnode){
el.style.fontSize = binding.value;
}
});
new Vue({
el:"#root1",
});
new Vue({
el:"#root2",
});
</script>
</html>
其配置項與局部指令雷同，再次不過多贅述
指令簡寫形式
如果你不關註自定義的指令執行時機的話，你可以直接寫成如下形式：
new Vue({
el:"#root",
directives:{
orderName(){},
}
});
此時，執行實際，與binding一樣
The End
本篇完~~~
