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 : 指令所绑定的元素,可以用 ...
随机推荐
- Kaggle 入门资料
kaggle入门之如何使用 - CSDN博客 http://blog.csdn.net/mdjxy63/article/details/78221955 kaggle比赛之路(一) -- 新手注册账号 ...
- TCP报文段首部格式详解
TCP首部格式 格式字段详解 源端口.目标端口: 计算机上的进程要和其他进程通信是要通过计算机端口的,而一个计算机端口某个时刻只能被一个进程占用,所以通过指定源端口和目标端口,就可以知道是哪两 ...
- firefox的group群组功能很好!
================================ /usr/share/themes中有一些主题,包括: adwaita: 阿德维塔, 不二论 anaconda等等. 计算机环境: f ...
- tikz: keep in mind these
don't add % in title, xlabel, ylabel etc., use \%
- jmeter_linux下运行
1 先把jmeter上传到linux,解压后配置环境变量(/etc/profile) 2 把在Windows上面做好的脚本上传到linux上面(linux下运行jmeter是在jmeter的bin目录 ...
- day63—JavaScript浏览器对象cookie
转行学开发,代码100天——2018-05-18 今天的主要学内容时JavaScript中浏览器对象——cookie. cookie用于存储web页面的用户信息,其存储容量很小,一般几k左右.如常见的 ...
- fiddler模拟弱网操作
弱网是app测试需要覆盖的一种场景 目录 1.认识弱网 2.fiddler模拟弱网配置 3.弱网下可能发生的问题 1.认识弱网 弱网.2G.3G建议的上下行速率如下,同时还可以控制丢包率的数据 网络 ...
- python 设置开机启动脚本
1.创建python_auto.bat的快捷方式,放入启动项: C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\ ...
- OpenResty json 删除转义符
OpenResty 中删除 json 中的转义符 cjson 在 encode 时 “/” 会自动添加转义符 “\”: 在 decode 时也会自动将转义符去掉.工作中有个特殊需求,需要手工删除转义 ...
- Nginx基本属性配置
Nginx基本属性配置 1.找到安装目录下conf 文件下的nginx.conf文件 通过 Notepad++打开进行 属性配置 image ==> image 2.worker_pro ...