共计 2211 个字符，预计需要花费 6 分钟才能阅读完成。
Vue 中的指令按照不同的用途可分为 6 大类：
- 内容渲染指令
- 属性绑定指令
- 事件绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
内容渲染
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常见的内容渲染指令有 3 个：v-text、{{}}、v-html。
v-text
会覆盖掉元素里面的内容。
{{}}
专业名称是插值表达式（Mustache），专门用来解决 v-text 会覆盖默认文本内容的问题。
插值表达式可以使用过滤器：
<div id="app">
<p>{{message | capitalize}}</p>
</div>
<script>
const app = new Vue({
el: "#app",
data: {message: "i love vue！",},
filters: {capitalize(str) {return str.charAt(0).toUpperCase() + str.slice(1);
},
},
});
</script>过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。
3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能。
v-html
用来输出 html 元素内容，会覆盖掉元素里面的内容。
属性绑定指令
v-bind
给元素属性动态绑定属性值，可简写为 :。
<img v-bind:src="imageUrl">
<img :src="imageUrl">v-bind 属于单向绑定，即 JS 修改 ->HTML 修改。
v-bind 动态绑定多个值：
<template>
<div v-bind="obj"> 测试一下 </div>
</template>
<script>
export default {data() {
return {
obj: {
id: 'id',
class: 'class',
},
}
},
}
</script>v-bind 操作 class：
- :class=”{类名 1: 布尔值, 类名 2: 布尔值}”
- :class=”[类名 1, 类名 2, 类名 3]”
事件绑定指令
v-on
事件相关的指令，如：
- v-on:click
- v-on:dblclick
- v-on:mouseover
- v-on::mouseout
- v-on:change
- v-on:focus
- v-on:input
- v-on:keyup
v-on: 可简写为 @。Vue 中的 Event 对象，就是原生 JS 的 Event 对象。
双向绑定指令
v-model
可以在表单 input、textarea 以及 select 元素上创建双向数据绑定。
<body>
<div id="app">
<div>
用户名：<input type="text" v-model="user">
</div>
<div>
密码：<input type="password" v-model="pwd">
</div>
<input type="button" value=" 登录 " v-on:click="clickMe">
<input type="button" value=" 重置 " v-on:click="resetForm">
</div>
<script>
const app = new Vue({
el: '#app',
data: {
user: "",
pwd: ""
},
methods: {clickMe: function () {console.log(this.user, this.pwd)
},
resetForm: function () {
this.user = '';
this.pwd = '';
}
}
});
</script>
</body>为了方便对用户输入的内容进行处理，Vue 为 v-model 指令提供了 3 个修饰符，分别是：
- .number，自动将用户的输入值转为数值类型
- .trim，自动过滤用户输入的首尾空白字符
- .lazy，在“change”时而非“input”时更新
用法如下：
<input type="text" v-model.number="n1" /> +
<input type="text" v-model.number="n2" /> =
<span>{{n1 + n2}}</span>条件渲染指令
v-if
动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏。
v-if 可以单独使用，或配合 v-else（v-else-if）指令一起使用。
v-show
动态为元素添加或移除 style=”display: none;” 样式，从而控制元素的显示与隐藏。
区别
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：
- 如果需要非常频繁地切换，则使用 v-show 较好
- 如果在运行时条件很少改变，则使用 v-if 较好
列表渲染指令
v-for
<div id="app">
<ul>
<li v-for="(p,index) in persons" :key="p.id">
{{index}}: {{p.name}} - {{p.age}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
persons: [{ id: "001", name: " 张三 ", age: 18},
{id: "002", name: " 李四 ", age: 19},
{id: "003", name: " 王五 ", age: 20},
],
},
});
</script> 也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：v-for="item of items"。
循环尽量不要和 v -if 同时使用，因为 v -if 的优先级更高。
