Basic use Vue series of tutorials (two) v-cloak, v-text, v-html of

v-cloak

We already know that two-way binding method is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-cloak</title>
</head>
<div id="app">
    <p>{{msg}}</p>
</div>
<body>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '123'
        }
    })
</script>
</body>
</html>

Effect:
Here Insert Picture Description
adjust the speed of the network:
browser f12, find Network, into Slow 3G, refresh the page

display as follows:

when a relatively slow speed, we can see the interpolation expression, this time the v-cloak played:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-cloak</title>
    <style>
    /*凡是使用了v-cloak指令的标签，都设置成隐藏*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<div id="app">
    <p v-cloak>{{msg}}</p>
</div>
<body>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '123'
        }
    })
</script>
</body>
</html>

This time to refresh the page:
Here Insert Picture Description
When the request is completed, will show the value:

it is v-cloakpossible to solve the problem of interpolation expressions flicker

v-text

v-textUse:

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

v-textDoes not require any configuration, direct expression flicker problems interpolation does not exist.
Consider the following scenario:

    <p v-cloak>hello {{msg}}</p>    <!--输出：hello 123-->
    <p v-text="msg">hello</p>       <!--输出：123 （"123"会将"hello"替换掉）-->

In other words, if you do not just want to output the string, the string would also like stitching around a number of other characters when using v-cloak.
If you want to output the string itself, use v-text.

v-html

v-htmlWill render the content as html, using the following method:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
</head>
<div id="app">
    <p v-html="msg"></p>
</div>
<body>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '<h1>我是一个h1标签</h1>'
        }
    })
</script>
</body>
</html>

Msg contents page will render as html:
Here Insert Picture Description