文档章节

Vue.js-自定义指令

tianyawhl
 tianyawhl
发布于 2017/09/06 14:18
字数 979
阅读 5
收藏 1
点赞 0
评论 0

除了默认设置的核心指令(v-model 和v-show),Vue也允许注册自定义指令。注意在Vue2.0里面,代码复用的主要形式和抽象是组件--然而,有的情况下,你
仍然需要对纯DOM元素进行底层操作,这时候就会用到自定义指令。下面这个例子将聚焦一个input元素,像这样在页面加载时,元素将获得焦点(注意,autofocus在移动版Safari上不工作),事实上,你访问后还没点击任何内容,input就获得了焦点,现在让我们完善这个指令:

<body class="">
    <div id="example">
        <input type="text" v-focus>
    </div>
    <script src="js/vue.js"></script>
    <script>
    //注册一个全局自定义指令v-focus
    Vue.directive("focus", {
        inserted: function(el) {
            el.focus()
        }
    })
    var app = new Vue({
        el: "#example",
    })
    </script>
</body>
<body class="">
    <div id="example">
        <input type="text" v-focus>
    </div>
    <script src="js/vue.js"></script>
    <script>
    //也可以注册局部指令,组件中接受一个directives的选项
    var app = new Vue({
        el: "#example",
        directives:{
            focus:{
                inserted:function(el){
                    el.focus()
                }
            }
        }
    })
    </script>
</body>

钩子函数
指令定义函数提供了几个钩子函数(可选)
bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document 中)
update:所在组件的VNode更新时调用,但是可能发生在其孩子的VNode更新之前,指令的值可能发生了改变也可能没有,但是你可以通过比较更新前后的值来忽略不必要的模板更新(详细的构造)
componentUpdated:所在组件的VNode及其孩子的VNode全部更新时调用
unbind:只调用一次,指令与元素解绑时调用
接下来我们来看一下钩子函数的参数(包括el,binding,vnode,oldVnode)

钩子函数参数
钩子函数被赋予了以下参数
el:指令所绑定的元素,可以用来直接操作DOM
binding:一个对象,包含以下属性:
name:指令名,不包括v-前缀
value:指令的绑定值,例如v-my-diredtive="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钩子中可用

除了el之外,其它参数都应该是只读的,尽量不要修改他们。如果需要在钩子之间共享数据,建议通过元素的dataset来进行

<body class="">
    <div id="example">
        <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.directive("demo", {
        bind: function(el, binding, vnode) {
            var s = JSON.stringify
            el.innerHTML =
                "NAME:" + s(binding.name) + "<br>" +
                "values:" + s(binding.value) + "<br>" +
                "expression:" + s(binding.expression) + "<br>" +
                "argument:" + s(binding.arg) + "<br>" +
                "modifiers:" + s(binding.modifiers) + "<br>" +
                "vnode keys:" + Object.keys(vnode)
        }
    })
    var app = new Vue({
        el: "#hook-arguments-example",
        data: {
            message: "hello"
        }
    })
    </script>
</body>
最终显示
NAME:"demo"
values:"hello"
expression:"message"
argument:"foo"
modifiers:{"a":true,"b":true}
vnode keys:tag,data,children,text,elm,ns,context,functionalContext,key,componentOptions,componentInstance,parent,raw,isStatic,isRootInsert,isComment,isCloned,isOnce

函数简写
大多数情况下,我们可能想在bind和update钩子上做重复动作,并且不想关心其它的钩子函数,可以这样写
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

对象字面量
如果指令需要多个值,可以传入一个JavaScript对象字面量,记住,指令函数能够接受所有合法类型的JavaScript表达式

<body class="">
    <div id="example">
    <div v-demo="{color:'white',text:'hello'}"></div>
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.directive("demo",function(el,binding){
        console.log(binding.value.color)//"white"
        console.log(binding.value.text)//"hello"
    })
    var app = new Vue({
        el: "#example",
        
    })
    </script>
</body>

 

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 1
博文 192
码字总数 88621
作品 0
常州
前端工程师
一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx

一、 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎。需要一个拖动并且可改变大小的容器盒子。...

_杨瀚博 ⋅ 05/17 ⋅ 0

Vue + ElementUI 后台管理系统项目心得(二)

此篇是关于 Vue 的总结。Js 的总结请见前一篇:Vue + ElementUI 后台管理系统项目心得(一) 话说过完年回来,仿佛一夜之间身边的人都在谈论 Vue,相关的组件也如雨后春笋一般涌现出来,比如...

OSIMLY ⋅ 2017/03/27 ⋅ 0

面向Vue新人:使用Vue自定义指令来完善一个Select组件

本篇文章教大家写一个非常简单的Select组件,想必很多人都写过Select,毕竟它太常用了,但是本篇文章的示例使用到了Vue的自定义指令,如果你对Vue自定义指令不怎么熟悉的话,本篇文章或许会让...

limingru ⋅ 05/23 ⋅ 0

Vue.js视频教程

Vue.js 1.0 免费中文视频教程在线观看和网盘下载地址收集 原文地址:http://phpecshop.blog.51cto.com/6296699/1834208 NideShop:基于Node.js+MySQL开发的高仿网易严选开源B2C商城(微信小...

ch10mmt ⋅ 2016/08/04 ⋅ 0

Vue2.0笔记——Vue常用实例属性,实例方法

实例属性 vm.$el vm.$data vm.options vm.$refs vm.$root vm.$el 该实例属性用于获取Vue实例使用的根DOM元素,即el选项所指的元素DOM vm.$data Vue 实例观察的数据对象。Vue 实例代理了对其 ...

逝岁月 ⋅ 04/19 ⋅ 0

Vue 入门之项目目录结构介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

code_xzh ⋅ 05/20 ⋅ 0

Vue.js入门之工程目录介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

异步社区 ⋅ 05/22 ⋅ 0

Vue2.0笔记——Vue实例

Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: 当创建一个 Vue 实例时,你可以传入一个选项对象,就如前面所提到的如:data,methods,computed,watch等等。 一个 Vu...

逝岁月 ⋅ 04/18 ⋅ 0

西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理。 情景再现...

闰土大叔 ⋅ 04/25 ⋅ 0

在Vue中使用JSX的正确姿势(有福利)

姿势很重要,末尾有福利 vue-antd-ui开源了一段时间后,收到了一些反馈,尤其是Form组件上线后,很多用户对JSX的使用感到迷惑和不习惯,为此专门介绍下Vue JSX的使用姿势及注意事项。 Form组...

zeka ⋅ 06/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 28分钟前 ⋅ 0

到底会改名吗?微软GVFS 改名之争

微软去年透露了 Git Virtual File System(GVFS)项目,GVFS 是 Git 版本控制系统的一个开源插件,允许 Git 处理 TB 规模的代码库,比如 270 GB 的 Windows 代码库。该项目公布之初就引发了争...

linux-tao ⋅ 38分钟前 ⋅ 0

笔试题之Java基础部分【简】【二】

1.静态变量和实例变量的区别 在语法定义上的区别:静态变量前要加static关键字,而实例变量前则不加。在程序运行时的区别:实例变量属于某个对象的属性,必须创建了实例对象,其中的实例变...

anlve ⋅ 55分钟前 ⋅ 0

Lombok简单介绍及使用

官网 通过简单注解来精简代码达到消除冗长代码的目的 优点 提高编程效率 使代码更简洁 消除冗长代码 避免修改字段名字时忘记修改方法名 4.idea中安装lombnok pom.xml引入 <dependency> <grou...

to_ln ⋅ 今天 ⋅ 0

【转】JS浮点数运算Bug的解决办法

37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎...

NickSoki ⋅ 今天 ⋅ 0

table eg

user_id user_name full_name 1 zhangsan 张三 2 lisi 李四 `` ™ [========] 2018-06-18 09:42:06 星期一½ gdsgagagagdsgasgagadsgdasgagsa...

qwfys ⋅ 今天 ⋅ 0

一个有趣的Java问题

先来看看源码: public class TestDemo { public static void main(String[] args) { Integer a = 10; Integer b = 20; swap(a, b); System.out......

linxyz ⋅ 今天 ⋅ 0

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 9

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部