vue2.0 之 directive指令 (自定义)
指令
一、定义：
指令只一种可以附加到DOM元素的微命令(tiny commands). 它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来控制一些行为, 它们通常很有用.
五个钩子函数：
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。unbind: 只调用一次， 指令与元素解绑时调用。
各函数都有参数，以下是官方提供的几个参数：
- el: 指令所绑定的元素，可以用来直接操作 DOM 。
- binding: 一个对象，包含以下属性：
- name: 指令名，不包括
v-前缀。 - value: 指令的绑定值， 例如：
v-my-directive="1 + 1", value 的值是2。 - oldValue: 指令绑定的前一个值，仅在
update和componentUpdated钩子中可用。无论值是否改变都可用。 - expression: 绑定值的字符串形式。 例如
v-my-directive="1 + 1"， expression 的值是"1 + 1"。 - arg: 传给指令的参数。例如
v-my-directive:foo， arg 的值是"foo"。 - modifiers: 一个包含修饰符的对象。 例如：
v-my-directive.foo.bar, 修饰符对象 modifiers 的值是{ foo: true, bar: true }。
- name: 指令名，不包括
- vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
- oldVnode: 上一个虚拟节点，仅在
update和componentUpdated钩子中可用。
以下是一些指令的使用方法, 以及对应的例子片段.
1、v-xxx
这将实例化一个指令, 但不接受任何参数. 可以通过这种类型的指令对DOM元素做一些操作.
2、v-xxx="value"
这将传递一个值给指令, 并且该指令根据该值计算出要做的操作.
<div v-if="stateExample">I will show up if stateExample is true</div>
3、v-xxx="'string'"
这将把'string'作为一个表达式.
<p v-html="'<strong>this is an example of a string in some text</strong>'"></p>
4、v-xxx:arg="value"
这允许我们传入一个参数给指令. 下面的例子中, 绑定到一个类, 将其样式化为一个对象, 单独存储.
<div v-bind:class="someClassObject"></div>
5、v-example:arg.modifier="value"
使用修饰语. 下面的例子中, 允许在点击事件时, 调用preventDefault().
<button v-on:submit.prevent="onSubmit"></button>
二、注册
指令跟组件一样需要注册才能使用，同样有两种方式，
1）全局注册:
// 注册
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
}) // 注册（传入一个简单的指令函数）
Vue.directive('my-directive', function () {
// 这里将会被 `bind` 和 `update` 调用
}) // getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')
2）局部注册：
new Vue({
directives:{
dirName1:{
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
}，
dirName2:{
//定义指令，同理
}
}
});
// 注册（传入一个简单的指令函数）
new Vue({
directives:{
dirName1: function () {}，
dirName2: function () {}
}
});
三、自定义指令
1、对象字面量
如果指令需要多个值，可以传入一个 JavaScript 对象字面量。
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
2、传参 调用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@1.4.0/lib/index.js"></script>
<style>
@import url("https://unpkg.com/element-ui@1.4.0/lib/theme-default/index.css");
</style>
<style>
*{
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<div id="app">
<div v-test="fn">my-directive</div>
</div>
<script>
new Vue({
el: '#app',
methods: {
fn () {
console.log('test')
console.log(this) // vue实例
}
},
directives: {
'test': {
bind: function (el, binding) {
// console.log(el, this, binding.value) // this->window
binding.value.call(el); // 同样结果
// var func = binding.value;
// func(); // 调用了fn方法
}
}
}
})
</script>
<style>
</style>
3、传参 调用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue API</title>
<style>
[v-cloak] { display: none; }
input { border: 1px solid #eee; }
</style>
</head> <body>
<div id='test' v-cloak>
<div v-test="{methodsF: fail1, methodsS: succ1, input_value: value}">
<span>{{value}}</span>
<input type="text" v-model="value">
</div>
<div v-test="{methodsF: fail2, methodsS: succ2, input_value: value2}">
<span>{{value2}}</span>
<input type="text" v-model="value2">
</div>
</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<script>
Vue.directive('test', {
bind: function(el, binding) { // el是绑定指令的元素
var value = binding.value; // 传递给指令的值
console.log(value)
el.handlerFail = function () { // This directive.handler
value.methodsF.call(this);
};
el.handlerSucc = function () { // This directive.handler this-->el, value.methodsS
value.methodsS.call(this);
}; el.getElementsByTagName('input')[0].addEventListener('blur', function () {
checkout(el.getElementsByTagName('input')[0].value);
}); function checkout (value) {
var filter = /^1[358]\d{9}$/;
if (!filter.test(value)) {
el.handlerFail()
}else{
el.handlerSucc()
}
}
}
})
var demo = new Vue({
el: '#test',
data: function() {
return {
value: '',
value2: ''
}
},
methods: {
fail1: function() {
// alert('触发外部fn')
console.log(this)
console.log('手机号码格式不正确！')
},
succ1: function() {
// alert('触发外部fn')
console.log('1格式正确！')
},
fail2: function() {
// alert('触发外部fn')
console.log('手机2号码格式不正确！')
},
succ2: function() {
// alert('触发外部fn')
console.log('2格式正确！')
}
}
});
</script>
</body>
</html>
vue2.0 之 directive指令 (自定义)的更多相关文章
- vue2.0中v-on绑定自定义事件
vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 ...
- vue2.0中v-on绑定自定义事件的理解
vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 ...
- vue2.0在页面中自定义组件模块，以及页面与组件之间的数据传递
1,在初始文件index.html中加入要引入的模块,注意驼峰命名的方式(我就是没写成驼峰,报错) <!DOCTYPE html> <html> <head> &l ...
- vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案
在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: 比如下面的代码,div.descBox里面的p标签的color样式并不是"color: blue" ...
- vue2.0自定义指令
前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...
- vue2.0变化
之前有很多的vue知识总结都是围绕1.0版本实现的,下面主要总结一下2.0相对于1.0的一些变化. 组件定义 在vue1.0中,我们有使用vue.extend()来创建组件构造器继而创建组件实例,如下 ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- Vue2.0 - 自定义指令 vue-directive
Vue.directive('指令',function(el,binding,vnode){ el.style='color:'+binding.value;}); el : 指令所绑定的元素,可以用 ...
随机推荐
- es关闭不使用的index、真正删除文档
因为只要索引处于open状态,就会占用内存+磁盘: 如果将索引close,只会占用磁盘 Curl -XPOST ‘hadoop01:9200/index/_close’ ------ 在es中删除文档 ...
- windows 下的定时任务 (原)
linux 下的定时任务是crontab 以前都是linux的定时任务,这次在windows做了定时任务,简单记录一下(win8 跟 win10为例) windows 2008下的定时任务配置: 控制 ...
- UVALive 6858 Frame （模拟）
Frame 题目链接: http://acm.hust.edu.cn/vjudge/contest/130303#problem/D Description http://7xjob4.com1.z0 ...
- 在阿里云虚拟主机上部署Laravel
拿laravel5.1来说: 在根目录下创建一个local文件夹,把网站根目录下除了public文件夹以外所有文件及文件夹剪切到local文件夹中 然后把public文件夹下的所有文件剪切到网站根目录 ...
- java配置环境变量 jdk1.8
1.首先第一步安装JDK window系统安装java 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwork/java/j ...
- 国内npm镜像使用方法
npm全称Node Package Manager,是node.js的模块依赖管理工具.由于npm的源在国外,所以国内用户使用起来各种不方便.下面整理出了一部分国内优秀的npm镜像资源,国内用户可以选 ...
- postgresql源码编译安装（centos）
centos6.8安装postgresql-9.6.8 一.环境 centos6.8 postgresql-9.6.8 二.准备工作 虚拟机可以连接外网 三.先安装make,gcc,gcc-c++,r ...
- 尚硅谷Docker---1-5、docker简介
尚硅谷Docker---1-5.docker简介 一.总结 一句话总结: docker是环境打包:有点像windows镜像 docker的实质:缩小版.精细版.高度浓缩版的一个小型的linux系统 1 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第5节 String类_4_字符串的比较相关方法
字符串的常用方法 equals是对内容的比较 直接用字符串.equals 小写的h和大写的H肯定是不一样的 推荐和不推荐的写法 运行程序不会报任何的错误 如果把str5设置为null.那么推荐的写法返 ...
- dataframe指定位置插入行
1 loc( ) 函数可以定位行后,并直接赋值插入. 如下可见loc函数对直接改变原来行的值 df = pd.DataFrame({ '动物' : ['狗','猫','兔'], '数量' : [ 3, ...