第十七节——指令

一、概念

在Vue.js中，指令（Directives）是一种特殊的语法，用于为HTML元素添加特定的行为和功能。指令以v-作为前缀，通过在HTML标签中使用这些指令来操作DOM，修改元素的属性、样式或行为。

Vue.js提供了一组内置的指令，如v-model、v-bind、v-if、v-for等。此外，你也可以自定义指令来满足特定的需求。

二、常见指令

1、v-model

用于实现表单元素与Vue实例数据的双向绑定。

2、v-bind

用于动态地将Vue实例的数据绑定到HTML元素的属性或表达式。

3、v-if / v-else / v-else-if

根据条件控制元素的显示与隐藏。

4、v-for

用于根据数据源循环渲染元素列表。

5、v-on / @

用于监听DOM事件，并在触发时执行Vue实例中的方法。

6、v-show

根据条件控制元素的显示与隐藏，通过修改元素的CSS属性display。

7、v-text

将Vue实例的数据绑定到元素的文本内容。

8、v-html

将Vue实例的数据作为HTML内容动态渲染到元素中

三、v-model

1、概念

v-model指令在Vue.js中用于实现表单元素与Vue实例数据的双向绑定。当使用v-model指令绑定一个表单元素时，它会在底层自动为元素添加一个value属性和一个input事件监听器

2、绑定过程

对于表单元素（如<input>、<textarea>、<select>），v-model会将value属性与Vue实例中的一个数据属性进行绑定。

在初始化时，Vue会根据v-model指令的绑定值（通常是Vue实例的一个属性）将表单元素的初始值赋给该属性。

当用户与绑定了v-model的表单元素进行交互（输入、选择等）时，元素的input事件会被触发。

Vue会捕获到该事件，并根据表单元素的类型（<input>的type属性）来获取新的值。

Vue会将新的值赋给绑定的数据属性，实现从表单元素到Vue实例数据的单向绑定。

同时，Vue会将绑定的数据属性的值反过来赋给表单元素的value属性，实现从Vue实例数据到表单元素的单向绑定。

这样，无论是表单元素的值变化还是Vue实例数据的变化，都会相互影响，实现了双向绑定

3、例子

<template><div><div>{{ msg }}</div><!-- <input type="text" :value="msg" @input="inputChange" /> --><!-- 监听表单控件变化,同步每次变化的值到value上--><input type="text" v-model="msg" /><button @click="msg = '张三'">填入张三</button></div>
</template><script>
export default {data() {return {arr: [1, 2, 3],isRed: false,px: 100,msg: "aaa",};},methods: {inputChange(event) {this.msg = event.target.value;},},
};
</script><style scoped>
.red {color: red;
}
</style>

4、自定义组件使用v-model

子组件

<!-- CustomInput.vue -->
<script>export default {props: ["modelValue"],emits: ["update:modelValue"],};
</script><template><input:value="modelValue"@input="$emit('update:modelValue', $event.target.value)"/></template>

父组件

<template><div>{{ a }}<LearnA v-model="a"></LearnA></div>
</template><script>import LearnA from "./../learn-a.vue";export default {components: {LearnA,},data() {return {a: 1,};},};
</script>

四、自定义指令（了解）

1、概念

在Vue中，你可以使用自定义指令来扩展和修改现有的DOM元素行为。自定义指令是一种在HTML元素上绑定自定义行为的方式，它们可以用于处理交互、动态样式、事件监听等。

2、生命周期

在指令定义中指定相应的钩子函数。自定义指令可以定义多个钩子函数，每个钩子函数在指令的生命周期中扮演不同的角色。以下是一些常用的钩子函数：

bind: 只调用一次，在指令第一次绑定到元素时调用，可以在这里进行初始设置。

inserted: 当被绑定的元素插入到DOM中时调用。

update: 在组件的VNode更新时调用，但可能发生在其子VNode更新之前。

componentUpdated: 在组件的VNode及其子VNode全部更新后调用。

unbind: 只调用一次，在指令与元素解绑时调用

3、例子

全局指令

在入口文件处，增加v-color指令根据传入的参数改变字体颜色

app.directive("color", {mounted(el, binding) {el.style.color = binding.value;console.log(el, binding);},
});

局部指令

<template><div><input type="text" v-focus="true" /><div v-color="`green`">全局指令变红</div></div>
</template><script>
export default {directives: {/*** 对象的key是指令的名字* 指令 不需要 v- 开头* 但是使用的时候 必须要v- 开头*/focus: {/**** @param {*} el 当前的dom节点* @param {*} binding 相关传值*/mounted(el, binding, vnode, prevVnode) {// console.log(el, binding);el.focus();},},},
};
</script>