1、案例1
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自定义全局和局部指令</title> </head> <body> <div id="app1"> <p v-upper-text="msg1"></p> <p v-lower-text="msg1"></p> </div> <div id="app2"> <p v-upper-text="msg2"></p>lower <!-- v-lower-text在当前VM实例中无效，因此这里会在 控制台报错 --> <p v-lower-text="msg2"></p> </div> <script src="../js/vue.js" type="text/javascript"></script> <script> /* 自定义全局指定upper-text,使用时用v-upper-text, 全局指令在所有的Vue实例中都有效 el:指定作用的元素 binding:包含指令相关信息数据的对象 */ Vue.directive("upper-text", function (el, binding) { el.textContent = binding.value.toUpperCase() }); const vm1 = new Vue({ el: "#app1", data: { msg1: "Hello My Name Is Liu Yang" }, directives: { /* 自定义局部指令，只在当前Vue实例中有效， lower-text有特殊字符-,因此需要使用引号包起来， el:指定作用的元素 binding:包含指令相关信息数据的对象 */ "lower-text"(el, binding) { el.textContent = binding.value.toLowerCase() } } }); const vm2 = new Vue({ el: "#app2", data: { msg2: "This Is My Job" } }); </script> </body> </html>