指令是一种在模板中带有v-前缀的特殊属性，通过指令可以定义页面结构。Vue中指令可以分为6类，分别是内容渲染指令、属性绑定指令、事件绑定指令、双向数据绑定指令、条件渲染指令、列表渲染指令。
一、内容渲染指令
想将<script>标签中定义的数据渲染到页面上可以使用内容渲染指令或Mustache语法外。
内容渲染指令用于渲染DOM元素的内容。例如：v-html和v-text。
1.v-html
在使用Vue进行内容渲染时，v-html用于渲染DOM元素的HTML内容，如果内容中包含HTML标签并希望被浏览器解析，可以使用v-html。
语法格式：
<标签名 v-html="数据名"></标签名>
例：1.创建src/components/VHtml.vue文件
<template>
<div v-html="message"></div>
</template>
<script setup>const message = '<strong>每天都开心！</strong>'</script>
2.v-text
v-text用于渲染DOM元素的文本内容，如果文本内容包含HTML标签，浏览器不会对其解析。
语法格式：
<标签名 v-text="数据名"></标签名>
例：2.创建src/components/VText.vue文件
<template>
<div v-text="message"></div>
</template>
<script setup>const message = '<span>每天都开心！</span>'</script>
二、 属性绑定指令
1.v-bind
在Vue开发中为了控制属性的值，需要绑定DOM元素属性，可以用v-bind来实现。
语法格式：
<标签名 v-bind:属性名="数据名"></标签名>
“ v-bind:”后的“属性名”，该属性名的值与数据名进行绑定，数据名需要在<script>标签中定义，当改变数据名的值时，属性值会自动更新，而当属性值改变时，数据名的值不会同步发生改变。
“v-bind:属性名”可以简写为“属性名”。
例：v-bind还支持将属性与字符串拼接表达式绑定。
<div :id="'list'+index"></div>例：3.创建src/components/VBind.vue文件
<template>
<p><input type="text" v-bind:placeholder="username"></p>
<p><input type="password" v-bind:placeholder="password"></p>
</template>
<script setup>
const username= '请输入用户名！'
const password= '请输入密码！'
</script>
三、事件绑定指令
1.v-on
在Vue开发中，有时需要需要给DOM元素绑定事件，从而利用事件实现交互效果，可以用事件绑定属性v-on来实现。
语法格式：
<标签名 v-on:事件名="事件处理器"></标签名>
事件名——DOM中的事件名，例如click、input、keyup等；
事件处理器——可以是方法名或内联JavaScript语句。如果逻辑复杂，事件处理器建议使用方法名，方法需要在Script标签中定义，如果逻辑简单，只有一行代码，可以使用内联JavaScript语句。
“v-on:事件名”简写形式——“@事件名”
例：4.创建src/components/VOn.vue文件
<template>
<button @click="showInfo">输出信息</button>
</template>
<script setup>
const showInfo = () => {
console.log('欢迎来到Vue.js世界！')
}
</script>
四、双向数据绑定指令
在处理表单信息时，经常需要将输出框的值于变量保持同步。可以通过绑定value属性和input事件来实现，示例如下：
<input :value="info" @input="event => info =event.target.value">1.v-model
在Vue开发中，可以用v-model来实现数据双向绑定，使用它可以在input、textarea和select元素上创建双向数据绑定，它会根据使用的元素自动选取对应的属性和事件组合，负责监听用户的输入事件并更新数据。
语法格式：
<标签名 v-model="数据名"></标签名>
v-model内部会为不同的元素绑定不同的属性和事件，具体如下：
textarea元素和text元素——input元素会绑定value属性和input事件。
checkbox类型和redio类型——input元素会绑定checked属性和change事件。
select元素——会绑定value属性和change事件。
例：4.使用v-model实现输入款的值与变量保持同步，示例代码如下：
<input v-model ="info">当info的值发生变化时，输入框的值会发生改变；当输入框的值发生 改变时，info的值也会发生改变。v-model会忽略所有表单元素的value、checked、selected属性的初始值，而将v-model的数据作为数据来源。
2.v-model提供的三个修饰符
为了方便对用户输入的内容进行处理，v-model提供的三个修饰符。
| 修饰符 | 作用 |
| .number | 自动将用户输入的值转换为数字类型 |
| .trim | 自动过滤用户输入的首尾空白字符串 |
| .lazy | 在change事件而非input事件触发时更新数据 |
例：5.使用v-model实现输入款的值与变量保持同步，示例代码如下：
<template>
请输入姓名：<input type="text" v-model="username">
<div>姓名是：{{ username }}</div>
</template>
<script setup>
import { ref } from 'vue'
const username= ref ('请输入用户名！')
</script>
五、条件渲染指令
在Vue中，当需要根据不同的判断结果显示不同的DOM元素时，可以通过条件渲染指令来实现。条件渲染指定可以辅助开发者按需控制DOM元素的显示与隐藏。条件渲染指令有v-if和v-show两种，v-if和v-show都用来决定某一个元素是否在页面上显示。
1.v-if
v-if是根据布尔值切换元素的显示或隐藏状态，本质是通过操作DOM元素来切换显示状态。当给定的值为true时，元素存在于DOM树中；当给定的值为false时，元素从DOM树中移除。
v-if有两种使用方式，具体如下。
（1）直接给定一个条件，控制单个元素的显示或隐藏，语法如下。
<标签名 v-if="条件"></标签名>
（2）通过v-if结合v-else-if、v-else来控制不同元素的显示或隐藏，语法格式如下。
<标签名 v-if="条件A">展示A</标签名>
<标签名 v-else-if="条件B">展示B</标签名>
<标签名 v-else>展示C</标签名>
2.v-show
v-if是通过为元素添加或者移除dispaly:none样式来实现元素的显示或隐藏状态。当需要频繁切换某个元素的显示或隐藏状态时，使用v-show会更加合适。当只要切换一次来显示或隐藏状态时，使用v-if会更加合适。
语法如下。
<标签名 v-show="条件"></标签名>
例：6.使用v-if和v-show实现元素的显示或隐藏状态，示例代码如下：
<template>
<p v-if="flag">通过v-if控制元素</p>
<p v-show="flag">通过v-show控制元素</p>
<button @click="flag = !flag">显示/隐藏</buton>
</template>
<script setup>
import { ref } from 'vue'
const flag= ref (true)
</script>当flag为true时，通过v-if、v-show控制的p元素全部显示。点击按钮（显示/隐藏）后p元素均不显示，且通过v-if控制的p元素已经移除，v-show隐藏的p元素被设置了dispaly:none的样式。
六、列表渲染指令
在购物应用开发中，为了方便用户查找商品信息，通常会以商品列表的形式展示商品信息。在商品信息列表中，每件商品的结构都是相同的，如果每件商品的结构都要手动定义，会很繁琐。Vue中列表渲染指令v-for。开发者只需要在模板中定义一件商品的结构，v-for便会根据开发者基于一个数组、对象、数字或字符串来循环渲染一个列表。
（1）使用v-for根据数组渲染列表，语法如下：
<标签名 v-for="(item,index) in arr"></标签名>
arr——给定的数组
item——v-for会根据给定的数组的个数来决定循环次数，循环开始时会依次取出数组中的元素，保存为item。
index——index的值为0开始自增的数字。
（2）使用v-for根据对象渲染列表，语法如下：
<标签名 v-for="(item,name,index) in obj"></标签名>
obj——为给定的对象
item——v-for会根据给定的数组的个数来决定循环次数，循环开始时会依次取出数组中的元素，保存为item。
name——name的值为item在对象中的属性名。
index——index的值为0开始自增的数字。
（3）使用v-for根据数字渲染列表，语法如下：
<标签名 v-for="(item,index) in num"></标签名>
num——为给定的数字。
v-for——会把数字当成循环次数。
item——item的值为循环中的每个数字，初始值为1，每次循环后，item的值会自增1。
index——index的值为0开始自增的数字。
（4）使用v-for根据字符串渲染列表，语法如下：
<标签名 v-for="(item,index) in str"></标签名>
str——为给定的字符串。
v-for——会把根据字符串中字符的个数来决定循环次数。
item——循环时会依次取出字符串中的每个字符，保存为item。
index——index的值为0开始自增的数字。
（name和index的值，可以省略，如果只需要item，则小括号也可以省略，index和item名称也是不固定的）
1.根据一堆数组渲染列表
例：
<template>
<div v-for="(item,index) in list" :key="index">
索引是：{{ index }}——元素的内容是：{{ item }}
</div>
</template>
<script setup>
import { reactive } from 'vue'
const list = reactive (['HTML','CSS','JavaScript'])
</script>
2.根据对象数据渲染列表
例：
<template>
<div v-for="item in list" :key="item.id">
id是：{{ item.id }}——元素的内容是：{{ item.message }}
</div>
</template>
<script setup>
import { reactive } from 'vue'
const list = reactive ([
{id:1,message:'梅',},
{id:2,message:'兰',},
{id:3,message:'竹',},
{id:4,message:'菊',}
])
</script>
3.根据对象渲染列表
例：
<template>
<div v-for="(value,name) in user" :key="name">
属性名是：{{ name }}——元素的内容是：{{ value }}
</div>
</template>
<script setup>
import { reactive } from 'vue'
const user= reactive ({id:11,name :'小明',gender：'男'})
</script>
