Vue.js第十课自定义指令

summerpxy 发布于2019-06-27 16:36 / 2271人阅读

摘要：下面我们注册一个全局指令该指令的功能是在页面加载时，元素获得焦点实例页面载入时，元素自动获取焦点注册一个全局自定义指令当绑定元素插入到中。

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：
实例

页面载入时，input 元素自动获取焦点：

我们也可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用：
实例

页面载入时，input 元素自动获取焦点：

钩子
钩子函数

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

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 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

以下实例演示了这些参数的使用：
实例

有时候我们不需要其他钩子函数，我们可以简写函数，如下格式：

Vue.directive("runoob", function (el, binding) {
// 设置指令的背景颜色
el.style.backgroundColor = binding.value.color
})

指令函数可接受所有合法的 JavaScript 表达式，以下实例传入了 JavaScript 对象：
实例

GPU云服务器云服务器第十课自定义指令自定义指令实例大云软件定义存储支持的指令架构

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/23022.html

第十课html5 新增标签及属性 html5学习5

摘要：一常用新增标签定义页面的页眉头部定义导航栏定义页面底部，页脚定义文章定义区域定义侧边定义选项列表与搭配使用请输入明星里面用里面用来实现和连接刘德华刘青云刘亦菲张学友将表单内的相关元素分组打包与搭配使用用户登陆用户名二新增的属性值邮箱手机数字一、常用新增标签 1、header:定义页面的页眉头部 2、nav:定义导航栏 3、footer:定义页面底部，页脚 4、article:定义文章 5、s...

wuyangnju 2019-04-23 11:49 评论0 收藏0
体验javascript之美-第十课 写库前的准备工作

摘要：好，我们看看写库之前需要什么准备知识。大彬哥版权所有翻录必究尼古拉斯屌大彬哥群尼古拉斯屌大彬哥这样写至少有两问题，参数多了我记不住顺序，就死翘翘了。能够独立的书写一个库，是很多开发者或者HR认为区分技能的一个标志，而且还存在一个鄙视链切图的

zhongmeizhi 2019-08-20 16:10 评论0 收藏0
TRY REGEX：正则表达式交互式入门教程翻译&解答

摘要：写一个正则表达式来测试变量中是否包含字符串。用函数给出不使用字符，但和等价的正则表达式。第十四课标志全局匹配标志第二个常用的标志是全局匹配标志，用字母表示。写出一个正则表达式来检验合法性。非捕获组的主要用途是给一个组赋予量词。 TRY REGEX 是一个交互式的正则表达式学习项目项目地址：https://github.com/callumacra...在线地址：http://tryre...

李义 2019-08-20 14:18 评论0 收藏0
【Vue.js 牛刀小试】：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

摘要：而路由则是使用了中新增的事件和事件。总结这一章主要是介绍了如何使用在中构建我们的前端路由。系列目录地址一、基础知识概览第一章 - 一些基础概念（posted at 2018-10-31）第二章 - 常见的指令的使用（posted at 2018-11-01）第三章 - 事件修饰符的使用（posted at 2018-11-02）第四章 - 页面元素样式的设定（posted a...

cpupro 2019-05-22 19:26 评论0 收藏0