v-text指令消除刷新慢显示替换的过程

在Vue项目中dom渲染过程中，类似{{msg}}的render页面会闪一下，是因为浏览器解析html文档是自上而下的解析，出现了{{msg}}转换为对应数据的过程而闪。

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script>
        let vm = new Vue({//vm 即viewModel
            el: "#app",
            data: {//data数据会被vm代理
                msg: 'hello world'//可以通过vm.msg获取
            }
        })
    </script>
</body>

我们可以采用 v-text指令来取代{{msg}},从而解决这个问题

<div id="app">
        <div v-text="msg"></div>
    </div>

 

posted @ 2019-02-14 21:47  卑面派对  阅读(266)  评论(0)  编辑  收藏  举报