Vue.directive使用注意

2019-10-19 16:35:45

参考地址 Vue.directive使用注意

首先,Vue.directive要在实例初始化之前,不然会报错,还有,定义的指令不支持驼峰式写法,也会报下面同样的错,虽然在源码中没有找到在哪里统一处理大小写,但是在有关directive的方法中捕捉到的指令命名统一变为小写,所以,还是用'-'或者'_'分割吧。

vue.js:491 [Vue warn]: Failed to resolve directive: xxx

然后,其定义方式有两种,一种是Vue.directive('xxx', function(el, bind, vNode){}),其中el为dom,vNode为vue的虚拟dom,bind为一较复杂对象,详情可见Vue-directive钩子函数中的参数的参数,还有一种,为

Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

参数代表的含义,参见钩子函数描述

最后,要使用自定义的指令,只需在对用的元素中,加上'v-'的前缀形成类似于内部指令'v-if','v-text'的形式。

// Vue.directive
            Vue.directive('test_directive', function(el, bind, vNode){
                el.style.color = bind.value;
            });            var app = new Vue({
                el: '#app',
                data: {
                    num: 10,
                    color: 'red'
                },
                methods: {
                    add: function(){                        this.num++;
                    }
                }
            });

当然,也可以将method中的方法加入,bind.value即为methods中的方法。

<div id="app">
            <div v-test_directive="changeColor">{{num}}</div>
            <button @click="add">增加</button>
        </div>

        <script type="text/javascript">
            // Vue.directive
            Vue.directive('test_directive', function(el, bind, vNode){
                el.style.color = bind.value();
            });            var app = new Vue({
                el: '#app',
                data: {
                    num: 10,
                    color: 'red'
                },
                methods: {
                    add: function(){                        this.num++;
                    },
                    changeColor: function(){                        return this.color;
                    }
                }
            });

这种形式,可以模仿'v-once',并进行一定的复杂逻辑,但是想要完全达到'v-once',可能需要考虑Vue-directive的钩子函数各个周期。下面是固定num的值,使得add的方法无效。

<div id="app">
            <div v-test_directive="changeColor">{{num}}</div>
            <button @click="add">增加</button>
        </div>

        <script type="text/javascript">
            // Vue.directive
            Vue.directive('test_directive', function(el, bind, vNode){
                el.style.color = bind.value();
            });            var app = new Vue({
                el: '#app',
                data: {
                    num: 10,
                    color: 'red'
                },
                methods: {
                    add: function(){                        this.num++;
                    },
                    changeColor: function(){                        this.num = 20;                        return this.color;
                    }
                }
            });

因为小生刚刚接触vue,所以,希望前辈能多加指点。


  • 2020-01-08 22:03:07

    修改MAC系统下默认PHP版本

    今天在使用mac时遇到了一个问题,因为需要composer拉取laravel5.6,但是提示我php版本过低,但是我本人使用的是集成环境MAMP,已经切换了php7.2的版本,这个为什么没有生效呢?经检查是因为composer检测得是mac下环境变量生效的php版本

  • 2020-01-08 23:37:08

    laravel通过图片流返回图片

    我用laravel的字母头像生成框架Laravolt\Avatar生成的base64头像,但我想做个通用但,直接返回图片,我还是根据以往但经验 改写header但返回值为图片返回值,结果返回失败,一堆乱吗,不知道为啥。 后来用了laravel自带但返回图片但方法,结果ok。记录下

  • 2020-01-08 23:45:06

    laravel response 对象一些常用功能点

    通常,我们并不只是从路由动作简单返回字符串和数组,大多数情况下,都会返回一个完整的 Illuminate\Http\Response 实例或 视图。

  • 2020-01-08 23:49:13

    laravel 存储base64格式图片

    一、总结 一句话总结: 二、laravel存储64位图片实例 三、laravel 存储前端上传base64图片 四、php将base64字符串转换为图片

  • 2020-01-09 01:24:28

    mac安装ImageMagick与PHP扩展Imagick

    mac安装ImageMagick和php7.2扩展Imagick,从网上搜索教程,感觉好少,有的教程看起来也很麻烦,不过安装起来,没想到竟然如此简单。不非纯灰之力。

  • 2020-01-09 18:49:17

    pecl安装卸载模块,如何自动配置php.ini

    利用pecl安装php模块,可能需要手工配置php.ini,以加载或禁止相关模块。那么pecl install是不是可以自动配置php.ini呢?答案是肯定的。在pecl isntall的提示信息中,苏南大叔找到了下面的类似提示信息:configuration option "php_ini" is not set to php.ini location。这个设置点,就是本文的关键所在。设置好"php_ini"之后,pecl就可以自动修改php.ini中的extension=了。