VUE-自定义指令

作者: zsyyyyy | 来源:发表于2019-05-16 02:10 被阅读0次

vue-自定义指令
Vue-自定义指令
VUE-自定义指令
Vue-自定义指令(属性指令和元素指令)
Vue-自定义指令directive
vue中v-text和v-html的区别
vue 有自定义指令
Vue-指令
Vue-指令
vue-指令

有的情况下，需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>el与data的两种写法</title>
    <style></style>
  </head>
  <body>
    <div id="app">
      <h1>
        当前的n值是：
        <span v-text="n"></span>
      </h1>
      <h1>
        当前的n值是：
        <span v-big="n"></span>
      </h1>
      <button @click="n++">点我n+1</button>
      <hr />
      <input type="text" v-fbind:value="n" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        data: {
          n: 1,
        },

        //这种写法写起来简单，但是不可以处理细节
        directives: {
          // big函数合适被调用 1、指令与元素成功绑定时(绑定时只是建立关系，页面还没出现)会调用(一上来)，2、指令所在的模板被重新解析时
          // 1、函数写法
          big(element, binding) {
            //第一个参数返回绑定指令的Dom元素，第二个参数为指令的对象
            console.log(element)
            console.log(binding)
            element.innerText = binding.value * 10
            console.log(element instanceof HTMLElement)
            console.dir(element) //打印对象的详细信息
          },
          //对象写法，函数的写法跟对象的写法在于函数的写法只执行了bind，update，inserted是不执行的
          fbind: {
            //指令与元素成功绑定时(绑定时只是建立关系，页面还没出现)会调用(一上来)
            bind(element, binding) {
              console.log('bind')
              element.value = binding.value
            },
            //指令所在元素被插入页面时调用
            inserted(element, binding) {
              console.log('inserted')
              element.focus()
            },
            //指令所在元素被重新解析页面时调用
            update(element, binding) {
              console.log('updated')
              element.value = binding.value
              element.focus()
            },
          },
          // bind update一般处理的逻辑都是一致的，函数的写法跟对象的写法在于函数的写法只执行了bind，update，inserted是不执行的
          /*注意点：
            1、指令名的规范:<元素 v-big-num> 指令函数名需要加引号 'big-num'
          */
          //下面写法focus无效
          // fbind(element, binding) {
          //   //第一个参数返回绑定指令的Dom元素，第二个参数为指令的对象
          //   element.value = binding.value
          //   element.focus();//Dom挂载到页面才能调用，这里的v-fbind只是指令与元素成功绑定时(绑定时只是建立关系，页面还没出现)，所以这里的focus无效
          // },

          // <button id="btn">点我创建一个input输入框</button>
          // var btn = document.getElementById("btn")
          // btn.onclick  = ()=>{
          //   const input = document.createdElement("input")
          //   input.focus()
          //   需要等input出来才能focus，因为是操作Dom了，DOM都还没出来，添加样式，添加value等就不受影响
          //   但是项像focus，给input的父元素添加css，如 input.parentElement.style.bg = ""这些就需要放到appendChild后面
          //   console.log(input.parentElement)//null:还没appendChild呢，所以不知道input的父元素是谁，
          //   document.body.appendChild("input")
          //   input.focus()
          // }
        },
      })
      // 全局指令的函数写法
      Vue.directives('big2', function (element, binding) {
        console.log(element)
        console.log(binding)
        element.innerText = binding.value * 10
        console.log(element instanceof HTMLElement)
        console.dir(element) //打印对象的详细信息
      })
      //全局指令的对象写法
      Vue.directives('fbind2', {
        //指令与元素成功绑定时(绑定时只是建立关系，页面还没出现)会调用(一上来)
        bind(element, binding) {
          console.log('bind')
          element.value = binding.value
        },
        //指令所在元素被插入页面时调用
        inserted(element, binding) {
          console.log('inserted')
          element.focus()
        },
        //指令所在元素被重新解析页面时调用
        update(element, binding) {
          console.log('updated')
          element.value = binding.value
          element.focus()
        },
      })
      app.$mount('#app')
    </script>
  </body>
</html>

钩子函数

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

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

钩子函数的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀。
value: 指令的绑定值，例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的表达式或变量名。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

//九、vue-cli如何新增自定义指令？
//1.创建局部指令

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})
2.全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})
3.指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>