属性绑定
Vue 属性绑定指令 v-bind:属性名=“js表达式”，其中"v-bind:" 可以简写为“：”。
例子
<!DOCTYPE html>
<html>
<head>
<title>属性绑定和双向数据绑定</title>
<meta charset="utf-8">
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div :title="'Ann ' + title">hello world</div>
<!-- <div v-bind:title="'Ann ' + title">hello world</div> -->
</div>
<script>
new Vue({
el:"#root",
data: {
title: "this is hello world"
}
})
</script>
</body>
</html>双向数据绑定
单向数据绑定，即数据决定页面内容，但页面内容改变不了数据。
双向数据绑定，即页面和数据可以互相决定。
Vue 模版指令：v-model="vue实例中data中的属性名"
例子
<!DOCTYPE html>
<html>
<head>
<title>属性绑定和双向数据绑定</title>
<meta charset="utf-8">
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div :title="'Ann ' + title">hello world</div>
<!-- <div v-bind:title="'Ann ' + title">hello world</div> -->
<input v-model="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data: {
title: "this is hello world",
content: "this is content"
}
})
</script>
</body>
</html>