Vue 3 入门篇的上一章我们学会了创建vue3项目，这一张我们来学习vue3中的内置指令。
Vue 3 提供了一系列内置指令，这些指令是带有 v- 前缀的特殊属性。以下是 Vue 3 的主要内置指令：
官方教程
https://cn.vuejs.org/api/built-in-directives
目录
v-text
响应式地插入数据
<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>import {ref} from 'vue'
const msg = ref('我是逻辑非')如果我们修改 msg 中的数据页面中显示的内容也会改变
v-html
v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。
在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致XSS攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值
具体的XSS攻击示例，我们会在之后的文章演示
<div v-html="msg"></div>const msg = ref('<h1>内容</h1>')v-show
基于表达式值的真假性，来改变元素的可见性。
<div v-show="flag"></div>v-if / v-else-if / v-else
基于表达式值的真假性，来条件性地渲染元素或者模板片段。
<div v-if="flag1"></div>
<div v-else-if="flag2"></div>
<div v-else></div>v-for
基于原始数据多次渲染元素或模板块。
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>import { ref } from 'vue'
const msg=ref([{
id:1,text:'a',
id:2,text:'b',
id:3,text:'c',
id:3,text:'d'
}])等价于：
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>v-on
给元素绑定事件监听器。
缩写：@
<button v-on:click="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>v-bind
动态的绑定一个或多个属性
缩写: ：
<img v-bind:src="imageSrc" />
<!-- 缩写 -->
<img :src="imageSrc" />v-model
在表单输入元素或组件上创建双向绑定。
<input v-model="msg" type="text" />import {ref} from 'vue'
const msg = ref('')
console.log(msg.value)当然还有其他的内置指令，比如v-slot,v-pre等，这里不多介绍