一、自定义(全局)指令 -- (所以标签都可以使用)
字体颜色闪烁例子源码:
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