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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
如何使用Javascript中的this关键字
May 28 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数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
Jquery 扩展方法
2010/05/06 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
python3中确保枚举值代码分析
2020/12/02 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
质量工程师岗位职责
2013/11/16 职场文书
医学类导师推荐信范文
2013/11/19 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
简单租房协议书
2014/10/21 职场文书
2014年班组长工作总结
2014/11/20 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书