Vue 2.5从零开始学习 — Vue 的属性绑定与双向绑定
2018-12-17 本文已影响0人
路万奇与青川君
Vue 的属性绑定与双向绑定
首先我们花 30s 的时间创建如下这样的一个 HTML 文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 属性绑定和双向数据绑定 </title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root"></div>
<script>
new Vue({
el: "#root"
})
</script>
</body>
</html>
1. 属性绑定
我们都知道在 HTML 文档中有一种元素属性叫做 title。
其功能是：当鼠标悬停在该元素上一小会儿后，就会显示出 title 的内容。
那么这里我们试着添加一个 title 属性：
<div id="root">
<div title="This is a title tip">
Hello Vue
</div>
</div>
- 如果我希望 这个 title 的文本是可变的，不是写死在代码文本中的，那么我们可以设置一个条目专门记录、存储该数据，即在 Vue 实例定义一个 " title ":
<div v-bind:title="title">
Hello Vue
</div>
<script>
new Vue({
el: "#root"
data: {
title: "this is a new title tip";
}
})
</script>
- 这时我就实现了属性与数据的单向绑定，即数据可以决定页面的内容。
- v-bind:某属性 = " ... " 的语法中：在 " ... " 中 ... 的内容是 JS 内容哦！
- v-bind: 可以就简化为一个冒号 : 例如 v-bind:title="title" 可以写作 :title="title"
2. 双向绑定
既然上面说到了，可以由数据决定页面内容，那么页面内容可不可以反过来作用于数据呢？
这就要讲到我们的双向绑定啦！
众所周知，<input/> 这个标签即可以输入数据改变内容，也可以显示内容。
我们想要实现一个需求，在 input 输入框中输入时，msg 的数据值会实时跟随着变化，并且显示出来：
那么我们需要这样做：
<div id="root">
<input v-model="msg"/>
<div v-bind:title="title">
Hello vue: {{ msg }}
</div>
</div>
<script>
new Vue({
el: "#root",
data: {
msg:"abcd",
title: "this is a new title tip"
}
})
</script>
-
v-model 是 Vue 中用于实现双向绑定的指令。
-
我们打开该 HTML 页面，首先显示的是如下结果：
2-1
-
然后我们在输入框中随便输入一些东西后......
2-2
