视图常规操作
- 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>
