414 指令入门， v-cloak指令 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /**/
        /*
            v-cloak指令的用法
            1、提供样式
            [v-cloak]{
                display: none;
            }
            2、在插值表达式所在的标签中添加v-cloak指令

            背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
        */

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        });
    </script>
</body>

</html>

posted on 2020-03-26 10:52  冲啊！  阅读(220)  评论(0)  编辑  收藏  举报

导航