Vue - 自定义指令
1、Vue.directive(id,definition)注册一个全局自定义指令，接收两个参数，指令ID以及定义对象
2、钩子函数：将作用域与DOM进行链接，链接函数用来创建可以操作DOM的指令
bind - 只调用一次，在指令第一次绑定到元素上时候调用
update - 在bind之后立即以初始值为参数第一次调用，之后绑定值变化的时候，参数为新值与旧值
unbind - 只调用一次，在指令从元素上解绑的时候调用
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Vue.directive('my-directive',{
bind : function(){
//准备工作
//例如，添加事件处理器或只需要运行一次的高耗任务
},
update : function(){
//值更新时的工作
//也会以初始值为参数调用一次
},
unbind : function(){
//清理工作
//例如，删除bind()添加的事件监听器
}
})
//调用
<div v-my-directive="someValue"></div>
//只需要update函数，可以传一个函数替代定义对象
Vue.directive('my-directive',function(value){})
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!-- 如果指令需要多个值，可以传入一个js对象 -->
<!-- 指令可以使用合法的js表达式 -->
<body id="example">
<div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div>
</body>
<script>
Vue.directive('demo',function(value){
console.info(value.color); //white
console.info(value.text) // hello!
})
var demo = new Vue({
el : '#demo'
})
</script>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
当指令使用字面修饰符，值将按普通字符串处理并传递给update方法，update方法只调用一次，因为普通字符串不能影响数据变化
<body id="example">
<div id="demo" v-demo.literal="foo bar baz"></div>
</body>
<script>
Vue.directive('demo',function(value){
console.info(value); //foo bar baz
})
var demo = new Vue({
el : '#demo'
})
</script>
3、以属性的形式使用自定义属性
<body id="demo">
<my-directive class="hello" name="hi"></my-directive>
</body>
<script type="text/javascript">
Vue.elementDirective('my-directive',{
//api同普通指令一致
bind : function(){
console.info(this.el.className);
console.info(this.el.getAttribute('name'))
}
}) var demo = new Vue({
el : '#demo'
})
</script>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<body id="demo">
<my-directive class="hello" name="hi" a="params"></my-directive>
</body>
<script type="text/javascript">
Vue.elementDirective('my-directive',{
params : ['a'], //api同普通指令一致
bind : function(){
console.info(this.el.className);
console.info(this.el.getAttribute('name'))
}
}) var demo = new Vue({
el : '#demo'
})
</script> <!-- 或者需要自动更新的时候，需要一个回调 -->
<body id="demo">
<my-directive class="hello" name="hi" v-bind:a="someValue"></my-directive>
<input type="text" v-model="someValue">
</body>
<script type="text/javascript">
Vue.elementDirective('my-directive',{
params : ['a'], paramWatchers : {
a : function(val,oldValue){
console.info('a changes');
}
}
}) var demo = new Vue({
el : '#demo',
data : {
someValue : 'value'
}
})
</script>
4、自定义属性用在对象上，对象内部属性变化的时候触发update，在指令定义对象中指定deep:true
<body id="demo">
<div v-my-directive="a"></div>
<button @click="change">change</button>{{a,b,c}}
</body>
<script>
Vue.directive('my-directive',function(){
deep : true, update : function(obj){
//当obj的嵌套属性变化时候调用
console.info(obj.b.c);
}
})
var demoVM = new Vue({
el : '#demo', data : {
a : {b : {c : 2}}
}, method : {
change : function(){
demoVM.a.b.c = 4;
}
}
})
</script>
5、acceptStatement让自定义指令接受内联语句
<body id="demo">
<div v-my-directive="a++"></div>
{{a}}
</body>
<script>
Vue.directive('my-directive',function(){
acceptStatement : true, update : function(fn){
//当obj的嵌套属性变化时候调用
console.info(fn.toString())
fu();
}
})
var demoVM = new Vue({
el : '#demo', data : {
a : 5
}
})
</script>
6、v-on绑定多个事件时，要是是不同的事件类型，例如点击，focus，change，会按照业务需求进行选择，要是绑定了2个甚至多个click事件，那么v-on只会绑定第一个click事件
Vue - 自定义指令的更多相关文章
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue自定义指令报错：Failed to resolve directive: xxx
Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- vue自定义指令，比onerror更优雅的方式实现当图片加载失败时使用默认图，提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- Vue自定义指令使用方法详解 和 使用场景
Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...
随机推荐
- 手机通过数据线连接电脑后，找不到设备--Android Studio
手机通过数据线连接电脑后,找不到可用的设备.允许USB调试,,因为小米手机还要设置USB开发者模式. 1.打开设置/关于手机 四次点击“MIUI版本”如图: 2.返回上一页打开更多设置 看到开发者选项 ...
- 03 Yarn 原理介绍
Yarn 原理介绍 大纲: Hadoop 架构介绍 YARN 产生的背景 YARN 基础架构及原理 Hadoop的1.X架构的介绍 在1.x中的NameNodes只可能有一个,虽然可以通过Se ...
- Android五岁了
今日(2013-9-24),谷歌开源系统Android迎来了它5岁的生日. 时间过得真快啊!当时的android并不被人看好,而现在的android已经成为了全球最大的智能手机操作系统.而现在的诺基亚 ...
- Uva 11732 strcmp() Anyone?
strcmp() Anyone? Time Limit: 2000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu [Subm ...
- Bestcoder#5 1002
Bestcoder#5 1002 Poor MitsuiTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (J ...
- iOS小Tip之查看FPS
可能大家有的时候会想要查看app在运行时的帧率能否达到60帧,如果达不到的话,你可能会想着去优化动画或者其它任何会影响显示性能的问题. 但是,你首先要观察到你的FPS,对吧? 我告诉大家一个简单的方法 ...
- jdk安装问题--javac不是外部命令
set java_home=C:\Program Files\Java\jdk1.6.0_26 安装JDK的根目录 set classpath=%JAVA_HOME%\lib\tools.jar; ...
- 【新手出发】从搭虚拟机开始，一步一步在CentOS上跑起来.Net Core程序
文章背景 微软6月26号发布core 1.0版本后,园子里关于这方面的文章就更加火爆了,不管是从文章数量还是大家互动的热情来看,绝对是最热门的技术NO.1.我从去年底开始接触.net core到现在也 ...
- python raise a string exception is deprecated
python不允许raise 一个内建的string 对象.所以就崩溃,可以先将其转换成其他string,比如赋值.
- word20161223
UAM, user authentication module / 用户身份验证模块 UBR, unspecified bit rate / 未指定的传输率 UCS, Unicode Characte ...