VUE：内置指令与自定义指令

常用的内置指令

1）v:text　　更新元素的 textContent

2）v-html　　更新元素的 innerHTML

3）v-if　　如果为true，当前标签才会输出到页面

4）v-else　　如果为false，当前标签才会输出到页面

5）v-show　　通过控制display样式来控制显示/隐藏

6）v-for　　遍历数组/对象

7）v-on　　绑定事件监听，一般简写为@

8）v-bind　　强制绑定解析表达式，可以省略v-bind

9）v-model　　双向数据绑定

10）ref　　指定唯一标识，vue对象通过$els属性访问这个元素对象

11）v-cloak　　防止闪现，与css配合：[v-cloak]{display:none}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="example">
            <p ref="content">taosir is learning...</p>
            <button @click="hint">提示</button>
            <!--<p v-text="msg"></p>-->
            <p v-cloak>{{msg}}</p>
        </div>
        
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            alert('----')
            new Vue({
                el:'#example',
                data:{
                    msg:'涛先森正在努力学习'
                },
                methods:{
                    hint(){
                        alert(this.$refs.content.innerHTML);
                    }
                }
            })
        </script>
    </body>
</html>

自定义指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            1.注册全局指令
                Vue.directive('my-directive',function(el,binding){
                    el.innerHTML = binding.value.toupperCase()
                })
            2.注册局部指令
                directives：
                    'my-directive':{
                        bind(el,binding){
                            el.innerHTML = binding.value.toupperCase()
                        }
                    }
            3.使用指令
                v-my-directive='xxx'
        -->
        <!--
            需求：自定义2个指令
            1.功能类似于 v-text，但是转换为全大写
            2.功能类似于 v-text，但是转换为全小写
        -->
        
        <div id="test1">
            <p v-upper-text="msg1"></p>
            <p v-lower-text="msg1"></p>
        </div>
        
        <div id="test2">
            <p v-upper-text="msg2"></p>
            <p v-lower-text="msg2"></p>
        </div>
        
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            //定义全局指令
            //el：指令属性所在的标签对象
            //binding：包含指令相关信息数据的对象
            Vue.directive('upper-text',function(el,binding){
                console.log(el,binding);
                el.textContent = binding.value.toUpperCase()
            })
            
            new Vue({
                el:'#test1',
                data:{
                    msg1:'taosir love java!'
                },
                //注册局部指令
                directives:{
                    'lower-text'(el,binding){
                        el.textContent = binding.value.toLowerCase()
                    }
                }
            })
            
            new Vue({
                el:'#test2',
                data:{
                    msg2:'taosir love Vue!'
                }
            })
        </script>
    </body>
</html>

VUE：内置指令与自定义指令

VUE：内置指令与自定义指令

常用的内置指令

自定义指令

猜你喜欢