vue2.0自定义指令示例代码详解

站长资源 2024/11/25 佚名

18 1538 18

DDR爱好者之家 Design By 杰米

1、什么是指令？

指令通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记。

除了 Vue 核心携带着的一些默认指令（v-model 和 v-show）之外，

Vue 还允许你注册自己的自定义指令。某些情况下，还是需要对普通元素进行一些底层 DOM 访问，

这也是自定义指令仍然有其使用场景之处。

2、全局指令：

当页面加载时，元素将获取焦点，事实上，在访问页面时，如果你还没有点击任何地方，上面的输入框现在应该处于获取焦点的状态。现在让我们构建指令以完成此效果：

<template>
<div class="parent">
 <input v-focus>
</div>
</template>
import Vue from 'vue'
 import cnChildren from './children'
 // 注册一个名为 `v-focus` 的全局自定义指令
 Vue.directive('focus', {
  // 当绑定的元素插入到 DOM 时调用此函数……
  inserted: function (el) {
   // 元素调用 focus 获取焦点
   el.focus()
  }
 });

如果你想要注册一个局部指令，也可以通过设置组件的 directives 选项：

directives: {
 focus: {
  // 指令定义对象
  inserted: function (el) {
   el.focus()
  }
 }
}

我们有几个可用的钩子：

bind：在指令第一次绑定到元素时调用，只会调用一次。可以在此钩子函数中，执行一次性的初始化设置。
inserted：在已绑定的元素插入到父节点时调用（只能保证父节点存在，不一定存在于 document 中）。
update：在包含指令的组件的 VNode 更新后调用，但可能之前其子组件已更新。指令的值可能更新或者还没更新，然而可以通过比较绑定的当前值和旧值，来跳过不必要的更新（参考下面的钩子函数）。
componentUpdated：在包含指令的组件的 VNode 更新后调用，并且其子组件的 VNode 已更新。
unbind：在指令从元素上解除绑定时调用，只会调用一次。
每个钩子可以选择一些参数。

el：指令绑定的元素。可以用于直接操作 DOM。

binding：一个对象，包含以下属性：

1、name：指令的名称，不包括 v- 前缀。
2、value：向指令传入的值。例如，在 v-my-directive="1 + 1" 中，传入的值是 2。
3、oldValue：之前的值，只在 update 和 componentUpdated 钩子函数中可用。无论值是否发生变化，都可以使用。
4、expression：指令绑定的表达式(expression)，以字符串格式。例如，在 v-my-directive="1 + 1" 中，表达式是 "1 + 1"。
5、arg：向指令传入的参数，如果有的话。例如，在 v-my-directive:foo 中，参数是 "foo"。
6、modifiers：一个对象，包含修饰符，如果有的话。例如，在 v-my-directive.foo.bar 中，修饰符是 { foo: true, bar: true }。
vnode：由 Vue 编译器(Vue's compiler)生成的虚拟 Node 节点(virtual node)。更多细节请查看
VNode API。

除了 el 之外的其他参数，都应该是只读的，并且永远不要去修改它们。

3、自定义指令示例

如果指令需要多个值，你还可以向指令传入 JavaScript 对象字面量(object literal)。记住，指令能够接收所有有效的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
 console.log(binding.value.color) // => "white"
 console.log(binding.value.text) // => "hello!"
})

总结

以上所述是小编给大家介绍的vue2.0自定义指令示例代码详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue2.0自定义指令,vue,指令

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“vue2.0自定义指令示例代码详解”

暂无评论...

vue2.0自定义指令示例代码详解

Vue开发之封装上传文件组件与用法示例

Vue开发之封装分页组件与使用示例

评论“vue2.0自定义指令示例代码详解”

更新日志

友情链接