在之前的文章当中我们已经说到了如何从CDN导入Vue3以及其基本结构，今天，我们来学习Vue3当中的基础指令！希望学完这篇文章能够对大家有所帮助！
如果你还没学，不妨看看：[小白学Vue3]vue3初体验--vue基本结构CDN导入Vue3编程模式 - 掘金 (juejin.cn)
我们接下来的所有操作，都是从CDN中导入Vue3，在html文件中编写vue。
目录
- v-text === 文本插值
- v-html
- v-once
- v-pre
- v-bind
- v-on
接下来，话不多，直接开始!
一、v-text === 文本插值
Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。
html
<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>但是，我们今天主要介绍{{}}方式~
注意一点！ 挖标签只在开标签和闭标签中用，当我们遇到单标签的时候就要使用v-text
在Vue中，我们使用{{}}对html进行插值！
html
<div id="app"></div>
<template id="my-app">
<h1>{{message}} -- {{message}}</h1>
<h2>{{count * 2}}</h2>
<h2>{{message.split(' ').reverse().join('')}}</h2>
<h1>{{getReverse()}}</h1>
<h2>{{emo ? '难过':'开心'}}</h2>
<button @click = 'change'>切换心情</button>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const App = {
template:'#my-app',
data(){
return {
message:'hello 艾伦',
count:100,
emo:false,
}
},
methods:{
getReverse(){
return this.message.split(' ').reverse().join('')
},
change(){
this.emo = !this.emo
}
}
}
Vue.createApp(App).mount('#app')
</script>大家可以看到，我们在template挖的坑位中是可以写很多东西，多个"坑位"也是允许的，
相关的js代码也是可以的，例如：方法的调用，运算，能写js语言,他都会被读成字符串经过vue处理后再装载到页面上！
二、v-html
v-html：允许我们将内容直接作为普通 HTML 插入--Vue 模板语法是不会被解析的。
具体什么意思呢，我们可以这样简单地理解：v-html会将我们输入的数据不经过Vue模板的语法解析，直接装载到页面上，我们来看一个案例：
html
<div id="app"></div>
<template id="tel">
<div>{{htmlcode}}</div>
<div v-html="htmlcode"></div>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
template:'#tel',
data:function(){
return {
htmlcode:'<h2>我是谁?</h2>',
}
}
}).mount('#app')
</script>我们来看看效果：
可以看到，我们直接挖坑的话{{htmlcode}}，vue会将数据源的数据经过处理和渲染放在页面上！也就是说你写的是html代码的话，它不会被识别，而是以字符串的形式放在页面上。
而使用v-html，会将你的数据直接当成普通的html插入到页面当中，这样页面能够将它识别出来！
三、v-once
v-once：这个指令，它只会渲染元素和组件一次，并跳过之后的更新。
也就是说：经过v-once渲染的元素和组件，渲染一次之后就再也不会动它了，哪怕数据源中的数据发生改变，它都不会有任何反应！我们来看看一个案例：
html
//数据源中 count = 100 add方法能够让count数字+1
<div id="app"></div>
<template id="my-app">
<h2>{{count}}</h2>
<h1 v-once>{{count}}</h1>
<button @click = 'add'>+1</button>
</template>在这个案例当中，我们放了两个相同的数字，一个是直接通过{{}}放置，一个是通过v-once放置，我们来看看效果：
可以看到，我们修改count的值，是无法修改v-once修饰的count。
也就是说，当我们在项目开发的过程中，有一些结构是固定了的，我们可以使用v-once，这样我们就不用再每次刷新页面都会大量渲染无关的结构，可以提高效率，节省资源。
四、v-pre
v-pre：跳过该元素及其所有子元素的编译。也就是说，告诉我们的vue这一部分的内容是不需要你去渲染的，直接跳过。
首先，我们先知道vue把你的代码当成字符串读走之后,又把字符串重新生成成html再挂载在页面上,这个过程叫编译，然后挂载在html上进行渲染。
而v-pre则是跳过这一个过程。我们来看看实际案例:
html
<template id="my-app">
<h2 v-pre>{{message}}</h2>
<h2>{{message}}</h2>
</template>看看效果：
可以看到，加了v-pre的标签中{{message}}并没有被vue进行编译和渲染，而是直接当作字符串放在了页面上！这个就是v-pre的功能。
五、v-bind
我们就介绍一下v-bind的两种用法:绑定class和绑定style。
v-bind 可以直接写成 :
html
v-bind:src="imgUrl" == :src="imgUrl"1、v-bind基础用法
html
<template id="my-app">
<img v-bind:src="imgUrl" alt="">
<a v-bind:href="link">百度一下</a><br>
<a :href="link">百度两下</a>
</template>
//msg:'hello',
//imgUrl:'./ai2.png',
//link:'https://www.baidu.com',基础用法，我们可以看到，v-bind用于绑定标签的属性！
v-bind:===:
2、v-bind绑定class
html
<style>
.active{
color: red;
}
</style>
<template id="tel">
<div :class="classname">
我真的红温了
</div>
<div :class={'active':true}>
我红温了
</div>
<div :class={'active':false}>
我没有红
</div>
</template>
//classname:'active',
//fontcolor:'red'
在这里我们看到我们通过v-bind绑定类名，我们可以通过变量名进行绑定！
- 直接使用变量名通过
:class="classname"这种形式绑定 - 同时，我们也可以通过
:class={'active':true}这种形式绑定，这种形式通过true 或者 false来决定这个属性是否出现！ - 我们可以看到
:class={'active':false}中，最终在页面上active这个属性并没有出现。 - 我们也可以
:class={'active':false,classname}这样来设置多个属性名。 - 当然
class = 'classname' :class='classname2'这种情况也是允许的! - 使用一个有返回值的方法这种也是允许的。例如:
:class = getclass() - 也可以使用数组的方式，使用数组的话，变量名就可以不用加引号了(加引号也是允许的)。例如
:class = "['classname1',classname2]" - 我们也可以在数组中这样操作：
:class="[classname1,{classname2:ture}]" - 甚至我们可以在数组中放入三元表达式：
:class="['classname1',istrue?classname2:'']"
3、v-bind绑定style
html
<template id="tel">
<div :style="{color:fontcolor,fontSize:fontsize}">我是文字</div>
</template>
//fontcolor:'red'
//fontsize:'100px'我们在使用v-bind绑定style的时候，通过调用对象来设置行内style（注意!行内style权重更高）
注意注意！！！在vue中，允许font-size === fontSize 允许驼峰
也可以使用数据源中的对象例如：
html
<template id="tel">
<div :style="setStyle">我是文字</div>
</template>
//setStyle:{
//color:'blue',
//fontSize:'100px'
//}
也可以使用数组形式，例如：
html
<template id="tel">
<div :style="[setStyle1,setStyle2]">我是文字1</div>
<div :style="[setStyle1]">我是文字2</div>
</template>
//setStyle1:{
// color:'blue',
// fontSize:'100px'
//},
//setStyle2:{
// fontWeight:'bold'
//}
六、v-on
在之前的案例当中，我们就见到过@click这种类型的事件绑定。
其实v-on===@
v-on就可以简写为@，用于绑定事件！我们再也不用设置一个事件监听来绑定各种事件了！直接一个@就可以解决，我们面临的问题！
vue
<template id="tel">
<div>{{num}}</div>
<button v-on:click="add">+1</button>
<button @click="lower">-1</button>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
template:'#tel',
data(){
return {
num:1
}
},
methods:{
add(){
this.num++
},
lower(){
this.num--
}
}
}).mount('#app')
</script>
可以看到，我们仅仅是通过v-on(@)，就绑定了一个点击事件。其中add是控制数字+1，lower是控制数字-1。
有多个事件的时候，我们可以这样写
@click="handle" @mouseenter="enter"
@="{click:handle, mouseenter:enter}"
当然，如果有参数的话，我们就要这样写了"
@click="handleclick($event,'阿远',20)" 需要使用参数，把方法写成自己调用，事件参数写成 <math xmlns="http://www.w3.org/1998/Math/MathML"> e v e n t ，这样我们的方法中就可以存在一个参数 e ，不写 event，这样我们的方法中就可以存在一个参数e，不写 </math>event，这样我们的方法中就可以存在一个参数e，不写event会导致事件参数e使用不了。这个时候，我们的方法要写成这样：
vue
handleclick(e,name,age){
console.log(e,name,age);
}注意了，这个$event是要加，后面才是传的参数，在方法中，会存在一个事件参数e，自己可以调用。在上述案例中，如果点击按钮的话会在控制台这样输出:
结束啦！
今天的基本指令我们就先学到这里啦！
后续，有关vue3的相关指令，路由，脚手架安装，以及如何开启一个vue3项目，我都会在后续的文章中的持续输出！
大家感兴趣的可以关注我！我还会为大家输出更多有意思的内容！
点个小小的赞鼓励支持一下吧！🌹🌹🌹
个人github:一个修远君的库 (github.com)