vue自定义指令的创建和使用
一、自定义指令的创建和使用
Vue自带的指令很多，v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...
但是这些指令都是比较偏向于工具化，有些时候在实现具体的业务逻辑的时候，发现不够用，如何来自定义指令.
1、自定义指令
①创建
new Vue({
directives:{
change:{
bind:function(){},
update:function(){},
unbind:function(){}
}
}
})
在自定义指令时，在指令对应的配置对象中有3个处理函数指令对应的操作
bind
指令在绑定到元素要执行的操作
update
如果在调用指令时候，传了参数，当参数变化时候，就会执行update所指定的方法
unbind
解绑要执行的操作
②使用自定义指令
directives:{
hello:{
bind:function(){},
update:function(){},
unbind:function(){}
}
}
使用：
v-hello
注意事项：
建议在给指令的命名采用小驼峰式的命名方式，比如changeBackgroundColor,在使用的时候，采用烤串式写法 v-change-background-color
（方法：参数，返回值）
bind方法以及update方法 都是有参数的，
一个是el，对应的是调用指令的元素
一个bindings，是一个对象：name/rawName/value/oldValue...
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body> <div id="container">
<p>{{msg}}</p>
<!-- 准备实现需求：
在h1标签上面，加上一个按钮，当点击按钮时候，对count实现一次
自增操作，当count等于5的时候，在控制台输出‘it is a test’
-->
<button @click="handleClick">clickMe</button>
<h1
v-if="count < 6"
v-change="count">it is a custom directive</h1>
</div> <script>
//directive
new Vue({
el: '#container',
data: {
msg: 'Hello Vue',
count:0
},
methods:{
handleClick: function () {
//按钮单击，count自增
this.count++;
}
},
directives:{
change:{
bind: function (el,bindings) {
console.log('指令已经绑定到元素了');
console.log(el);
console.log(bindings);
//准备将传递来的参数
// 显示在调用该指令的元素的innerHTML
el.innerHTML = bindings.value;
},
update: function (el,bindings) {
console.log('指令的数据有所变化');
console.log(el);
console.log(bindings);
el.innerHTML = bindings.value;
if(bindings.value == 5)
{
console.log(' it is a test');
}
},
unbind: function () {
console.log('解除绑定了');
}
}
}
})
</script> </body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body> <div id="container">
<p>{{msg}}</p>
<h1 v-change-background-color="myBgColor">
it is a header1
</h1>
</div> <script>
new Vue({
el: '#container',
data: {
msg: 'Hello Vue',
myBgColor:'#ff0000'
},
directives:{
changeBackgroundColor:{
bind: function (el,bindings) {
console.log('in bind ');
console.log(bindings.value);
el.style.backgroundColor = bindings.value;
}
}
}
})
</script> </body>
</html>
<h4 v-change-background-color="'red'">背景色</h4>这样也是可以的，但是写死了，不好
vue自定义指令的创建和使用的更多相关文章
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- vue 自定义指令的魅力
[第1103期]vue 自定义指令的魅力 点点 前端早读课 2017-11-08 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...
- 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作为前端框架.在功能开发过程中 ...
随机推荐
- POJ-2287.Tian Ji -- The Horse Racing (贪心)
Tian Ji -- The Horse Racing Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 17662 Acc ...
- RPC-基于原生java实现
一:什么是RPC 远程过程调用(Remote Procedure Call).就是调用其他业务方的方法的时候,就像是调用自己本地的方法一样. 二:java rpc实现简介 服务端(使用反射) (1)服 ...
- [2019杭电多校第五场][hdu6628]permutation 1
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6628 题意为求字典序第k小的差异数组,差异数组p满足p[i]=a[i+1]-a[i]. 头铁的爆搜,因 ...
- django信号相关
Django中提供了“信号调度”,用于在框架执行操作时解耦.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. 1.Django内置信号 Model signals pre_in ...
- 攻防世界--srm-50
测试文件:https://adworld.xctf.org.cn/media/task/attachments/6df7b29f8f18437887ff4be163b567d5.exe 1.准备 获取 ...
- 如何在springboot中读取自己创建的.properties配置的值
在实体类里面加上 @PropertySource("classpath:/robot_config.properties") robot_config.properties // ...
- 常用Linux Shell命令组合
序号 任务 命令组合 1 删除0字节文件 find . -type f -size 0 -exec rm -rf {} \;find . type f -size 0 -delete 2 查看进程,按 ...
- CentOS7 设置电源选项，待机、睡眠、挂起
设置装有 CentOS7 的笔记本合盖后黑屏进入睡眠模式 systemd 能够处理某些电源相关的 ACPI事件,你可以通过从 /etc/systemd/logind.conf 以下选项进行配置: Ha ...
- 7——C++类的使用
定义了一个类之后,便可以如同用int.double等类型符声明简单变量一样,创建该类的对象,称为类的实例化. 类的定义实际上是定义了一种类型,类不接收或存储具体的值,只作为生成具 ...
- python基础--匿名函数
def calc(x): return x+1 a=calc(10) print(calc) print(lambda x:x+1)#lambda函数的内存地址,利用函数名可以作为值传递给变量 b=l ...