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 相关文章推荐
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 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中eclipse 用空格替换 tab键
2013/06/24 PHP
php向js函数传参的几种方法
2014/08/10 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
JavaScript使用cookie
2007/02/02 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
python中类的一些方法分析
2014/09/25 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
python numpy中cumsum的用法详解
2019/10/17 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
软件测试有哪些?什么是配置项?
2012/02/12 面试题
煤矿安全生产责任书
2014/04/15 职场文书
企业年会祝酒词
2015/08/11 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书