Vue笔记分享——自定义指令

一、自定义(全局)指令 -- (所以标签都可以使用)

字体颜色闪烁例子源码:

Vue.directive("blink", {
    inserted(el) {
        let bol = true;
        setInterval(function () {
            el.style.color = bol ? "red" : "green";
            bol = !bol;
        }, 100);
    }
});

分析:

Vue — 构造函数
directive — Vue属性'指令'意思
blink — 想创建的指令名
{...} — 插入的方法(想实现的效果)

参数有5个,这里只引用一个 el 代表加 v-blink 的标签,以下打印的 arguments
image.png

二、自定义(局部)指令 -- (Vue实例接管的标签可以使用)

字体颜色闪烁例子源码:

var vm2 = new Vue({
    el: "#app2",
    directives: {
        "blink": {
            inserted(el) {
                let bol = true;
                setInterval(function () {
                    el.style.color = bol ? "red" : "green";
                    bol = !bol;
                }, 100);
            }
        }
    }
});

分析:

外壳都清楚,主要看 directives(指令) 中的方法
对象中 
  "blink" — 想创建的指令名
  后面同上方法

三、笔记(不知道起什么标题了O(∩_∩)O)

image.png

image.png

外层id="app"的div是Vue实例接管的,里面自定义指令的div是测试效果用的

这里'blink'就是自定义指令 : 后 cc 是参数 .aa.bb 是修饰符 =后""中是指令的值(是表达式不是字符串)

打印的 arguments 中第二个参数是这些的描述信息

3 4 5 参数有待你自己去研究

好了,就到这里,希望对您有所帮助,本篇结束。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。