指令

一、定义：

指令只一种可以附加到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 }。
  • vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
  • oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

以下是一些指令的使用方法, 以及对应的例子片段.

1、v-xxx

这将实例化一个指令, 但不接受任何参数. 可以通过这种类型的指令对DOM元素做一些操作.

2、v-xxx="value"

这将传递一个值给指令, 并且该指令根据该值计算出要做的操作.

  1. <div v-if="stateExample">I will show up if stateExample is true</div>

3、v-xxx="'string'"

这将把'string'作为一个表达式.

  1. <p v-html="'<strong>this is an example of a string in some text</strong>'"></p>

4、v-xxx:arg="value"

这允许我们传入一个参数给指令.  下面的例子中, 绑定到一个类, 将其样式化为一个对象, 单独存储.

  1. <div v-bind:class="someClassObject"></div>

5、v-example:arg.modifier="value"

使用修饰语.  下面的例子中, 允许在点击事件时, 调用preventDefault().

  1. <button v-on:submit.prevent="onSubmit"></button>

二、注册

指令跟组件一样需要注册才能使用，同样有两种方式，

1）全局注册:

  1. // 注册
  2. Vue.directive('my-directive', {
  3.   bind: function () {},
  4.   inserted: function () {},
  5.   update: function () {},
  6.   componentUpdated: function () {},
  7.   unbind: function () {}
  8. })
  9.  
  10. // 注册（传入一个简单的指令函数）
  11. Vue.directive('my-directive', function () {
  12.   // 这里将会被 `bind` 和 `update` 调用
  13. })
  14.  
  15. // getter，返回已注册的指令
  16. var myDirective = Vue.directive('my-directive')

2）局部注册：

  1. new Vue({
  2. 　　directives:{
  3. 　　　　dirName1:{
  4. 　　　　　　bind: function () {},
  5.                  inserted: function () {},
  6.                  update: function () {},
  7.                  componentUpdated: function () {},
  8.                 unbind: function () {}
  9. 　　　　}，
  10.            dirName2:{
  11. 　　　　　　//定义指令，同理
  12. 　　　　}
  13. 　　}
  14. });
  15. // 注册（传入一个简单的指令函数）
  16. new Vue({
  17. 　　directives:{
  18. 　　　　dirName1: function () {}，
  19.        dirName2: function () {}
  20. 　　}
  21. });

三、自定义指令

1、对象字面量

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

  1. <div v-demo="{ color: 'white', text: 'hello!' }"></div>
  1. Vue.directive('demo', function (el, binding) {
  2.   console.log(binding.value.color) // => "white"
  3.   console.log(binding.value.text)  // => "hello!"
  4. })

2、传参  调用方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <script src="https://unpkg.com/vue/dist/vue.js"></script>
  7.     <script src="https://unpkg.com/element-ui@1.4.0/lib/index.js"></script>
  8.   <style>
  9.      @import url("https://unpkg.com/element-ui@1.4.0/lib/theme-default/index.css");
  10.   </style>
  11.   <style>
  12.     *{
  13.       padding:0px;
  14.       margin:0px;
  15.     }
  16.   </style>
  17. </head>
  18. <body>
  19.   <div id="app">
  20.     <div v-test="fn">my-directive</div>
  21.   </div>
  22. <script>
  23. new Vue({
  24.   el: '#app',
  25.   methods: {
  26.     fn () {
  27.       console.log('test')
  28.       console.log(this)  // vue实例
  29.     }
  30.   },
  31.   directives: {
  32.     'test': {
  33.       bind: function (el, binding) {
  34.         // console.log(el, this, binding.value) // this->window
  35.         binding.value.call(el);
  36.  
  37.         // 同样结果
  38.         // var func = binding.value;
  39.         // func(); // 调用了fn方法
  40.       }
  41.     }
  42.   }
  43. })
  44. </script>
  45. <style>
  46. </style>

3、传参 调用方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue API</title>
  6.     <style>
  7.     [v-cloak] { display: none; }
  8.     input { border: 1px solid #eee; }
  9.     </style>
  10. </head>
  11.  
  12. <body>
  13.     <div id='test' v-cloak>
  14.         <div v-test="{methodsF: fail1, methodsS: succ1, input_value: value}">
  15.             <span>{{value}}</span>
  16.             <input type="text" v-model="value">
  17.         </div>
  18.         <div v-test="{methodsF: fail2, methodsS: succ2, input_value: value2}">
  19.             <span>{{value2}}</span>
  20.             <input type="text" v-model="value2">
  21.         </div>
  22.     </div>
  23.  
  24.     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
  25.     <script>
  26.         Vue.directive('test', {
  27.             bind: function(el, binding) { // el是绑定指令的元素
  28.                 var value = binding.value; // 传递给指令的值
  29.                 console.log(value)
  30.                 el.handlerFail = function () { // This directive.handler
  31.                value.methodsF.call(this);
  32.                 };
  33.                 el.handlerSucc = function () { // This directive.handler   this-->el, value.methodsS
  34.                     value.methodsS.call(this);
  35.                 };
  36.  
  37.                 el.getElementsByTagName('input')[0].addEventListener('blur', function () {
  38.                     checkout(el.getElementsByTagName('input')[0].value);
  39.                 });
  40.  
  41.                 function checkout (value) {
  42.                     var filter = /^1[358]\d{9}$/;
  43.                     if (!filter.test(value)) {
  44.                         el.handlerFail()
  45.                     }else{
  46.                         el.handlerSucc()
  47.                     }
  48.                 }
  49.             }
  50.         })
  51.         var demo = new Vue({
  52.             el: '#test',
  53.             data: function() {
  54.                 return {
  55.                     value: '',
  56.                     value2: ''
  57.                 }
  58.             },
  59.             methods: {
  60.                 fail1: function() {
  61.                     // alert('触发外部fn')
  62.                     console.log(this)
  63.                     console.log('手机号码格式不正确！')
  64.                 },
  65.                 succ1: function() {
  66.                     // alert('触发外部fn')
  67.                     console.log('1格式正确！')
  68.                 },
  69.                 fail2: function() {
  70.                     // alert('触发外部fn')
  71.                     console.log('手机2号码格式不正确！')
  72.                 },
  73.                 succ2: function() {
  74.                     // alert('触发外部fn')
  75.                     console.log('2格式正确！')
  76.                 }
  77.             }
  78.         });
  79.     </script>
  80. </body>
  81. </html>
  1.  

vue2.0  之 directive指令 (自定义)的更多相关文章

  1. vue2.0中v-on绑定自定义事件

    vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 ...

  2. vue2.0中v-on绑定自定义事件的理解

    vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 ...

  3. vue2.0在页面中自定义组件模块，以及页面与组件之间的数据传递

    1,在初始文件index.html中加入要引入的模块,注意驼峰命名的方式(我就是没写成驼峰,报错) <!DOCTYPE html> <html> <head> &l ...

  4. vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案

    在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: 比如下面的代码,div.descBox里面的p标签的color样式并不是"color: blue" ...

  5. vue2.0自定义指令

    前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...

  6. vue2.0变化

    之前有很多的vue知识总结都是围绕1.0版本实现的,下面主要总结一下2.0相对于1.0的一些变化. 组件定义 在vue1.0中,我们有使用vue.extend()来创建组件构造器继而创建组件实例,如下 ...

  7. Vue2.0 【第二季】第1节 Vue.directive自定义指令

    目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...

  8. Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

  9. Vue2.0 - 自定义指令 vue-directive

    Vue.directive('指令',function(el,binding,vnode){ el.style='color:'+binding.value;}); el : 指令所绑定的元素,可以用 ...

随机推荐

  1. Java 统计单词频数

    输出单个文件中的 N 个英语单词出现的次数 定义双列集合,将单词不重复的读入一列中,另一列用来计数 import java.io.BufferedReader; import java.util.Ar ...

  2. Java数据结构与算法(3):队列

    队列也是一种表,不同的是队列在一端进行插入而在另一端进行删除. 队列模型 队列的基本操作包括入队.出队操作.在表的末端插入元素,在表的开头删除元素,即先进先出(FIFO). 队列的数组实现 对于每一个 ...

  3. MySQL与MongoDB的不同

    数据存放的巨大不同

  4. ArrayDeque 源码分析

    ArrayDeque ArrayDeque 能解决什么问题?什么时候使用 ArrayDeque? 1)Deque 接口大小可变的循环数组实现,ArrayDeque 没有容量限制并会按需增长. 2)Ar ...

  5. Celery多任务结构

    视图结构 pro_cel ├── celery_task# celery相关文件夹 │ ├── celery.py # celery连接和配置相关文件,必须叫这个名字 │ └── tasks1.py ...

  6. java.lang.NoClassDefFoundError: com/opensymphony/xwork2/util/finder/DefaultClassFinder$InfoBuildingV 解决方法

    问题:严重: Unable to read class [com.spml.action.AddUserAction]java.lang.NoClassDefFoundError: com/opens ...

  7. Delphi XE2 之 FireMonkey 入门(24) - 数据绑定: TBindingsList: TBindExpression.Direction

    在学习 BindingSource 属性时, 可以让两个控件互为绑定源; TBindExpression 对应的功能是 Direction 属性. 先在窗体上添加 Edit1.Edit2.Bindin ...

  8. 阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第5节 final关键字_1_final关键字概念与四种用法

    英文的含义和程序中的含义是相同的.最终的,不可改变的

  9. XML读写工具类

    摘要:①读取XML文件,生成pojo对象:②将对象信息保存到xml中. 步骤: ①新建一个普通的java类BasePage: package com.test.selenium.pages; impo ...

  10. Delphi 跨单元进入(访问)类的私有成员，protected ,private部分

    http://blog.sina.com.cn/s/blog_5f8861b60102v1nl.html Delphi 跨单元进入(访问)类的私有成员,protected ,private部分 (20 ...