当前位置 博文首页 > 小旺的博客：Vue秘笈-----数据绑定
Vue.js里面的数据绑定，可以理解为属性内容的显示，属性内容在Vue.js中data里面定义，通过数据绑定形式显示在页面上。
data里面定义的属性可以理解为变量。
数据绑定最常见的形式就是使用{{属性名}}的文本插值，这里“属性名”左边和右边是双大括号。
{{…}}中填写的就是我们在Vue.js中data里定义的属性名。
<!DOCTYPE html>
<html>
<head>
<script src="vue.js"></script>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<p>{{mess}}</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
mess:'Hello Vue'
}
})
</script>
</body>
</html>
效果图：
展示标签或样式所定义的属性作用
<!DOCTYPE html>
<html>
<head>
<script src="vue.js"></script>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<p>{{mess}}</p>
<p>{{mess2}}</p>
<p v-html="mess"></p>
<p v-html="mess2"></p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
mess:'Hello Vue',
mess2:'<h1>Hello Vue</h1>'
}
})
</script>
</body>
</html>
效果图：
输出纯文本
<!DOCTYPE html>
<html>
<head>
<script src="vue.js"></script>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<p>{{mess}}</p>
<p>{{mess2}}</p>
<p v-text="mess"></p>
<p v-text="mess2"></p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
mess:'Hello Vue',
mess2:'<h1>Hello Vue</h1>'
}
})
</script>
</body>
</html>
效果图：
只渲染元素和组件一次，随后的渲染使用此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过
<!DOCTYPE html>
<html>
<head>
<script src="vue.js"></script>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<p v-once>{{msg}}</p>
<p>{{msg}}</p>
<p>
<input type="text" v-model="msg" />
</p>
</div>
<script type="text/javascript">
let vm = new Vue({
el:'#app',
data:{
msg:"hello"
}
});
</script>
</body>
</html>
效果图：
属性绑定
<!DOCTYPE html>
<html>
<head>
<script src="vue.js"></script>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.bj{
background-color: black;
color: white;
}
</style>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="x" />
<
