（在讲指令之前，可以先了解插值表达式，如果已经知道，当我没说）
一.插值表达式
1.数据绑定最常见的形式就是双大括号的文本插值，Mustache上属性的值替代。只要绑定的数据对象上属性发生了改变，插值处的内容都会更新。，message 是将数据解析成纯文本的，也就是说，就算中含有了 html，message签，它也是只看做纯文本的，不能输出真正的 html。
完整代码例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>豪哥用例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app"><p>{{ message }}</p>
</div><script>
new Vue({el: '#app',data: {message: 'Hello 503'}
})
</script>
</body>
</html> 运行结果：
二.基础（内置）指令
1.Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
说简单点：
v-text 指令:
在与插值表达式的比较中：
它与花括号的区别是：使用 v-text 在页面加载时不会显示'message'，解决了插值表达式闪烁问题，因为它是属性而不是插值表达式。
应用例子：
<div id="app"><p v-text="message"></p>
</div>var app = new Vue({el: '#app',data: {message: 'Hello, Vue.js!'}
});v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分，应该使用 mustache interpolations 代替。
v-html指令
v-htm1 指令用于将 HTML 标签和文本插入到元素中。
如果您尝试使用文本插值(使用大括号{{ }})输出 HTML 标签，结果将只是一个文本字符串。
使用<style scoped>在单文件组件(SFC)中定义的范围样式不会影响 v-htm1 指令中的 HTML。
为了实现 SFC 中 v-htm1 包含的 HTML 的范围样式，我们可以将 CSS 模块与<style module〉结合使用。 v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。
典例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><div v-html="message"></div>
</div><script>
new Vue({el: '#app',data: {message: '<h1>503秘密基地</h1>'}
})
</script>
</body>
</html>运行结果 ：
在HTML模板中，使用v-html指令将"message"属性的值渲染到页面中。v-html指令会将属性值作为HTML解析并插入到指令所在的元素中。
最终的结果是页面中显示了一个h1标题，内容为"503秘密基地"。
注意：无论是v-html还是v-text，如果绑定了data中属性之后，会覆盖掉原本标签上的内容。
v-show指令
官方解释：v-show
基于表达式值的真假性，来改变元素的可见性。我的说法差不多（根据表达式的值来控制元素的显示与隐藏。）
期望的绑定值类型:any
通过设置内联样式的CSS 属性来工作，当元素可见时将使用初始displayv-show值。当条件改变时，也会触发过渡效果。
例如1：
<div v-show="isVisible">This is a visible element</div>在上面的代码中，v-show指令被绑定在一个<div>元素上，它的值为isVisible，表示这个元素的显示与隐藏将根据isVisible的值来决定。
- 如果
isVisible的值为true，那么该<div>元素将会显示在页面上。 - 如果
isVisible的值为false，那么该<div>元素将会被隐藏，其占用的空间也会被隐藏。
v-show的特点是在元素的style属性上使用了display属性来控制元素的显示与隐藏，不会从DOM中移除元素，因此会占用页面的空间。
v-show的表达式可以是任何返回布尔值的表达式。可以是一个data中定义的属性，也可以是一个计算属性或者一个方法的返回值。
例如2，在Vue实例中定义了一个名为isVisible的属性：
new Vue({el: '#app',data: {isVisible: true}
})那么该元素的显示与隐藏将根据isVisible属性的值来决定。
注意：v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。
v-if指令
解释：v-if是Vue.js中的一个条件渲染指令，用于根据表达式的真假来判断是否渲染元素。
特点：
<div v-if="isVisible">This is a visible element</div>在上面的代码中，v-if指令被绑定在一个<div>元素上，它的值为isVisible，表示这个元素是否渲染将根据isVisible的值来决定。
- 如果
isVisible的值为true，那么该<div>元素将会被渲染并显示在页面上。 - 如果
isVisible的值为false，那么该<div>元素将不会被渲染，并且在DOM中不存在。
v-if的特点是根据条件动态地将元素渲染到DOM中或从DOM中移除，从而实现元素的显示与隐藏。
v-if的表达式可以是任何返回布尔值的表达式。可以是一个data中定义的属性，也可以是一个计算属性或者一个方法的返回值。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>火影DD</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><p v-if="seen">林，苏，周，罗，邱，李</p><template v-if="ok"><h1>九江职业技术学院503秘密基地</h1><p>学的不仅是技术，更是梦想！</p></template>
</div><script>
new Vue({el: '#app',data: {seen: true,ok: true}
})
</script>
</body>
</html>运行结果：
v-show与v-if的不同
v-show 和 v-if 之间的区别在于 v-if 根据条件创建（渲染）元素，但 v-show 元素已经创建，仅 v-show 改变其可见性(display)。
因此，切换对象的可见性时最好使用 v-show，因为浏览器更容易做到，并且可以带来更快的响应和更好的用户体验。
使用 v-if 而不是 v-show 的原因是 v-if 可以与 v-else-if 和 v-else 一起使用。
官方解释：
都讲到v-if,那就将v-else也说了去，if，else,对于学习语言的是多么的熟悉，到哪都密不可分
语法上也都相差不大。
v-else
基本解释：v-else指令是Vue.js模板语法中的一种指令，用于在条件渲染中定义一个“否则”分支。
使用v-if指令时，可以通过v-else指令来定义一个“否则”分支，该分支会在v-if条件为假时被渲染。v-else指令必须紧跟在v-if或v-else-if指令之后，并且不能单独使用。
典例1：
<div v-if="condition">
条件为真时渲染的内容
</div>
<div v-else>
条件为假时渲染的内容
</div>
解释：
如果condition为真，则第一个div会被渲染；如果condition为假，则第二个div会被渲染。
v-else指令的存在可以简化条件渲染的逻辑，使代码更加清晰易读。
注意：一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被v-
v-else-if
v-on指令
含义：
v-on指令用于绑定DOM事件到Vue实例的方法上。它可以在模板中监听DOM事件，并执行指定的方法。
使用v-on指令的一般语法是将事件名称作为指令参数，方法名作为指令的值。例如，可以通过v-on:click来监听元素的点击事件，然后在Vue实例中定义一个名为clickHandler的方法来处理点击事件。
v-on指令还可以使用简化语法，将@符号作为指令的前缀。例如，@click相当于v-on:click。
关于调用传参，诸位道友可看：
- 传递参数给Vue方法：可以在v-on指令中使用方法参数来获取事件对象或其他自定义参数，并将其传递给Vue方法。例如，可以通过@click指令的参数来传递事件对象。
<button v-on:click="doSomething($event)">Click me</button>methods: {doSomething(event) {// 使用event获取事件对象}
}
2.使用修饰符：v-on指令可以使用修饰符来改变事件监听的行为。例如，使用.stop修饰符可以阻止事件冒泡。
<button v-on:click.stop="doSomething">Click me</button>methods: {doSomething() {// 执行某些操作}
}典例1：
<!DOCTYPE html>
<html>
<head><title>电灯开关</title><style>#app {border: dashed black 1px;display: inline-block;padding-bottom: 10px;}#app > button {display: block;margin: auto;}#lightDiv {position: relative;width: 150px;height: 150px;}#lightDiv > img {position: relative;width: 100%;height: 100%;}#lightDiv > div {position: absolute;top: 10%;left: 10%;width: 80%;height: 80%;border-radius: 50%;background-color: yellow;}</style>
</head>
<body><h1>503电灯开关</h1>
<p>v-on 指令用在按钮标签上来监听“click”事件。 当“click”事件发生时，“lightOn”数据属性在“true”和“false”之间切换，使灯泡后面的黄色 div 可见/隐藏。</p>
<div id="app"><div id="lightDiv"><div v-show="lightOn"></div><img src="img_lightBulb.svg"></div><button v-on:click=" lightOn =! lightOn ">开关灯</button>
</div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>const app = Vue.createApp({data() {return {lightOn: false}}})app.mount('#app')
</script></body>
</html>
运行结果：
解释：这是一个电灯开关的页面。页面中有一个电灯图像，当点击"开关灯"按钮时，图像后方的黄色div会显示/隐藏，表示电灯是否亮着。页面使用Vue.js框架实现了点击按钮时切换灯泡状态的功能。
在HTML部分，通过v-show指令来控制灯泡后面的黄色div的显示与隐藏，当lightOn为true时，div显示，当lightOn为false时，div隐藏。
在按钮部分，使用v-on指令监听按钮的click事件，当按钮被点击时，通过表达式“lightOn =! lightOn”来切换lightOn的值，实现灯的开关效果。
v-bind命令
解释：
v-bind指令是Vue.js中用于动态绑定HTML特性的指令，它的主要作用是将Vue实例中的数据绑定到HTML元素的特性上。(Vue 的内联样式是通过使用 v-bind 将样式属性绑定到 Vue 来完成的.)
在Vue.js中，v-bind指令还有一个简写形式，即":属性名"。这被称为v-bind的语法糖。
使用v-bind的语法糖，可以直接在HTML元素中使用冒号加特性名的方式来绑定数据。
官方解释：
简单小例子：
<!-- 使用v-bind的完整写法 -->
<img v-bind:src="imgUrl"><!-- 使用v-bind的语法糖写法 -->
<img :src="imgUrl">解释：通过使用v-bind的语法糖写法，将Vue实例中的imgUrl数据绑定到img元素的src特性上。当imgUrl的值发生变化时，img元素的src特性也会相应地更新。
1.绑定属性值：
<!-- 常规写法 -->
<div v-bind:class="{ active: isActive, 'text-bold': isBold }"></div><!-- 语法糖写法 -->
<div :class="{ active: isActive, 'text-bold': isBold }"></div>使用v-bind指令将imageUrl属性绑定到img元素的src属性上，实现动态地修改图片的URL
2.动态绑定class：
<!-- 常规写法 -->
<div v-bind:class="{ active: isActive, 'text-bold': isBold }"></div><!-- 语法糖写法 -->
<div :class="{ active: isActive, 'text-bold': isBold }"></div>使用v-bind指令将一个对象作为参数传递给class属性，根据isActive和isBold的值动态地设置元素的class。
3.动态绑定样式：
<!-- 常规写法 -->
<div v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }"></div><!-- 语法糖写法 -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>使用v-bind指令将一个对象作为参数传递给style属性，根据textColor和fontSize的值动态地设置元素的。
注意：
