vue：指令（插值操作、指令（v-once、v-html、v-text、v-pre、v-cloak））
阿新 • • 發佈：2020-08-13
1、插值操作（顯示data中的資料）
（1）Mustache
Mustache也就是雙大括號
（2）Mustache的基本使用
<body> <div id="app"> <h2>{{message}}</h2> <h2>{{message+' '+name}}</h2> <h2>{{num*2}}</h2> </div> <script src="../js/vue.js"></script> <script> const app=newVue({ el:document.querySelector("#app"), data:{ message:'你好', name:'zhai', num:23, } }) </script> </body>
不僅可以取出資料，還可以對取出的資料進行一些簡單的計算。
2、基礎指令
（1）v-once指令
<body> <div id="app"> <h2>{{message}}</h2> <h2 v-once>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:document.querySelector("#app"), data:{ message:'你好', } }) </script> </body>
將響應式變成了非響應式，只會在第一次展示資料，不會隨著資料的改變而改變
（2）v-html
<body> <div id="app"> <h2>{{url}}</h2> </div> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:document.querySelector("#app"), data:{ url:'<a href="https://www.cnblogs.com/zhai1997/"></a>' } }) </script> </body>
不新增標籤的時候被解析為文字
<body> <div id="app"> <h2>{{url}}</h2> <h2 v-html="url"></h2> </div> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:document.querySelector("#app"), data:{ url:'<a href="https://www.cnblogs.com/zhai1997/">部落格園</a>' } }) </script> </body>
新增v-html後url可以被解析為地址
（3）v-text
<body> <div id="app"> <h2>{{message}}</h2> <h2 v-text="message"></h2> </div> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:document.querySelector("#app"), data:{ message:"你好", } }) </script> </body>
能夠顯示資料，但是與Mustache相比，v-text不夠靈活
（4）v-pre
<body> <div id="app"> <h2>{{message}}</h2> <h2 v-pre>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:document.querySelector("#app"), data:{ message:"你好", } }) </script> </body>
用於跳過這個元素和它的子元素的編譯過程，用於顯示原本的Mustache語法
（5）v-cloak
在vue解析之前，div中有一個屬性v-cloak，當vue解析之後該屬性就消失了