vue之v-text 与 模板语法 {{}} 的区别 以及解决闪烁,闪屏

{{ }} 是模板语法/模板插值 v-text 是vue指令

当我们使用模板语法插值的时候会出现闪烁闪屏现象

闪烁或闪屏就是当用户网速较慢或者大量渲染数据的时候，可能会把两个括号显示出来, 渲染完成/加载完成的时候变成正常的 会出现闪烁问题
解决方式：

1. 使用v-text 代替 模板语法 {{ }}
2. v-cloak指令 建议加在el 挂载的元素上(子元素就可以不用设置了)，然后给它设置css样式 [ v-cloak ]{ display: none; }

<style>
        [v-cloak]{
            display: none;
        }
</style>

    <div class="box" v-cloak>
        {{text}}
    </div>
    
<script>
    new Vue({
        el:".box",
        data:{
            text:"翠翠翠翠花"
        }
    })
</script>

推荐使用第二种方法，简单粗暴