根据上一篇博客的内容,我们可以很容易的写出设置颜色的指令:
Vue.directive('color', {
bind: function (el) {
el.style.color = 'red';
}
});
现在我们来分析一下为什么这里用bind,而上一篇博客中用的inserted。
设置样式的时候,我们不用关心style有没有被插入到DOM中,我们把样式交给DOM元素,只要DOM被浏览器的渲染引擎解析,自然就会解析在DOM身上的样式,显示在页面上时自然会把样式应用起来。在上一篇博客中,focus是一种js行为,只有加载到DOM中才会获取到焦点,而只加载到内存中是没有意义的。元素从内存渲染到页面上才会获得焦点。
样式只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素肯定有了一个内联的样式,将来元素肯定会显示到页面中,这时候,浏览器的渲染引擎必然会解析样式,应用给这个元素。
和JS行为有关的操作,最好在 inserted中去执行,防止 JS行为不生效;和样式相关的操作,一般都可以在bind执行。
参考文档: 自定义指令 — Vue.js