一、內(nèi)置指令
1堰塌、v-text指令 ：向標簽中添加文本
2涡拘、v-html指令：向指定恒點中渲染包含html結(jié)構(gòu)的內(nèi)容。
2-1嚼锄、與插值語法的區(qū)別:
(1).v-html會替換掉節(jié)點中所有的內(nèi)容减拭，{{xx}}則不會 。
(2).v-html可以識別html結(jié)構(gòu)区丑。
2-2拧粪、嚴重注意: v-html有安全性問題！２捉摹可霎！
(1).在網(wǎng)站上動態(tài)演染任查HTML是非常危險的，容易導(dǎo)致XSS攻擊宴杀。
(2).定要在可信的內(nèi)容上使用v-html.永遠不要用在用戶提交的內(nèi)容上!3癣朗、v-cloak指令：本質(zhì)是一個特殊屬性。Vue實側(cè)創(chuàng)建完畢并接管容器后旺罢。會制掉v-cloak屬性旷余，使用css配合v-cloak間以解決網(wǎng)速設(shè)時頁面展示出{{xxx}}的問題
4绢记、v-once指令：v-once所在節(jié)點在初次動態(tài)渲染后。就視為靜態(tài)內(nèi)容了正卧，以后數(shù)據(jù)的改動不會引起v-once所在結(jié)構(gòu)的更新蠢熄。可以用其優(yōu)化性能炉旷。
5护赊、v-pre指令:跳過其所在節(jié)點的編譯過程±荆可利用它跳過:沒有使用指令語法骏啰、沒有使用插值語法的節(jié)點。會加快編譯抽高。
二判耕、自定義指令
- 1、定義語法:
(1).局部指令:
new Vue({
directives:{指令名:配置對象}
})
new Vue({
directives{指令名:回調(diào)兩數(shù)}
})
(2).全局指令:
Vue.directive(指令名,配置對象)
Vue.directive(指令名回調(diào)兩數(shù))
2翘骂、配置對象中常用的3個回調(diào)
(1)壁熄、bind:指令與元素成功綁定時調(diào)用。
(2)碳竟、inserted:指令所在元素被插入頁面時調(diào)用.
(3)草丧、update:指令所在模板結(jié)構(gòu)被重新解析時調(diào)用。3莹桅、備注:
1.指令定義時不加v-昌执。但使用時要加v-;
2.指令名如果是多個單詞，要使用kebab-case命名方式诈泼，不要用camelCase命名懂拾。
<div id="root">
<h1>正常值 : <span v-text="num"></span></h1>
<h1>放大10倍 : <span v-big="num"></span></h1>
<button @click="num++">點我num+1</button>
<hr />
<input type="text" v-bind:value="num" />
<input type="text" v-fbind:value="num" />
</div>
<script>
Vue.config.productionTip = false; //阻止vue在啟動時生成生產(chǎn)提示
// 全局指令
Vue.directive("fbind", {
// 指令與元素成功綁定時
bind(element, binding) {
console.log("bind");
element.value = binding.value;
},
// 指令所在元素插入頁面時
inserted(element, binding) {
console.log("inserted");
element.focus();
},
// 指令所在模板被重新解析時
update(element, binding) {
console.log("ipdate");
element.value = binding.value;
},
});
//創(chuàng)建Vue實例
const vm = new Vue({
//ViewModel
el: "#root",
data: {
num: 1,
},
methods: {},
directives: {
// big何時會被調(diào)用？ 1铐达、指令與元素成功綁定時岖赋；2、指令所在的模板被重新解析時
big(element, binding) {
element.innerText = binding.value * 10;
console.log(element, binding.value, this);
// !!!注意 此處的this指向 window
},
fbind:{
// 指令與元素成功綁定時
bind(element,binding){
console.log('bind');
element.value = binding.value;
},
// 指令所在元素插入頁面時
inserted(element,binding){
console.log('inserted');
element.focus();
},
// 指令所在模板被重新解析時
update(element,binding){
console.log('ipdate');
element.value = binding.value;
}
}
},
});
// console.log(vm);
</script>
