一、概念
在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>