1. 简介
Vue.js使用基于HTML的模板语法,可以将DOM绑定到Vue实例中的数据
模板就是{{}},用来进行数据绑定,显示在页面中也称为Mustache语法
2. 数据绑定的方式
a.双向绑定
v-model
b.单向绑定
方式1:使用两对大括号{{}},可能会出现闪烁的问题,可以使用v-cloak解决
方式2:使用v-text、v-html
3. 其他指令
v-once 数据只绑定一次
v-pre 不编译,直接原样显示
4. 代码
<script src="js/vue.js"></script>
<script>
window.onload = function () {
let vm = new Vue({
el:'#itany',
data:{
msg:"hello vue.js"
}
})
}
</script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id = "itany">
<!--v-model数据的双向绑定-->
<input type="text" v-model="msg"/>
<!--{{}}数据的单向绑定-->
<h3>{{msg}}</h3>
<!--v-cloak:该指令为了方式数据渲染的时候出翔{{}}的现象,需要配合css属性一起使用-->
<h3>aa<span v-cloak>{{msg}}</span></h3>
<!--绑定text标签会将所有的内容以文本形式输出-->
<h3 v-text="msg"></h3>
<!--绑定html标签,会将显示内容中的html标签进行隐藏-->
<h3 v-html="msg"></h3>
<!--v-once该指令表示只会执行一次-->
<h3 v-once>{{msg}}</h3>
<!--v-pre表示跳过元素的编译过程直接显示元素-->
<h3 v-pre>{{msg}}</h3>
</div>
</body>
github代码下载地址:https://github.com/xiangjianming/vueStart.git