02Vue.js的数据绑定
2018-04-15 本文已影响0人
个人不完美
理解Vue的双向数据绑定
Vue有一个显著的地方就是它拥有双向数据绑定功能，那么何为双向数据绑定呢？
双向是指：HTML标签数据 绑定到 Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。
这样以来，就彻底变革了之前Dom的开发方式，之前Dom驱动的开发方式尤其是以jQuery为主的开发时代，都是dom变化后，触发js事件，然后在事件中通过js代码取得标签的变化，再跟后台进行交互，然后根据后台返回的结果再更新HTML标签，异常的繁琐。有了Vue这种双向绑定，让开发人员只需要关心json数据的变化即可，Vue自动映射到HTML上，而且HTML的变化也会映射回js对象上，开发方式直接变革成了前端由数据驱动的开发时代，远远抛弃了Dom开发主导的时代了。
下面我们来简单看一个示例 实现一个简单的双向数据绑定代码：
<!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标签 通过v-model双向绑定数据 -->
<input type="text" v-model="info">
<p>{{info}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
info:'数据双向绑定',
}
})
</script>
</body>
</html>
显示的效果如下所示:
image.png
image.png
