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是指定义对象。其中，定义对象可以提供一些钩子函数。

钩子函数

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

钩子函数 描述
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 编译生成的虚拟节点。
  • 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>

运行截图： 

使用钩子函数参数的例子

下面将讲解一个使用钩子函数参数的例子，将元素的字体色设置为#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>

运行截图： 

对象字面量

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

<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>

运行截图： 

字面指令

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

vue2.0 自定义指令的更多相关文章

  1. vue2.0自定义指令

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

  2. vue2.0自定义指令的使用方法

    感觉2.0好坑啊,自定义指令和1.0完全不一样,并且文档写得也不太清晰,下面是我写得一个demo,希望帮助大家更好地理解自定义指令 <!DOCTYPE html> <html lan ...

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

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

  4. vue2.0 自定义指令详解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

    因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...

  6. vue3.0自定义指令（drectives)

    在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能 ...

  7. vue2.0 v-model指令

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. vue2.0 自定义过滤器

    2.0中已经废弃了过滤器,需要我们自定义 <div id="app"> {{message|uppercase}} </div> //过滤器 Vue.fil ...

  9. vue2.0 自定义 提示框（Toast）组件

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...

随机推荐

  1. day03_02 Python版本的选择

    总结:python2.x是遗产(过时),python3.x是现在和未来的语言 In summary : Python 2.x is legacy, Python 3.x is the present ...

  2. python-网络编程-01

    我们常说的计算机网络通信,值得是两台,或者多台计算机间,进行数据传输. 从计算机网络发展至今,人们使用了很多协议,但是最常用的还是tcp/ip协议,实际上这是一组协议. 当然使用python做网络编程 ...

  3. Shape，expand_dims，slice基本用法

    import tensorflow as tf t = tf.constant([[[1, 1, 1], [2, 2, 2]], [[3, 3, 3], [4, 4, 4]], [[5, 5, 5], ...

  4. php rabbitmq操作类及生产者和消费者实例代码 转

    注意事项: 1.accept.php消费者代码需要在命令行执行 2.'username'=>'asdf','password'=>'123456' 改成自己的帐号和密码 RabbitMQC ...

  5. C++中使用Curl和JsonCpp调用有道翻译API实现在线翻译

    使用C++开发一个在线翻译工具,这个想法在我大脑中过了好几遍了,所以就搜了下资料,得知网络上有很多翻译API,这里我选择我平时使用较多的有道翻译API进行在线翻译工具开发的练习.翻译API返回的结果常 ...

  6. 【Luogu】P3761城市（dfs）

    题目链接 emmm我思维好水…… 想了一会lct发现好像不对,然后开始转DP稍微有一点思路,然后看了题解…… 首先可以枚举边,然后原树被你拆成了两个子树. 设D1D2是两个子树的直径,W1W2是子树内 ...

  7. LibreOJ2042 - 「CQOI2016」不同的最小割

    Portal Description 给出一个给出一个\(n(n\leq850)\)个点\(m(m\leq8500)\)条边的无向图.定义\(cut(s,t)\)等于\(s,t\)的最小割的容量,求在 ...

  8. VCO的配置方法

    弄了个VCO的环境. 感觉有点儿麻烦,配乱七八糟的服务,弄完了SE也不试试,白弄了.最近又有人说这东西要试试. 我先简单记录下吧: 1. 在vCenter Server 下开启SSO,设置密码. 2. ...

  9. java面试题之Error和Exception的区别

    从概念角度分析: Error:程序无法处理的系统错误,编译器不做检查: Exception:程序可以处理的异常,捕获后可能恢复: 总结:前者是程序无法处理的错误,后者是可以处理的异常. 从责任角度分析 ...

  10. PHP中的验证码类（验证码功能设计之二）

    运行结果: <!--vcode.class.php内容--> <?php class Vcode { private $width; //宽 private $height; //高 ...