用于对纯 DOM 元素进行底层操作。

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
new Vue({
el: '#',
data: {},
directives: {
focus: {
// 指令的定义---
}
}
})

简写:

Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})

钩子函数:

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

  • inserted被绑定元素插入父节点时调用 (父节点存在即可调用,不必存在于 document 中)。

  • update所在组件的 VNode 更新时调用,但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

  • componentUpdated所在组件的 VNode 及其孩子的 VNode 全部更新时调用。

  • unbind只调用一次,指令与元素解绑时调用。

钩子函数的参数 (包括 elbindingvnodeoldVnode)

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' + //指令名 "demo"
'value: ' + s(binding.value) + '<br>' +//指令的绑定值 "hello!"
'expression: ' + s(binding.expression) + '<br>' +//绑定值的字符串形式 "message"
'argument: ' + s(binding.arg) + '<br>' +//传给指令的参数 "foo"
'modifiers: ' + s(binding.modifiers) + '<br>' +//一个包含修饰符的对象 {"a":true,"b":true}
'vnode keys: ' + Object.keys(vnode).join(', '
)+//Vue 编译生成的虚拟节点
    //'oldVnode: ' + Object.keys(oldVnode).join(', ')//上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
}

}) new Vue({
el: '#hook-arguments-example',
data: {
message: 'hello!'
}
})

对象字面量

<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!"
})

vue-11-自定义指令的更多相关文章

  1. 最简单的方式理解Vue的自定义指令与混合

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

  2. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  3. vue 通过自定义指令实现 置顶操作;

    项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令  ...

  4. vue怎么自定义指令??

    最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...

  5. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  6. Vue.directive 自定义指令

    一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...

  7. vue中自定义指令

    //vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...

  8. Vue2.0 【第二季】第1节 Vue.directive自定义指令

    目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...

  9. Vue 3自定义指令开发

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...

  10. vue.js自定义指令入门

    Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

随机推荐

  1. NGUI实现UITexture的UV滚动

    材质上使用的贴图: 效果:实现该纹理在屏幕上的滚动 代码: using System.Collections; using System.Collections.Generic; using Unit ...

  2. C# DataTable 通过Linq分组

    datatable我们是经常使用到的,但是需要对数据进行分组,具体代码如下: var result = dt.AsEnumerable().GroupBy(f => new { type = f ...

  3. boke练习: @PreAuthorize authentication.name.equals的数据绑定与验证

    boke练习: @PreAuthorize authentication.name.equals的数据绑定与验证 先看2个简单的例子: 一 @PostMapping("/{username} ...

  4. English trip EM2-PE-6B Teacher:Taylor

    课上内容(Lesson) 词汇(Key Word ) engage [ɪn'ɡedʒ] 订婚 miracle ['mɪrəkl]  n. 奇迹,奇迹般的人或物:惊人的事例 personality  性 ...

  5. (GoRails)链接link_to到当前页current Page 并使用参数 (类ActionController::Parameters)

    https://gorails.com/episodes/rails-link-to-current-page-with-params?autoplay=1 如何链接到当前页并增加,移除,或者修改UR ...

  6. 关于ActionBar 左侧添加完返回后 点击无效的问题

    ActionBar actionBar =getSupportActionBar(); if(actionBar!=null){ actionBar.setHomeAsUpIndicator(R.mi ...

  7. selenium 定时任务

  8. Beta阶段——第3篇 Scrum 冲刺博客

    Beta阶段--第3篇 Scrum 冲刺博客 标签:软件工程 一.站立式会议照片 二.每个人的工作 (有work item 的ID) 昨日已完成的工作 人员 工作 林羽晴 完成了报表数据的接口函数 顾 ...

  9. InnoDB存储引擎介绍-(2)redo和undo学习

    01 – Undo LogUndo Log 是为了实现事务的原子性,在MySQL数据库InnoDB存储引擎中,还用Undo Log来实现多版本并发控制(简称:MVCC). - 事务的原子性(Atomi ...

  10. 如何解决Retrieving the COM class factory for component with CLSID {00024500-0000-0000-C000-000000000046} failed due to the following error: 8000401a. 问题

    在系统中需要把数据导出到excel并且压缩,然后报了这个问题: 我在网站上找到了方法: 地址:https://social.msdn.microsoft.com/Forums/vstudio/en-U ...