vue的自定义指令_自定义vue指令使用( )选项来定义-优快云博客

本文链接：https://blog.youkuaiyun.com/SugarXiXixi/article/details/109429199

vue的自定义指令

使用场景：对普通DOM 元素进行底层操作
全局自定义指令
id：指令id，definition：定义对象

Vue.directive(id,definition)

局部自定义指令：使用directives选项
自定义指令的钩子函数

钩子函数	描述
bind（）	构造函数，第一次绑定时调用，只调用一次
inserted（）	被绑定元素插入父节点调用，父节点存在即调用
update（）	第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值；以后每当绑定的值发生变化就会被调用，获得新值与旧值两个参数。
compentUpdated（）	被绑定元素所在模板完成一次周期更新时调用
unbind（）	析构函数,接触绑定时调用，只调用一次

绑定指令属性

el	绑定指令的元素
binding	绑定对象，用于传值
expression	指令表达式
arg	参数
name	指令id
modifiters	指令修饰符
descriptor	指令解析结果
vm	上下文viewmodel
vnode	vue编译的虚拟节点

自定义指令的代码格式

Vue.directive('my-directive', {
    bind: function () {
        ...
    },
    update: function (newValue, oldValue) {
        ...
    },
    unbind: function () {
        ...
    }
})

自定义指令的简单案例实现
input输入框自动获取焦点
实现效果
在这里插入图片描述
具体代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue自定义指令-input自动聚焦</title>
</head>
<body>
  <div id="app">
    <input type="text" v-focus>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    Vue.directive(
      'focus',{
        inserted:function(el){
          el.focus()
        }
      }
    );
    var app =new Vue({
    el:'#app'
    })
  </script>  
</body>
</html>

自定义指令实现改变背景颜色
实现效果
在这里插入图片描述
具体代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义指令——背景加红</title>
</head>

<body>
//：传颜色参数
  <div id="app" v-colors:yellow>{{msg}}</div>
  <script src="../js/vue.js"></script>
  <script>
    Vue.directive('colors', {
      bind: function (el, binding) {
        el.style.color = '#fff',
          el.style.backgroundColor = binding.arg
        
      }
    })
    let app = new Vue({
      el: '#app',
      data: {

        msg: 'xmxixixi'

      },
    })
  </script>
</body>

</html>