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 : 指令所绑定的元素,可以用 ...
随机推荐
- 运行job检验单元测试覆盖率
http://ns.jenkins.baidu.com/user/anyixing/my-views/view/Map_ut/job/poi-zhunru/ 1在http://ns.jenkins.b ...
- CruiseControl.NET配置
CruiseControl.NET简介 CruiseControl.NET是.net平台下,一个开源的自动化持续集成工具. 它是一个程序套件,但其核心是一个叫做CruiseControl.NET Se ...
- Linux中退出循环命令
[root@a ~]#cat break.sh #!/bin/bash while : #其中“:”表示while循环的条件永远为真的意思 do read -p "Enter a numbe ...
- /etc/init.d# ./redis-server start
root@ubuntu:/etc/init.d# ll total drwxr-xr-x root root May : ./ drwxr-xr-x root root May : ../ -rwxr ...
- MongoDB学习【一】—MongoDB简介和安装
一.MongoDB简介 1.MongoDB是什么 MongoDB是一款强大.灵活.且易于扩展的通用型数据库,MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的 ...
- [Forward]C++ Properties - a Library Solution
orig url: https://accu.org/index.php/journals/255 roperties are a feature of a number of programming ...
- winform控件CxFlatUI
CxFlatUI https://github.com/HuJinguang/CxFlatUI 当前控件 AlertBox Button CheckBox DatePicker GroupBox ...
- 查询SQL Server数据库所有表字段备注
SELECT 表名 = case when a.colorder=1 then d.name else '' end, 表说明 = case when a.colorder=1 then isnull ...
- Smashing Nodejs 读书笔记（二）
了不起的Node.js:将JavaScript进行到底 书名:SMASHING Node.js : JavaScript Everywhere 原作者:(美)劳奇 Rauch.G 译者:赵静 出版日期 ...
- tbox新增stackless协程支持
tbox之前提供的stackfull协程库,虽然切换效率已经非常高了,但是由于每个协程都需要维护一个独立的堆栈, 内存空间利用率不是很高,在并发量非常大的时候,内存使用量会相当大. 之前考虑过采用st ...