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 ...
随机推荐
- Java文件操作
1.通过File类中的createNewFile()创建一个新的文件 /** * 测试创建文件 * @throws IOException */ @Test pub ...
- CSS解决未知高度垂直居中
尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...
- HDOJ 4770 Lights Against Dudely
状压+暴力搜索 Lights Against Dudely Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- 检查日期是否为节假日api
http://www.easybots.cn/api/holiday.php?d=20160104 返回值: 工作日对应结果为 0, 休息日对应结果为 1, 节假日对应的结果为 2: 检查一个日期是否 ...
- Java Native Interface 六JNI中的异常
本文是<The Java Native Interface Programmer's Guide and Specification>读书笔记 在这里只讨论调用JNI方法可能会出现的异常, ...
- WPF直接用Window.Close直接关闭窗口导致不能完全退出的问题
前几天我在CSDN扔了一个问题,基本描述一下:写了一段这样的代码,来实现获取Control的template,却发现一个这样的问题,就是当我打开了一个window以后,手动调用Close(),窗口的确 ...
- java实现记住密码功能(利用cookie)
<br> <input type="text" id="userName" name="userName" value=& ...
- java 标签库(核心，xml，sql ,国际化，函数)
java标签库分分为上述几种,一般经常使用的是核心和函数,接下来会分别讲解这几种,和常见的用法. 一般标签库会和el表达式一起使用,所以在学习标签库前最后也学习下el表达式的使用. 导入后展开 可以从 ...
- 双日历时间段选择控件—daterangepicker(汉化版)
daterangepicker的配置信息,记录下来方便设置: <pre name="code" class="html"><pre name= ...
- BFS_Maze_求解迷宫最短路径
/* 10 10 #.######.# ......#..# .#.##.##.# .#........ ##.##.#### ....#....# .#######.# ....#..... .## ...