视图常规操作

• v-text：文本变量

<p v-text='msg'></p>
<p>{{ msg }}</p>

• v-once：一次性文本赋值

<p v-once>{{ msg }}</p>

• v-html：html文本变量

<p v-html='msg'></p>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '<b>文本</b>'
        }
    })
</script>

• v-bind：属性绑定

<div id="app">
    <img v-bind:src='imgSrc' />
    <!-- 简写 -->
    <img :src='imgSrc' />
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            imgSrc: 'https://www.baidu.com/favicon.ico'
        }
    })
</script>

• v-model：双向数据绑定

<div id="app">
    <input type="text" v-model='msg'>
    <p>{{ msg }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: ''
        }
    })
</script>

• v-cloak：避免页面加载闪烁

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak>
    
</div>

• 视图自身运算

<div id="app" v-cloak>
    <p>{{ 1 + 1 }}</p>
    <p>{{ [1, 2, 3].join('@') }}</p>
</div>