vue-自定义指令

内置指令

vue里面有一些内置指令,每个指令都有自己的功能

  • v-html
  • v-model
  • v-for
  • v-if
  • ...

这些指令都是一开始封装好的,也可以自己封装指令 ,扩展额外功能

自定义指令

++钩子函数++

inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

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

update: 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

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

unbind:只调用一次,指令与元素解绑时调用。

++钩子函数参数++

componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
指令钩子函数会被传入以下参数:

el:指令所绑定的元素,可以用来直接操作 DOM 。
binding:一个对象,包含以下属性:
name**:指令名,不包括 v- 前缀。** value**:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。** oldValue**:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。** expression**:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。** arg**:传给指令的参数,可选。例如 v-my-directive: foo 中,参数为 "foo"。** modifiers**:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。**

全局注册

javascript 复制代码
Vue.directive('指令名',{
   "钩子函数"(el){
      el.focus()
   }
})

局部注册

javascript 复制代码
directive:{
  "指令名":{
    inserted(){
       el.focus()
     }
  }
 
}

使用

javascript 复制代码
<input v-指令名 type="text">
相关推荐
Sapphire~11 分钟前
重学前端003 --- CSS 颜色
前端·css
慧一居士12 分钟前
CSS和CSS3区别对比
前端·css3
我血条子呢12 分钟前
动态组件和插槽
前端·javascript·vue.js
中微子20 分钟前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪21 分钟前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
南屿im26 分钟前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
I_have_a_lemon27 分钟前
前端、产品、设计师神器推荐——Onlook
前端·cursor
前端小巷子28 分钟前
深入解析CSRF攻击
前端·安全·面试
JustHappy29 分钟前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构
每天开心29 分钟前
🧙‍♂️闭包应用场景之--防抖和节流
前端·javascript·面试