一、自定义(全局)指令 -- (所以标签都可以使用)
字体颜色闪烁例子源码:
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
二、自定义(局部)指令 -- (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)
外层id="app"的div是Vue实例接管的,里面自定义指令的div是测试效果用的
这里'blink'就是自定义指令 : 后 cc 是参数 .aa.bb 是修饰符 =后""中是指令的值(是表达式不是字符串)
打印的 arguments 中第二个参数是这些的描述信息
3 4 5 参数有待你自己去研究
好了,就到这里,希望对您有所帮助,本篇结束。