Vue 动画隐藏显示 + v-pre + v-text -v-cloak +自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s;
        }
        .fade-enter, .fade-leave-to {
            opacity: 0;
        }

        .w-enter-active {
            transition: opacity 1s;
        }
         .w-leave-active {
            transition: opacity 5s;
        }
        .w-enter, .w-leave-to {
            opacity: 0;
            transform: translateX(10px);
        }
        [v-cloak] {
            display: none;
        }
    </style>
<body>

    <!-- *-leave 隐藏前  *-leave-active 隐藏中 *-leave-to 隐藏后 -->
    <!-- *-enter 显示前  *-enter-active 显示中 *-enter-to 显示后 -->
    <div id="app">
        <button v-on:click="show = !show">点击显示或隐藏</button>
        <transition name="fade">
            <p v-if="show">显示或隐藏</p>
        </transtion>
    </div> 
    <div id="demo">
        <button v-on:click="show = !show">点击显示或隐藏</button>
        <transition name="w">
            <p v-if="show">显示或隐藏</p>
        </transtion>
    </div>  
    
    <div id="demo1" v-cloak>
        <!-- v-pre 原样输出 -->
       <p v-pre>{{msg}}</p>

        <!-- 因为数据会有一个加载的过程会显示标签 -->
       <!-- 使用v-text解决  -->
       <p v-text="msg"></p>

       <!-- 也可以使用 v-cloak (在实例vue中的标签中添加 并添加样式) 这个指令保持在元素上直到关联实例结束编译-->
       <p>{{msg}}</p>
    </div>   
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                show:true,
                msg:'hello'
            }
        })
        new Vue({
            el:'#demo',
            data:{
                show:true
            }
        })
        new Vue({
            el:'#demo1',
            data:{
                msg:'hello'
            }
        })
    </script>    
</body>
</html>

自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo1" v-cloak>
        <!-- 自定义指令 v-add   msg需要是数据 -->
       <div v-add="msg">{{msg}}</div>
    </div>   
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 全局定义自定义指令
    //    Vue.directive('add', {
    //        inserted: function(el, binding){
    //             el.innerHTML = "

这是我添加的

"
; // } // }) new Vue({ el:'#demo1', data:{ msg:'hello' }, //局部的自定义指令 注意这块定义是directives directives: { 'add': { bind:function(el){ el.style.color = "red"; }, inserted: function(el, binding){ el.innerHTML = "

这是我后添加的

"
; } } } }) </script> </body> </html>

你可能感兴趣的:(vue)