Vue学习(二): v-cloak、v-text、v-html

使用 v-cloak(插值表达式)能够解决插值表达式闪烁问题

可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    [v-cloak]{
        display: none;
    }
    </style>
</head>
<body>
    <div id="app">
        <!--使用 v-cloak能够解决插值表达式闪烁问题-->
        <p v-cloak>{{msg}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                msg: '123'
            }
        })
    </script>
</body>
</html>

v-text的使用与v-cloak的区别

<h4 v-text="msg"></h4>

v-text与v-cloak区别

默认v-text是没有闪烁问题，但v-cloak有闪烁，需要写一个[v-cloak]{display:none}
v-cloak可以前后放任意内容，v-text只能放v-text的值（会覆盖元素原本的内容）

v-html 能够输出html标签

<div v-html="msg2"></div>
var vm = new Vue({
            el: '#app',
            data:{
                msg2: '<h1>这是H1标签</h1>'
            }
        })