Vue 內建指令 && 自定義指令
阿新 • • 發佈：2022-05-25
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Vue 內建指令</title> 6 <script type="text/javascript" src="../js/vue.js"></script> 7 <script type="text/javascript" src="../js/day.min.js"></script> 8 <style> 9 [v-cloak]{ 10 display: None; 11 } 12 </style> 13 </head> 14 <body> 15 <!-- 16 內建指令： 17 v-bind：單項繫結解析表示式，可簡寫為“:xxx” 18 v-model：雙向資料繫結 19 v-for：遍歷陣列、物件、字串20 v-on：繫結時間監聽，可簡寫為“@” 21 v-if、v-else-if、v-else：條件渲染（動態控制節點是否存在） 22 v-show：條件渲染（動態孔子節點是否展示） 23 v-text：向其所在的節點中渲染文字內容。與插值語法的區別：v-text會替換掉節點中的內容，{{xx}}則不會 24 v-html： 25 1.作用：向指定節點中渲染包含html結構的內容 26 2.與差值語法的區別：27 .v-html會替換掉節點中所有的內容，{{xxx}}則不會 28 .v-html可以識別html結構 29 3.嚴重注意：v-html有安全性問題！！！ 30 .在網站上動態渲染任意HTML是非常危險的，容易導致xss攻擊 31 .一定要在可以的內容上使用v-html，永不要用在使用者提交的內容上 32 v-cloak：沒有值 33 1.本質是一個特殊屬性，Vue例項建立完畢並接管容器後，會刪掉v-cloak屬性 34 2.使用css配合v-cloak可以解決網速慢時頁面展示出{{xxx}}的問題 35 v-once:沒有值 36 1.v-once所在節點在初次動態渲染後，就視為靜態內容了（只讀一次n的值） 37 2.以後資料的改變不會硬氣v-once所在結構的更新，可以用於優化效能 38 v-pre：沒有值 39 1.跳過其所在節點的編譯過程(vue不解釋該節點) 40 2.可利用它跳過：沒有使用指令語法、沒有使用差值語法的節點，會加快編譯 41 --> 42 <div id="root" v-cloak> 43 <div>你好，{{name}}</div> 44 <div v-text="name">你好，</div> 45 46 <div v-text="str"></div> <!-- html 標籤不被解析 --> 47 <div v-html="str"></div> <!-- html 標籤會被解析 --> 48 49 <h3 v-once>n的初始值：{{n}}</h3> 50 <h3>當前n的值：{{n}}</h3> 51 <button @click="n++">點我n的值+1</button> 52 53 <h3 v-pre>n的初始值：{{n}} 這裡加了pre屬性後，{{n}}並不會解析</h3> 54 </div> 55 </body> 56 57 <script type="text/javascript" > 58 Vue.config.productionTip = false;// 阻止 vue 在啟動時生成生產提示。 59 60 let vm = new Vue({ 61 el: "#root", 62 data:{ 63 name: 'BaiYeShu', 64 str: '<h3>你好，</h3>', 65 n: 1 66 }, 67 68 }); 69 </script> 70 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Vue 自定義指令</title> 6 <script type="text/javascript" src="../js/vue.js"></script> 7 <script type="text/javascript" src="../js/day.min.js"></script> 8 9 </head> 10 <body> 11 <!-- 12 自定義指令總結： 13 1.定義語法： 14 .區域性指令： 15 new Vue({ 16 directives:{指令名：配置物件} 或者 directives:{指令名：回撥函式} 17 }) 18 .全域性指令： 19 Vue.directive('指令名', 配置物件) 或者 Vue.directive('指令名', 回撥函式) 20 2.配置物件中常用的3個回撥： 21 .bind: 指令與元素成功繫結時呼叫 22 .inserted: 指令所在元素被插入頁面時呼叫 23 .update: 指令所在模板結構被重新解析時呼叫 24 3.備註 25 .指令定義時不加v-，但使用時要加v- 26 .指令名如果是多個單詞，要使用kebab-case命名方式，不要用kebabCase命名 27 28 --> 29 <div id="root" v-cloak> 30 <h2>{{name}}</h2> 31 <h2>當前的n值是：<span v-text="n"></span></h2> 32 <h2>n放大10倍的值是：<span v-big="n"></span></h2> 33 <button @click="n++">點我n+1</button> 34 <br /> 35 <input type="text" v-big-number="n" > 36 </div> 37 </body> 38 39 <script type="text/javascript" > 40 Vue.config.productionTip = false;// 阻止 vue 在啟動時生成生產提示。 41 Vue.directive('big-number',{ // 全域性指令 42 bind(element, binding){ 43 element.value = binding.value; 44 }, 45 inserted(element, binding){ 46 element.setFouse(); 47 }, 48 update(element, binding){ 49 element.value = binding.value; 50 } 51 }) 52 53 let vm = new Vue({ 54 el: "#root", 55 data:{ 56 name: 'BaiYeShu', 57 n: 1 58 }, 59 directives:{ 60 'big'(element, binding){ 61 console.log('big', this); // 這裡directives，所有指令相關的函式，this都是window 62 element.innerText = binding.value * 10; 63 }, 64 // 'big-number':{ // 區域性指令 65 // bind(element, binding){ 66 // element.value = binding.value; 67 // }, 68 // inserted(element, binding){ 69 // element.setFouse(); 70 // }, 71 // update(element, binding){ 72 // element.value = binding.value; 73 // } 74 // } 75 } 76 77 }); 78 </script> 79 </html>