自定义指令

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>

 

posted @ 2020-03-14 15:02  牛牛的自留地  阅读(134)  评论(0)  编辑  收藏  举报