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作为前端框架.在功能开发过程中 ...
随机推荐
- Java可变参数方法
概念: jdk5.0出现的新特性.将同一个类中,多个方法名相同.参数类型相同.返回类型相同,仅仅是参数个数不同的方法抽取成一个方法,这种方法称为可变参数的方法 好处: 提高代码的重用性和维护性 语法: ...
- Java：CAS(乐观锁)
本文讲解CAS机制,主要是因为最近准备面试题,发现这个问题在面试中出现的频率非常的高,因此把自己学习过程中的一些理解记录下来,希望能对大家也有帮助. 什么是悲观锁.乐观锁?在java语言里,总有一些名 ...
- ARM汇编1
一. 指令和伪指令 1.1. 指令 a. (汇编)指令是CPU机器指令的助记符,经过编译后会得到一串10组成的机器码,可以由CPU读取执行. 1.2. 伪指令 b. (汇编)伪指令本质上不是指令(只是 ...
- POJ 1383题解（树的直径）（BFS）
题面 Labyrinth Time Limit: 2000MS Memory Limit: 32768K Total Submissions: 4997 Accepted: 1861 Descript ...
- 回溯---Permutations II
47.Permutations II (Medium)](https://leetcode.com/problems/permutations-ii/description/) [1,1,2] hav ...
- C# ASP.NET 手写板并生成图片保存
前端: @{ Layout = null; } <!DOCTYPE html> <html lang="zh-CN"> <head> <t ...
- JCTF 2014 小菜一碟
测试文件:https://static2.ichunqiu.com/icq/resources/fileupload//CTF/JCTF2014/re100 1.准备 获得信息 ZIP文件 Java文 ...
- sqoop简单使用
一,通过sqoop将MySQL里面的数据加载到HDFS 先查看有哪些数据库 查看表person sqoop list-databases --connect jdbc:mysql://ly-p2p4: ...
- 2019-4-21-Roslyn-通过-NuGet-库修改应用程序入口函数
title author date CreateTime categories Roslyn 通过 NuGet 库修改应用程序入口函数 lindexi 2019-4-21 17:37:1 +0800 ...
- 通过进程id找到进程对应的容器并统计每个进程的内存占用写到excel里
# coding=utf-8 import re import os import commands import json import psutil from pyExcelerator impo ...