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的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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
php4的session功能评述(一)
2006/10/09 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
JS Timing
2007/04/21 Javascript
jquery之Document元素选择器篇
2008/08/14 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
Python fileinput模块使用实例
2015/06/03 Python
分享Python文本生成二维码实例
2016/01/06 Python
Python 类的继承实例详解
2017/03/25 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python调用百度REST API实现语音识别
2018/08/30 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
关于梦想的演讲稿
2014/05/05 职场文书
2015党建工作简报
2015/07/21 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
七年级上册生物的课件
2019/08/07 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB