Vue 的屬性綁定與雙向綁定
首先我們花 30s 的時間創(chuàng)建如下這樣的一個 HTML 文檔：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 屬性綁定和雙向數(shù)據(jù)綁定 </title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root"></div>
<script>
new Vue({
el: "#root"
})
</script>
</body>
</html>
1. 屬性綁定
我們都知道在 HTML 文檔中有一種元素屬性叫做 title。
其功能是：當鼠標懸停在該元素上一小會兒后滑潘，就會顯示出 title 的內(nèi)容。
那么這里我們試著添加一個 title 屬性：
<div id="root">
<div title="This is a title tip">
Hello Vue
</div>
</div>
- 如果我希望 這個 title 的文本是可變的瑟由，不是寫死在代碼文本中的芜赌，那么我們可以設(shè)置一個條目專門記錄作儿、存儲該數(shù)據(jù)豆茫，即在 Vue 實例定義一個 " title ":
<div v-bind:title="title">
Hello Vue
</div>
<script>
new Vue({
el: "#root"
data: {
title: "this is a new title tip";
}
})
</script>
- 這時我就實現(xiàn)了屬性與數(shù)據(jù)的單向綁定，即數(shù)據(jù)可以決定頁面的內(nèi)容溉愁。
- v-bind:某屬性 = " ... " 的語法中：在 " ... " 中 ... 的內(nèi)容是 JS 內(nèi)容哦处铛！
- v-bind: 可以就簡化為一個冒號 : 例如 v-bind:title="title" 可以寫作 :title="title"
2. 雙向綁定
既然上面說到了，可以由數(shù)據(jù)決定頁面內(nèi)容拐揭，那么頁面內(nèi)容可不可以反過來作用于數(shù)據(jù)呢撤蟆？
這就要講到我們的雙向綁定啦！
眾所周知投队，<input/> 這個標簽即可以輸入數(shù)據(jù)改變內(nèi)容，也可以顯示內(nèi)容爵川。
我們想要實現(xiàn)一個需求敷鸦，在 input 輸入框中輸入時，msg 的數(shù)據(jù)值會實時跟隨著變化寝贡，并且顯示出來：
那么我們需要這樣做：
<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 中用于實現(xiàn)雙向綁定的指令扒披。
我們打開該 HTML 頁面，首先顯示的是如下結(jié)果：
2-1
-
然后我們在輸入框中隨便輸入一些東西后......
2-2
