理解Vue的雙向數(shù)據(jù)綁定
Vue有一個顯著的地方就是它擁有雙向數(shù)據(jù)綁定功能，那么何為雙向數(shù)據(jù)綁定呢题暖？
雙向是指：HTML標(biāo)簽數(shù)據(jù) 綁定到 Vue對象，另外反方向數(shù)據(jù)也是綁定的。通俗點(diǎn)說就是钳踊，Vue對象的改變會直接影響到HTML的標(biāo)簽的變化，而且標(biāo)簽的變化也會反過來影響Vue對象的屬性的變化勿侯。
這樣以來拓瞪，就徹底變革了之前Dom的開發(fā)方式，之前Dom驅(qū)動的開發(fā)方式尤其是以jQuery為主的開發(fā)時代助琐，都是dom變化后祭埂，觸發(fā)js事件，然后在事件中通過js代碼取得標(biāo)簽的變化，再跟后臺進(jìn)行交互蛆橡，然后根據(jù)后臺返回的結(jié)果再更新HTML標(biāo)簽舌界，異常的繁瑣。有了Vue這種雙向綁定泰演，讓開發(fā)人員只需要關(guān)心json數(shù)據(jù)的變化即可呻拌，Vue自動映射到HTML上，而且HTML的變化也會映射回js對象上睦焕，開發(fā)方式直接變革成了前端由數(shù)據(jù)驅(qū)動的開發(fā)時代藐握，遠(yuǎn)遠(yuǎn)拋棄了Dom開發(fā)主導(dǎo)的時代了。
下面我們來簡單看一個示例 實(shí)現(xiàn)一個簡單的雙向數(shù)據(jù)綁定代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 在頁面上放置一個input標(biāo)簽 通過v-model雙向綁定數(shù)據(jù) -->
<input type="text" v-model="info">
<p>{{info}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
info:'數(shù)據(jù)雙向綁定',
}
})
</script>
</body>
</html>
顯示的效果如下所示:
image.png
image.png
