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


Posted in Javascript onApril 25, 2019

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自定义指令示例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
JS前端笔试题分析
Dec 19 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue开发之封装分页组件与使用示例
Apr 25 #Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 #Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 #Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 #Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 #Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 #Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 #Javascript
You might like
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
日期 时间js控件
2009/05/07 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
利用python实现数据分析
2017/01/11 Python
wxPython之解决闪烁的问题
2018/01/15 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
办公室禁烟通知
2015/04/23 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
诉讼和解协议书
2016/03/23 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python