模板
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 不编译,直接原样显示