指令的概念
指令是vue开发中最基础，最常用，最简单的知识点。指令是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
指令的分类
vue中的指令根据不同的用途分为了如下六大类：
- 内容渲染指令
- 属性绑定指令
- 事件绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
1.内容渲染指令
内容渲染指令用来辅助开发者渲染DOM元素的文本内容。
常见内容渲染指令如下三个：
- v-text
- {{ }}
- v-html
v-text
v-text是常见内容渲染指令之一，但我们不常用它，因为它会将内部元素原有的内容全部覆盖掉。 如下代码便是v-text的使用方法，因为v-text会覆盖掉内部元素原有内容，所以最终页面显示的是‘zs’，‘女’，不是‘zs’，‘性别：女’。‘性别：’被覆盖掉了。
代码如下：
<p v-text="username"></p>
<p v-text="gender">性别：</p>
创建vue这个实例对象
<script>
// 创建vue的实例对象
const vm=new Vue({
// el属性是固定的写法，表示vm实例当前要控制页面上的那个写法
el:'#app',
// data对象是要渲染到页面上的数据
data:{
username:'zs',
gender:'女',
}
})
</script>
{{ }}
{{ }}是我们实际开发最常用的指令，vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式。
如下代码，利用插值表达式渲染的文本内容便不会将内部元素原有的内容覆盖，显示的是‘姓名：zs’，‘性别：女’。
代码如下：
<p>姓名：{{username}}</p>
<p>性别：{{gender}}</p>
创建vue这个实例对象
<script>
// 创建vue的实例对象
const vm=new Vue({
// el属性是固定的写法，表示vm实例当前要控制页面上的那个写法
el:'#app',
// data对象是要渲染到页面上的数据
data:{
username:'zs',
gender:'女',
}
})
</script>
v-html
v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要用到 v-html 这个指令。可以把带有标签的字符串，渲染成真正的 HTML 内容！
如下代码可显示出指定样式的内容，字体为粉色，大小为四号标题的hihi。
代码如下：
<div v-html="info"></div>
<script>
// 创建vue的实例对象
const vm=new Vue({
// el属性是固定的写法，表示vm实例当前要控制页面上的那个写法
el:'#app',
// data对象是要渲染到页面上的数据
data:{
info:'<h4 style="color: pink;">hihi</h4>'
}
})
2.属性绑定指令
如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。v-bind是属性绑定最常用的指令，可能有人会有疑惑为什么不使用插值表达式呢？
注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！
v-bind用法
<input type="text" v-bind:placeholder="tips">
由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）
代码如下：
<input type="text" :placeholder="tips">
在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 Javascript 表达式的运算，例如：
{{ number+1 }}
{{ OK?'yes':'no' }}
{{ tips.split('').reverse().join('') }}
{{ <div :title="'box'+index">这是一个div</div> }}
注意：在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号。
{{ <div :title="'box'+index">这是一个div</div> }}
3.事件绑定指令
vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。
v-on用法
语法格式为v-on：事件名称="事件处理函数的名称"
<button v-on：click="add"></button>
注意：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup。
通过 v-on 绑定的事件处理函数，需要在methods节点中进行声明。
代码如下：
// methods的作用，就是定义事件的处理函数
methods:{
add(n){
console.log(vm);
// console.log(vm===this)
// vm.count+=1
this.count+=n
},
sub(){
console.log('触发了sub这个处理函数');
}
}
由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）。
<button @click="add"></button>
绑定事件并传参
在使用 v-on 指令绑定事件时，可以使用 ( ) 进行传参，示例代码如下：
<p>count的值是{{count}}</p>
<button @click="add(1)">+1</button>
----------------------------------------------------------------------------------------
methods：{
//在形参处用n接受传递过来的参数
add(n){
this.count+=n
}
事件参数对象：在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event。同理，在 v-on 指令（简写为 @ ）所绑定的事件处理函数中，同样可以接收到事件参数对象 event。
$event
$event是vue提供的特殊变量，用来表示原生的事件参数对象 event。
$event 可以解决事件参数对象 event被覆盖的问题。
如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。
代码如下：
<p>count的值是{{count}}</p>
//设置两个参数，是e与传递过来的形参n不产生冲突
<button @click="add($event,1)">+N</button>
-------------------------------------------------------------------------
methods:{
add(e,n){
this.count+=n
console.log(e)
// 判断this是否为偶数
if(this.count%2===0){
e.target.style.backgroundColor='red'
} else {
e.target.style.backgroundColor=''
}
}
}
事件修饰符
在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。
- .prevent 阻止默认行为（例如：阻止 a 链接的跳转、阻止表单的提交等）
<a @click.prevent="xxx">链接</a>
- .stop 阻止事件冒泡
<button @click.stop="xxx">按钮</button>
-
.capture 以捕获模式触发当前的事件处理函数
-
.once 绑定的事件只触发1次
-
.self 只有在 event.target 是当前元素自身时触发事件处理函数
按键修饰符
在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符。
代码如下：
当按下Esc键时，便调用clearInput函数，当按下enter键时，便调用commitAjax函数。
<input type="text"@keyup.esc="clearInput"@keyup.enter="commitAjax">
4.双向绑定指令
vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。
<p>用户姓名：{{username}}</p>
<input type="text" v-model="username">
<hr>
<input type="text" :value="username">
<hr>
<select v-model="city">
<option value="">请选择城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
v-model指令的修饰符
为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符
- .number可以自动将用户输入的值转为数值类型
<input type="text" v-model.number="age"/>
- .trim 可以自动过滤用户首尾输入的空白字符
<input type="text" v-model.trim="msg"/>
- .lazy 在“change”而非“input时更新”
<input type="text" v-model.lazy="msg"/>
5.条件渲染指令
v-if和v-show
条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：
- v-if
- v-show
v-if原理：每次动态创建或移除元素，实现元素的显示和隐藏
v-show 的原理：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏
在使用中，如果要频繁的切换元素的显示状态，用 v-show 性能会更好，如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好。
在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！
v-else和v-else-if
v-if 可以单独使用，或配合 v-else 指令一起使用，v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别！
<div v-if="scroll>=60">及格</div>
<div v-else>不及格</div>
v-else-if 指令，顾名思义，充当 v-if 的“else-if 块”，可以连续使用，注意：v-else-if 指令必须配合 v-if 指令一起使用，否则它将不会被识别！
<div v-if="type==='A'">优秀</div>
<div v-else-if="type==='B'">良好</div>
<div v-else-if="type===C">一般</div>
<div v-else>差</div>
6.列表渲染指令
vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 item in items 形式的特殊语法。
-
item=>被循环的每一项
-
items=>待循环的数组
<ul>
<li v-for="item in list">姓名是{{ item.name }}</li>
</ul>
---------------------------------------------------------------------
data:{
list:[
{id:1,name:'张三'},
{id:2,name:'李四'},
{id:3,name:'王五'}
]
}
v-for 中的索引
v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items。 v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。
代码如下：
<ul>
<li v-for="(item,index) in list">索引是：{{ item.index }}姓名是{{ item.name }}</li>
</ul>
---------------------------------------------------------------------
data:{
list:[
{id:1,name:'张三'},
{id:2,name:'李四'},
{id:3,name:'王五'}
]
}
使用 key 维护列表的状态
当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。
为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性。
代码如下：
<ul>
<li v-for="(user, index) in userlist" :key="user.id">
<input type="checkbox" />
姓名：{{user.name}}
</li>
</ul>
key的注意事项：
-
key 的值只能是字符串或数字类型
-
key 的值必须具有唯一性（即：key 的值不能重复）
-
建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
-
使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
-
建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）
