| 前言：
Vue官网一共有提供了14个指令，分别如下： v-text
v-html
v-showv-if ☆☆☆v-else ☆☆☆v-else-if ☆☆☆v-for ☆☆☆v-on ☆☆☆v-bind ☆☆☆v-model ☆☆☆v-slot
v-pre
v-cloak
v-once 注意：☆代表重要常用的
一、v-text（v-指令名="变量"，变量需要data提供数值）<p v-text="info"></p><p v-text="'abc' + info"></p><script> new Vue({ el: '#app', data: { info: 'a' } })</script>v-text="info"渲染页面结果为a，因为info是个变量，就直接展示变量所对应的值
v-text="'abc' + info"渲染页面结果为abca，当你想用字符串和变量拼接时，可以在字符串上增加单引号，这样程序就认为你这个是个字符串，字符串+info变量最后的结果就是字符串abca
二、v-html（可以解析html语法）有时候我们的Vue对象中，或者是后台返回给我们一个段原生的html代码，我们需要渲染出来，那么如果直接通过{{}}渲染，会把这个html代码当做字符串。这时候我们就可以通过v-html指令来实现。 示例代码如下： <p v-html="'<b>ok</b>'"></p><p v-text="'<b>ok</b>'"></p> 以上两行代码除了用的vue指令不一样以外，没有任何区别，让我们先展示结果吧 v-html可以解析html的标签，而text传的是字符串，不用管字符串里面具体的内容是什么，统一都直接展示出原来的字符
三、v-once（只渲染元素和组件一次）
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 <input type="text" v-model="msg" v-once> // 只渲染一次<p v-once>{{ msg }}</p>
四、v-cloak（防止页面闪烁）
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
五、v-pre（了解）跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。 <div id="app"> <span v-pre>{{message}}</span></div><script> const app = new Vue({ el: "#app", data: { message: "hello" } })</script>正常来讲我们会通过编译最后在网页上显示hello，但是使用了v-pre指令后，就会跳过编译，直接展示原始的标签内容也就是{{message}}
六、v-bind
6.1 绑定属性如果我们想要在html元素的属性上绑定我们Vue对象中的变量，那么需要通过v-bind来实现。 <div id="app"> <a v-bind:href="baidu" rel="external nofollow" >百度</a> <img :src="imgSrc" alt=""></div><script> const app = new Vue({ el: "#app", data: { message: "hello", baidu: "https://www.baidu.com", imgSrc: "https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif" } })</script>我们只需要在绑定的属性前面添加v-bind:即可，当然我们也可以使用缩写:，直接写冒号即可
6.2 绑定Class绑定Class有2种方式，一种通过数组绑定，一种通过对象绑定 通过对象的方式来实现： <div id="app"> <p v-bind:class="{color:isColor}">你好，世界</p></div><script> const app = new Vue({ el: "#app", data: { isColor: true } })</script><style> .color{ color: blue; }</style>对象的方式即像上面的代码{color:isColor} ，key是color，value是isColor，当value的值为true则渲染，为false则不渲染
通过数组的方式来实现： <div id="app"> <p :class="[classname1, classname2]">{{message}}</p></div><script> const app = new Vue({ el: "#app", data: { message: "hello", classname1: "pcolor", classname2: "fontSize" }, })</script><style> .pcolor{ color: red; } .fontSize{ font-size: 30px; }</style>当class需要绑定2个属性时，可以使用数组的方式
6.3 绑定Style绑定Style也有2种方式，一种通过数组绑定，一种通过对象绑定 通过对象的方式来实现： <div id="app"> <p :style="{fontSize:'100px'}">{{message}}</p></div><script> const app = new Vue({ el: "#app", data: { message: "hello" } })</script>注意：对象绑定的时候只能驼峰命名法fontSize，不能使用font-size否则会报错，100px加单引号就是字符串，不加则是变量，需要在data中添加变量
通过数组的方式来实现： <div id="app"> <p :style="[style1, style2]">{{message}}</p></div><script> const app = new Vue({ el: "#app", data: { message: "hello", style1: {background:'red'}, style2: {fontSize:'30px'}, } })</script>到此这篇关于Vue指令的学习的文章就介绍到这了,更多相关Vue指令内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
vue模板配置与webstorm代码格式规范设置
极速上手 VUE 3 teleport传送门组件及使用语法 |
