Vue指令是以v-前缀的特殊属性，Vue指令的作用是当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM，码笔记分享Vue常用指令大全和自定义指令以及Vue指令的详解：
Vue常用指令
v-text
v-text主要用于更新元素的textContent。如果要更新部分的textContent，需要使用{{ Mustache }}插值。
示例：
|
1 2 3 |
<span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span> |
v-html
更新元素的 innerHTML
注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
示例：
|
1 |
<div v-html="html"></div> |
v-pre
v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
示例：
|
1 2 3 4 |
<div id="app"> <span v-pre>{{message}}</span> //这条语句不进行编译 <span>{{message}}</span> </div> |
最终仅显示第二个span的内容
v-if
条件渲染，v-if根据表达式的值的真假条件，销毁或重建元素
示例：
|
1 |
<a v-if="ok">yes</a> |
如果属性值ok为true，则显示。否则，不会渲染这个元素。
v-else
v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
示例：
|
1 2 |
<a v-if="ok">yes</a> <a v-else>No</a> |
v-else-if
v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。
示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div v-if="type==='A'"> A </div> <div v-if="type==='B'"> B </div> <div v-if="type==='C'"> C </div> <div v-else> Not A,B,C </div> |
v-show
v-show：根据表达式之真假值，切换元素的 display CSS 属性
v-show和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。
示例：
|
1 |
<h1 v-show="ok">hello world</h1> |
注意：
v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好
示例
v-cloak
v-cloak指令保持在元素上直到关联实例结束编译。和 CSS 规则如[v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
|
1 2 3 |
[v-cloak] { display: none; } |
|
1 2 3 |
<div v-cloak> {{ message }} </div> |
不会显示，直到编译结束。
v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
示例：
|
1 |
<span v-once>This will never change: {{msg}}</span> |
v-bind
v-bind缩写为：“:”用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> <!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 绑定一个有属性的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通过 prop 修饰符绑定 DOM 属性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 绑定。“prop”必须在 my-component 中声明。--> <my-component :prop="someThing"></my-component> <!-- 通过 $props 将父组件的 props 一起传给子组件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg> |
v-for
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：
|
1 2 3 |
<div v-for="item in items"> {{ item.text }} </div> |
另外也可以为数组索引指定别名 (或者用于对象的键)：
|
1 2 3 |
<div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, key, index) in object"></div> |
v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：
|
1 2 3 |
<div v-for="item in items" :key="item.id"> {{ item.text }} </div> |
v-model
在表单元素上创建双向数据绑定，v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。
示例：
|
1 2 |
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> |
v-on
v-on主要用来监听dom事件，以便执行一些代码块。
示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为，没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符，键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符，键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="doThis"></button> <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button> |
2023腾讯云服务器超便宜，这个价格太可以了，抓紧上车！
- 2核2G3M服务器30元/3个月：点此直达
- 2核2G3M服务器95元一年：点此直达
- 2核2G4M服务器112元/1年：点此直达
- 2核2G4M服务器396元/1年：点此直达
- 2核4G5M服务器168元/3年：点此直达
- 2核4G5M服务器628元/3年：点此直达
- 4核8G12M服务器446元/1年 518元15个月：点此直达
- 8核16G18M服务器1668元/15个月
- 16核32G28M服务器3468元/15个月
注意：以上特价轻量服务器限制条件为“产品首单特惠”，如果你的腾讯云账号已经是老用户，建议重新注册一个腾讯云账号，如果你是新用户符合条件，那么无脑入，这个CPU内存带宽配置，价格确实便宜，值得买！
2023云服务器降价了！阿里云VS腾讯云
阿里云：2023阿里云服务器价格便宜到家了（值得买）
腾讯云：2023腾讯云2核4G服务器8M带宽70元一年（多配置可选）
华为云：2023华为云优惠活动云服务器60元一年起（查看更多配置报价）
1 条评论