vue内置常⽤指令和⾃定义指令？

1.vue内置常⽤指令：

v-if：根据条件渲染元素，当条件为真时，元素被渲染，否则不渲染。

v-for：循环渲染元素，可以遍历数组、对象、字符串等。

v-bind：绑定元素属性或组件属性，可以动态地将数据绑定到元素或组件上。

v-on：绑定事件监听器，可以在元素上监听各种事件。

v-model：双向绑定表单元素和数据，可以在表单元素上实现数据的双向绑定。

v-show：根据条件显示或隐藏元素，当条件为真时，元素显示，否则隐藏。

v-text：将数据绑定到元素的⽂本内容中，可以实现数据的单向绑定。

v-html：将数据绑定到元素的HTML内容中，可以实现HTML的渲染。

v-pre：跳过元素和⼦元素的编译过程，可以⽤来优化性能。

v-cloak：在元素加载完成之前隐藏元素，可以防⽌元素在渲染之前显示出原始状态

2.开发者⾃定义指令：

2.1概念：⾃定义指令是⼀种可以重复使⽤的指令，可以⽤来封装⼀些常⽤的功能或⾏为

2.2⾃定义指令有以下⼏个钩⼦函数：

bind：指令第⼀次绑定到元素时调⽤。

inserted：元素插⼊到DOM中时调⽤。

update：元素更新时调⽤，但可能在其⼦元素更新之前。

componentUpdated：指令所在组件的VNode及其⼦VNode全部更新后调⽤。

unbind：指令与元素解绑时调⽤。

2.3使⽤语法： Vue.directive('my-directive', { bind: function(el, binding, vnode) { // 指令第⼀次绑定到元素时调⽤ }, inserted: function(el, binding, vnode) { // 元素插⼊到DOM中时调⽤ }, update: function(el, binding, vnode, oldVnode) { // 元素更新时调⽤ }, componentUpdated: function(el, binding, vnode, oldVnode) { // 指令所在组件的VNode及其⼦VNode全部更新后调⽤ }, unbind: function(el, binding, vnode) { // 指令与元素解绑时调⽤ } })

2.4应⽤场景： 其中，第⼀个参数是指令的名称，第⼆个参数是⼀个对象，包含了各个钩⼦函数。在钩⼦函数 中，可以通过参数 来获取元素、绑定值、VNode等信息，从⽽实现各种功能。