在 Vue2 中，指令是一种特殊的属性，用于在模板中动态地改变 DOM 元素的行为。Vue2 提供了许多内置指令，使得我们可以更加方便地对 DOM 进行操作。在这篇博客中，我们将深入了解 Vue2 中的一些常用指令。
-
v-bind 指令：
v-bind指令用于动态地绑定属性值。通过使用v-bind，我们可以将组件中的数据绑定到 DOM 元素的属性上。例如，如果我们有一个名为myData的属性，那么可以使用v-bind指令将其绑定到一个元素的class属性上，如下所示：
v-bind用来响应的更新html属
v-bind:href 可以简写成 :href
<!-- 绑定一个属性 --> <img v-bind:src="imageSrc"><!-- 缩写 --> <img :src="imageSrc">绑定属性
<!-- target="_blank" 让跳转的窗口新建打开而不是在原页面跳转 --> <!-- <a v-bind:href="linkAddress" v-text="title" target="_blank"></a> --> <!-- <a :href="linkAddress" v-text="title" target="_blank"></a> --> <a :href="isFlag?bd:qq" v-text="isFlag?'百度':'腾讯'" target="_blank"></a> <a :href="isFlag?bd:qq" v-text="isFlag?'百度':'腾讯'" target="_blank"></a> <input type="button" @click="updateLink" value="点我会变喔">const app = new Vue({el: '.app',data: {// linkAddress: 'http://www.baidu.com',// title: '百度'isFlag: true,bd: 'http://www.baidu.com',qq: 'http://www.qq.com',},methods: {updateLink() {// this.linkAddress = 'http://www.qq.com'// this.title = '腾讯'this.isFlag = !this.isFlag}}})绑定对象
切换类名：我们可以给v-bind:class 一个对象，以动态地切换class
注意：v-bind:class指令可以与普通的class特性共存
v-bind 中支持绑定一个对象
如果绑定的是一个对象，则键为对应的类名 ；值为对应data中的数据
<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}"><li>Vue</li><li>Node</li><li>React</li>
</ul>
绑定数组（class）
v-bind中支持绑定一个数组：数组中classA和classB对应为data中的数据
<ul class="box" :class="[classA, classB]"><li>Vue</li><li>Node</li><li>React</li>
</ul>
绑定样式（style）
给style行内添加对象样式
<div :style="styleObj1">绑定样式对象</div>
data:{styleObj1:{color: 'pink',fonstSize: '30px',background: 'black'}
}
<div :style="{ color: activeColor, fontSize: fontSize, background: 'red' }">内联样式</div><!-- 数组语法可以将多个样式对象应用到同一个元素 -->
<div :style="[styleObj1, styleObj2]"></div>
-
v-on 指令：
v-on指令用于绑定事件监听器。使用v-on指令，我们可以在元素上监听特定的事件，并在事件被触发时执行相应的函数。例如，我们可以使用v-on:click来监听元素的点击事件：
<button v-on:click="handleClick"></button>methods: {handleClick() {console.log(213);},},//这里是简写方式<button @click="handleClick"></button>然后，在组件中定义一个名为handleClick的方法来处理点击事件。
-
v-if 和 v-show 指令：
v-if指令用于根据条件来渲染元素。如果条件为真，则渲染元素；否则，该元素将被隐藏。v-show指令也用于根据条件来显示或隐藏元素，但它只是简单地切换元素的显示状态，而不会添加或删除元素。
<div v-if="isVisible"></div><div v-show="isVisible"></div>data() {return {isVisible: true,};},其中，isVisible是一个布尔类型的属性，用于控制元素的显示。
-
v-for 指令：
v-for指令用于循环遍历数组或对象，并根据每个元素或属性生成相应的元素。例如，我们可以使用v-for指令来生成一个列表：
<ul><li v-for="item in items">{{ item }}</li></ul>data() {return {items: "[1,2,3, 4,5,65,6],};},其中，items是一个数组，item是数组中的每个元素。
-
v-model 指令：
v-model指令用于实现双向数据绑定。通过使用v-model，我们可以将表单元素的值与组件中的属性进行双向绑定，当表单元素的值发生变化时，组件中的属性也会相应地更新；反之亦然。
<input v-model="myValue"><span>{{msg}}</span>//这样就可以实现vue的双向数据绑定data() {return {msg: "hjhdh",};},其中，myValue是一个属性，它的值将与输入框的值保持同步。
1.v-text
更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
不可以解析标签，可以直接放文字 、
<span v-text='msg'>}</span>data() {return {msg: "123",};},1、v-html
v-html 指令类似于 v-text 指令;
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
v-html 指令应尽量避免使用，否则会带来危险(XSS攻击 跨站脚本攻击),一般只在可信任内容上使用 v-html，永不用在用户提交的内容上;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-html指令</title>
</head><body><div id="app"><p>{{ msg }}</p><p v-text="msg"></p><p v-html="msg"></p></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{msg:"<span>html标签在渲染的时候被源码输出</span>"}})</script>
</body></html>
1、v-slot
子组件声明<slot></slot>，然后父组件使用子组件时，传入对应的 slot 内容。也就是子组件使用<slot>插槽标签，父组件使用v-slot指令，需要两者结合使用，若父组件没声明v-slot内容，子组件slot对应位置则无内容。
当子组件slot内声明有默认内容时，那父组件不声明v-slot，子组件则会使用默认内容，例如：<slot>默认值</slot>
插槽可以包含任何内容，例如：模板代码、 HTML、组件、普通文本
默认插槽
定义
<template><div class="hello"><h3>title</h3><!-- 定义一个插槽，将使用组件标签时传递的内容（innerText/innerHtml）填充到此处 --><slot>默认值，使用组件标签时没有传内容则显示这个</slot></div>
</template>
使用
<template><div class="container"><HelloWorld>123</HelloWorld><HelloWorld><button>456</button></HelloWorld><HelloWorld/></div>
</template>
2.0.2中文支持M3)
