• 首页
• 宝典数据
• Vue.js
• 005-读书笔记-Vue官网 自定义指令

<script>
  export default {
    name: 'app',
    directives: {
      setRed: function (el, binding) { // 自定义一个指令，使用的时候 v-set-red
        el.style.color = 'red'
      }
    }
  }

</script>

<template>
  <div id="app">
    <div v-set-red>这是一个div标签</div>
  </div>
</template>

2.认识自定义指令的钩子函数

自定义指令也是存在生命周期的，也存在生命周期钩子。

在实际使用的时候，一般只关注三个钩子函数：

• 绑定时调用的钩子 bind
• 被绑定元素插入父节点时调用的钩子 inserted
• 解绑时调用的钩子 unbind

<script>
  export default {
    name: 'app',
    directives: {
      setRed: {
        bind() {
          console.log('执行一次的初始化动作...')
        },
        inserted() {
          console.log('被绑定元素插入父节点时调用...')
        },
        unbind() {
          console.log('与元素解绑时调用...')
        }
      }
    }
  }

</script>

在实际调用的时候，bind和inserted都会调用，而unbind只有在页面热刷新(即在vue-cli中增加或删除节点)的时候才会调用。

钩子函数的参数可以参照官网的内容：自定义指令

3.钩子函数参数el

• el 当前的DOM节点
• el.style 当前节点的样式，如el.style.width
• el.dataset 当前节点的自定义属性，如data-test="123"

<template>
  <div id="app">
    <input v-set-red type="text" value="内容" data-test="wang" style="width:100%">
  </div>
</template>

<script>
  export default {
    directives: {
      setRed: function (el, binding) { // 自定义一个指令，使用的时候 v-set-red
        el.style.color = 'red'
        console.log(el, el.type, el.value, el.dataset.test, el.style.width)
      }
    }
  }

</script>

输出的结果：

<input v-set-red type="text" value="内容" data-test="wang" style="width:100%"> "text" "内容" "wang" "100%"

可以看出 el el.value el.dataset.test el.style.width 分别输出的内容是什么。

4.参考内容

• 自定义指令

脚本宝典总结

以上是脚本宝典为你收集整理的005-读书笔记-Vue官网 自定义指令全部内容，希望文章能够帮你解决005-读书笔记-Vue官网 自定义指令所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。