一. 常用指令1
1. Mustache语法(双大括号)
如果我们希望把数据显示到模板（template）中，使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值。并且我们知道，data返回的对象是有添加到Vue的响应式系统中；
当data中的数据发生改变时，对应的内容也会发生更新。当然，Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript的表达式。
<body> <div id="app"></div> <template id="myApp"> <!-- 1.基本用法 --> <div> {{message}} </div> <!-- 2.表达式 --> <div>{{count*12}}</div> <!-- 3.调用函数 --> <div>{{getCount()}}</div> <!-- 4.三元运算符 --> <div>{{isShow?'ypf':'lmr'}}</div> <button @click="toggle">切换</button> </template> <script src="../js/vue3.js"></script> <script> Vue.createApp({ template: '#myApp', data() { return { message: 'Hello Vue3!', count:20, isShow:true } }, methods:{ getCount(){ return this.count*12; }, toggle(){ this.isShow=!this.isShow; } } }).mount('#app'); </script> </body>
2. v-once
用于指定元素或者组件只渲染一次。
当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；
该指令可以用于性能优化；
<body> <div id="app"></div> <template id="myApp"> <!-- 单个元素 --> <span v-once>This will never change: {{msg}}</span> <!-- 有子元素 --> <div v-once> <p>comment</p> <p>{{msg}}</p> </div> </template> <script src="../js/vue3.js" ></script> <script> Vue.createApp({ template: '#myApp', data() { return { msg: 'Hello Vue3!' } } }).mount('#app'); </script> </body>
3. v-text 和 v-html
(1). v-text 用于更新元素的 textContent，等价于 mustache语法。
(2). v-html 用于把html渲染出来。
<body> <div id="app"></div> <template id="myApp"> <!-- 1. v-text用法 --> <div> <span v-text="message"></span> <!-- 等价于 mustache --> <span>{{message}}</span> </div> <!-- 2. v-html用法 --> <div> <p>{{myHtml}}</p> <p v-html="myHtml"></p> </div> </template> <script src="../js/vue3.js" ></script> <script> Vue.createApp({ template: '#myApp', data() { return { message: 'Hello Vue3!', myHtml:'<span style="color:red; background: blue;">ypf</span>' } } }).mount('#app'); </script>
运行效果：
4. v-pre
v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签：跳过不需要编译的节点，加快编译的速度；
<body> <div id="app"></div> <template id="myApp"> <div> {{message}} </div> <div v-pre>{{message}}</div> </template> <script src="../js/vue3.js"></script> <script> Vue.createApp({ template: '#myApp', data() { return { message: 'Hello Vue3!' } } }).mount('#app'); </script> </body>
运行结果：
5. v-cloak
这个指令保持在元素上直到关联组件实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。
<style type="text/css"> [v-cloak]{ display: none; } </style> <body> <div id="app"></div> <template id="myApp"> <div v-cloak> {{msg}} </div> </template> <script src="../js/vue3.js" ></script> <script> Vue.createApp({ template: '#myApp', data() { return { msg: 'Hello Vue3!' } } }).mount('#app'); </script> </body>
二. 常用指令2
1. v-bind
(1). 基本用法
v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值
(2). 动态属性绑定
如果属性名称不是固定的，我们可以使用 :[属性名]=“值” 的格式来定义；
(3). 直接绑定一个对象
将一个对象的所有属性，绑定到元素上的所有属性
<body> <div id="app"></div> <template id="myApp"> <!-- 1.基本用法 --> <div> <img v-bind:src="img1" > <img :src="img1" > <a v-bind:href="url1">百度1</a> <a :href="url1">百度1</a> </div> <!-- 2.动态绑定属性 --> <div :[myname]='url1'>动态绑定属性</div> <!-- 3. 绑定对象 --> <div v-bind='user'>绑定对象1</div> <div :='user'>绑定对象1</div> </template> <script src="../js/vue3.js" ></script> <script> Vue.createApp({ template: '#myApp', data() { return { img1:'../img/01.jpg', url1:'https://www.baidu.com', myname:'ypf', user:{ age:10, name:'lmr', gender:'boy' } } } }).mount('#app'); </script>
结果查看：
(4). 绑定class-对象语法
<style type="text/css"> .myColor { color: red; } .mySize { font-size: 20px; } .myback { background-color: aquamarine; } </style> <body> <div id="app"></div> <template id="myApp"> <!-- 1.普通绑定 --> <div :class="color1">普通绑定</div> <!-- 2. 对象语法 引号可加可不加，是否生效关键看后面是true 还是 false--> <div :class="{myColor:true,mySize:true}">对象语法1</div> <div :class="{'myColor':true,'mySize':true}">对象语法2</div> <div :class="{myColor:isTrue,mySize:isTrue}">对象语法3</div> <div><button @click="toggle">切换</button></div> <!-- 3. 默认class 和 动态class结合 --> <div class="myback" :class="{myColor:isTrue,mySize:isTrue}">对象语法3</div> <!-- 4.对象封装在单个属性中 --> <div :class="myStyle">对象封装在属性中 </div> <!-- 5.对象封装在方法中 或计算属性中 --> <div :class="getStyle()">对象封装在方法中</div> <div :class="myStyle2">对象封装在计算属性中</div> </template> <script src="../js/vue3.js"></script> <script> Vue.createApp({ template: '#myApp', data() { return { color1: 'myColor', isTrue: true, myStyle: { myColor: true, myFont: true } } }, methods: { toggle() { this.isTrue = !this.isTrue; }, getStyle() { return { myColor: true, myFont: true } } }, computed:{ myStyle2(){ return { myColor: true, myFont: true } } } }).mount('#app'); </script> </body>