Vue自定义指令介绍(2)


Posted in Javascript onDecember 08, 2016

Vue指令

Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为。

例如:

<h1 v-if="yes">Yes</h1>

其中,v-是Vue的标识,if是指令ID,yes是expression。yes是MVVM中的VM即ViewModel,当它的值发生变化,就会触发指令,改变View视图的显示。

expression还可以使用内联的模式,任何依赖的属性发生变化时都会触发指令的执行。如:

<h1 v-if="'yes '+ user.name + ', ' + time"></h1>

可以使用逗号分割多重指令,如:

<div v-on="click:onClick, keyup:onKeyup, keydown:onKeydown"></div>

Vue自定义指令

自定义指令语法

Vue自定义指令语法如下:

Vue.directive(id, definition)

传入的两个参数,id是指指令ID,definition是指定义对象。其中,定义对象可以提供一些钩子函数。

钩子函数

定义对象的钩子函数如下:

Vue自定义指令介绍(2)

钩子函数参数

定义对象的钩子函数参数如下:

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 }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

使用例子

Vue自定义指令常见使用例子如下:

Vue.directive('my-directive', {
 bind: function(){
 //做绑定的准备工作
 //比如添加事件监听器,或是其他只需要执行一次的复杂操作
 },
 inserted: function(){
 //...
 },
 update: function(){
 //根据获得的新值执行对应的更新
 //对于初始值也会调用一次
 },
 componentUpdated: function(){
 //...
 },
 unbind: function(){
 //做清理操作
 //比如移除bind时绑定的事件监听器
 }
})

当指令的定义对象中只使用update时,只需直接传入函数即可,如下:

Vue.directive('my-directive', function(){
 //...
})

一个简单示例

下面将讲解一个简单的例子,当页面加载时,input输入框将自动聚焦。
代码如下:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 </head>
 <body>
 <div id="app">
  <input v-focus>
 </div>
 <script>
  //注册一个全局自定义指令v-focus
  Vue.directive('focus', {
  // 当绑定元素插入到DOM中
  inserted: function (el) {
  // 聚焦元素
  el.focus()
  }
  });
  var app = new Vue({
  el: '#app'
  });
 </script>
 </body>
</html>

运行截图:

Vue自定义指令介绍(2)

使用钩子函数参数的例子

下面将讲解一个使用钩子函数参数的例子,将元素的字体色设置为#fff,将背景色设置为传入指令的参数red,并将指令名,指令绑定值,指令绑定值的表达式,传入指令的参数显示在<div>中。
代码如下:

<!DOCTYPE html>
<html>
 <head lang="en">
 <meta charset="utf-8">
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 </head>
 <body>
 <div id="hook-arguments-example" v-demo-directive:red="message"></div>
 <script>
 Vue.directive('demoDirective', {
  bind: function(el, binding, vnode){
  el.style.color = '#fff'
  el.style.backgroundColor = binding.arg
  el.innerHTML = 
   '指令名name - ' + binding.name + '<br>' +
   '指令绑定值value - ' + binding.value + '<br>' +
   '指令绑定表达式expression - ' + binding.expression + '<br>' +
   '传入指令的参数argument - ' + binding.arg + '<br>'
  },
 });
 var demo = new Vue({
  el: '#hook-arguments-example',
  data: {
  message: 'hello!'
  }
 })
 </script>
 </body>
</html>

运行截图:

Vue自定义指令介绍(2)

对象字面量

同一个特性内部,逗号分隔的多个从句被绑定为多个指令实例。如,下例中指令被创建和调用了两次:

<div v-demo="color: 'white', text: 'hello'"></div>

如果指令需要多个值,可以传入一个JavaScript对象字面量。如:

<!DOCTYPE html>
<html>
 <head lang="en">
 <meta charset="UTF-8">
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 </head>
 <body>
 <div id="hook-arguments-example" v-demo-directive="{ color: 'white', text: 'hello!' }"></div>
 <script>
 Vue.directive('demoDirective', function(el, binding, vnode){
  console.log(binding.value.color);
  console.log(binding.value.text);
 });
 var demo = new Vue({
  el: '#hook-arguments-example'
 })
 </script>
 </body>
</html>

运行截图:

Vue自定义指令介绍(2)

字面指令

若在创建自定义指令时,设置isLiterral: true,则特性值被视作字符串,并赋给该指令的expression,字面指令不会建立数据监视。

参考链接

Vue.js教程 (2) : 指令 Directives
Vue.JS入门篇?自定义指令
vue.js笔记——指令

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
理解javascript中的闭包
Jan 11 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
微信小程序入门之绘制时钟
Oct 22 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 #Javascript
解析利用javascript如何判断一个数为素数
Dec 08 #Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 #Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 #Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 #Javascript
浅谈JavaScript的闭包函数
Dec 08 #Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 #Javascript
You might like
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
python实现的发邮件功能示例
2019/09/11 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
判断单链表中是否存在环
2012/07/16 面试题
优秀大学生职业生涯规划书
2014/02/27 职场文书
计算机实训报告总结
2014/11/05 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
心灵捕手观后感
2015/06/02 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
幼儿园小班教学反思
2016/03/03 职场文书