自定义指令
当需要对普通DOM元素进行底层操作时,可以考虑自定义指令来实现。
语法: Vue.directive(指令名,配置对象)。
当需要对普通DOM元素进行底层操作时,可以考虑自定义指令来实现。
语法: Vue.directive(指令名,配置对象)。
1.创建全局指令 特点:可以在任意不同的实例对象挂载的范围进行使用
Vue.directive('highlight', { bind(el, binding) { console.log(el, binding); el.style.background = 'red'; el.onmouseover = function () { this.style.background = binding.value; }; el.onmouseout = function () { this.style.background = ''; }; }, // 指令所绑定的值, 再次改变的时候, 才会触发 update(el, binding){ console.log(el, binding); el.style.background = 'red'; el.onmouseover = function () { this.style.background = binding.value; }; el.onmouseout = function () { this.style.background = ''; }; } });
2.创建局部指令 特点:在指定的实例对象挂载范围内使用
directives: { useless: { // 需要访问该指令所绑定元素的父级,必须要在inserted钩子中. bind(el, binding) { // 输出的结果为:null console.log('bind:', el, el.parentElement); }, inserted(el, binding) { // 输出的结果为:app标签, 即对应的父级标签 console.log('inserted:', el, el.parentElement); if (binding.value === true) { el.parentElement.removeChild(el); } } }, focus: { // 指令的定义 inserted: function (el) { el.focus() } } }
参考代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app" style="width: 500px;margin: auto;border-bottom: 1px solid black"> <input type="text" v-focus> <h1 v-highlight="color">鼠标移入该标签时,标签高亮显示</h1> <button @click="color = 'pink'">改变color的值,鼠标移入h1标签查看效果改变</button> <div v-useless="false"> <h3>娱乐头条</h3> <p>二本毕业生简历直接被扔进垃圾箱</p> </div> </div> <div id="app2" style="width: 500px;margin: auto;border-bottom: 1px solid black"> <p v-highlight="'yellow'">鼠标移入该标签时,标签高亮显示</p> </div> <p v-highlight="'yellow'" style="width: 500px;margin: auto;">不在任何实例中,不能使用全局指令,便不会有自定义指令的高亮效果</p> </body> </html> <script> /* *自定义指令 * 当需要对普通DOM元素进行底层操作时,可以考虑自定义指令来实现 * 语法: Vue.directive(指令名,配置对象); */ // 1.创建全局指令(特点:可以在任意不同的实例对象挂载的范围进行使用) Vue.directive('highlight', { bind(el, binding) { console.log(el, binding); el.style.background = 'red'; el.onmouseover = function () { this.style.background = binding.value; }; el.onmouseout = function () { this.style.background = ''; }; }, // 指令所绑定的值, 再次改变的时候, 才会触发 update(el, binding){ console.log(el, binding); el.style.background = 'red'; el.onmouseover = function () { this.style.background = binding.value; }; el.onmouseout = function () { this.style.background = ''; }; } }); // 注意:当bind和update中的操作一致时,而且不关心其他钩子,便可以使用下面的简写方式 Vue.directive('highlight', function (el, binding) { // 写在函数中的操作就相当于在bind和update中各写了一次 // 注意:el为是使用该指令的标签 console.log(el, binding); el.onmouseover = function () { this.style.background = binding.value; }; el.onmouseout = function () { this.style.background = ''; }; }); new Vue({ el: '#app', data: { color: 'green' }, methods: {}, // 注册局部指令 directives: { useless: { // 需要访问该指令所绑定元素的父级,必须要在inserted钩子中. bind(el, binding) { // 输出的结果为:null console.log('bind:', el, el.parentElement); }, inserted(el, binding) { // 输出的结果为:app标签, 即对应的父级标签 console.log('inserted:', el, el.parentElement); if (binding.value === true) { el.parentElement.removeChild(el); } } }, focus: { // 指令的定义 inserted: function (el) { el.focus() } } } }); new Vue({ el: '#app2', data: {}, methods: {} }); </script>
效果图对比