正文
Vue（五）模板
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
模板
1. 简介
Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中
也称为Mustache语法
2. 数据绑定的方式
a.双向绑定
v-model
b.单向绑定
方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
方式2：使用v-text、v-html
<script>
window.onload=function(){
let app = new Vue({
el:'.container',
data:{
msg:'Welcome to China!'
}
})
}
</script>
<style>
[v-cloak]{
display:none;
}
</style>--------------------------------------------------------------------<body> <div class="container">
<input type="text" v-model="msg"> //双向绑定
//单向绑定
<h1 v-cloak>{{msg}}</h1>
<h1 v-text="msg"></h1>
<h1 v-html="msg"></h1>
</div></body>
v-html:可以识别标签 类似于<h1></h1>。。。而其他两种方式识别不了，会显示纯文本。。。
3. 其他指令
v-once 数据只绑定一次
v-pre 不编译，直接原样显示
