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作为前端框架.在功能开发过程中 ...
随机推荐
- SUST_ACM_2019届暑期ACM集训热身赛题解
问题A:Hello SUST! 知识点:基本输入输出 C/C++: #include <stdio.h> int main() { int n; scanf("%d", ...
- WOJ#3882 旅行问题（POI2004）
描述 John打算驾驶一辆汽车周游一个环形公路.公路上总共有n车站,每站都有若干升汽油(有的站可能油量为零),每升油可以让汽车行驶一千米.John必须从某个车站出发,一直按顺时针(或逆时针)方向走遍所 ...
- HDU 6649 Data Structure Problem（凸包+平衡树）
首先可以证明,点积最值的点对都是都是在凸包上,套用题解的证明:假设里两个点都不在凸包上, 考虑把一个点换成凸包上的点(不动的那个点), 不管你是要点积最大还是最小, 你都可以把那个不动的点跟原点拉一条 ...
- 移动端抓包工具——Fiddler（一）
web端抓包一般利用浏览器自带的检查功能(F12),然后看Network项,根据请求响应判断出问题 移动端怎么抓包呢,这里介绍一款常用的抓包工具——Fiddler 前提: 1.必须确保安装fiddl ...
- Arrays.asList使用指南和一些坑（转）
一.java.util.Arrays.asList() 的一般用法 List 是一种很有用的数据结构,如果需要将一个数组转换为 List 以便进行更丰富的操作的话,可以这么实现: String[] m ...
- appscan 历史版本下载
https://www.cnblogs.com/hua198/p/11120916.html
- C# 反射实现动态加载程序集
原文:https://blog.csdn.net/pengdayong77/article/details/47622235 在.Net 中,程序集(Assembly)中保存了元数据(MetaData ...
- 什么是Azkaban?
Azkaban是什么 Azkaban是由Linkedin开源的做批量工作流任务的调度器.在一个工作流内按照特定的顺序运行一组工作和流程.Azkaban定义了一种KV文件格式来建立任务之间的相互依赖关系 ...
- Simple Vedio Intercom System
I. Deployment / Architecture Block Diagram II. Resources Used sip proxy server + sip user agent 1. ...
- glob & fnmatch -- 使用Unix style通配符
通配符: ? 匹配单个字符 * 匹配 0+ 个字符 [seq] 匹配属于区间的单个字符 [!seq] 匹配不属于区间的单个字符 注意: "." just a " ...