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

Posted gongxiansheng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于v-text指令消除刷新慢显示替换的过程的主要内容,如果未能解决你的问题,请参考以下文章

Vue2.0学习— v-text指令(四十五)

Vue指令

第三篇:Vue指令

Vue指令概述

Vue指令概述

Vue指令概述