VUE的v-cloak

149 阅读1分钟

VUE 提高开发效率的发展历程:

原生JS->JQuery之类的类库->前端模板引擎->angular

核心概念:解放用户双手 不让用户操作DOM元素

vue.png

步骤

导入Vue的包

<script src="./js/vue.js"></script>

创建一个Vue实例

<script>
        // 当导入包之后,在浏览器的内存中,就多了一个Vue构造函数
        var vm=new Vue({
            el:'#app',//表示,当前我们new的这个Vue实例要控制页面上的哪个区域
            data:{//data属性中,存放的是el中要用到的数据
                msg:'欢迎学习Vue'
                //通过Vue提供的指令,很方便的就能把数据渲染到页面中
            }
            
        })
     </script>

显示

<!-- 将来new的Vue实例,会控制这个元素中的所有内容 -->
    <!-- Vue实例所控制的这个元素区域,就是我们的v -->
    <div id="app">
        <p>{{msg}}</p>
    </div>

v-cloak

v-cloak 用于解决插值表达式闪烁的问题

 <script src="./js/vue.js"></script>
     <script>
        var vm=new Vue({
            el:'#app',//表示,当前我们new的这个Vue实例要控制页面上的哪个区域
            data:{//data属性中,存放的是el中要用到的数据
                msg:'123',
                msg2:'<h1>h1标签</h1>'
            }
            
        })
     </script>
 <div id="app">
        <!-- v-cloak 用于解决插值表达式闪烁的问题 -->
        <p v-cloak>+++++{{msg}}-----</p>
        <h4 v-text="msg">======</h4>
        <!-- 默认v-text是没有闪烁问题的 -->
        <!-- v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空 -->
    </div>