VUE数据填充相关3个指令的用法

v-text 在DOM中插入纯文本数据,此指令不会出现闪动问题

<div id='app'>
    <div v-cloak>{{msg}}</div>
    <div v-test='msg1'></div>
</div>

<script>
var vm = new Vue({
    el:"#app",
    data:{
        msg:"Hello Vue"
        msg1:"v-text插入纯文本",
    }
})
</script>

v-html 在DOM中插入HTML代码片段

<div id='app'>
    <div v-cloak>{{msg}}</div>
    <div v-test='msg1'></div>
    <div v-html='msg2'></div>
</div>

<script>
var vm = new Vue({
    el:"#app",
    data:{
        msg:"Hello Vue",
        msg1:"v-text插入纯文本",
        msg2:"<h1>v-html插入标题</h1>",
    }
})
</script>

v-pre 在DOM中直接输出代码源码（格式化源码输出）

<div id='app'>
    <div v-cloak>{{msg}}</div>
    <div v-test='msg1'></div>
    <div v-html='msg2'></div>
    <div v-pre='msg3'></div>
</div>

<script>
var vm = new Vue({
    el:"#app",
    data:{
        msg:"Hello Vue",
        msg1:"v-text插入纯文本",
        msg2:"<h1>v-html插入标题</h1>",
        msg3:"<div><p>v-pre源码输出</p></div>"
    }
})
</script>