vuejs—数据双向绑定
2016-01-29 本文已影响12508人
webCoder
上一篇文章，介绍了如何通过vue.js实现页面输出hello vue.js，这篇文章将介绍如何通过其实现数据双向绑定
我们有这样一个需求，文本框中输入什么内容，文本框中的内容就显示在页面上。
你会说，这个很简单，我只要监听文本框内容改变事件就可以实现了。
但是这里的需求只是修改一处，如果文本框内容改变后需要同时修改20个地方的显示呢？
那得执行大量的DOM操作。
vue.js是MVVM结构的，同类的还有AngularJs；至于MVC、MVP、MVVM的比较网上已经有很多了，这样不再重复，我介绍肯定也没网上大神们介绍的详细，大家可以自行百度，谷歌。
什么？在墙内谷歌不了，那我推荐你一个软件，不需要任何配置，只需要双击运行，支持MAC、Windows、Unbuntu、Android，真的很好用，狠戳这里 。
废话不多说，来看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>demo01</title>
<link rel="stylesheet" href="../css/base/bootstrap.min.css">
<link rel="stylesheet" href="../css/base/common.css">
</head>
<body>
<div class="container mt15">
<fieldset class="form-group" id="unameGroup">
<label for="userName">名字：</label> <span id="title">{{ uname }}</h1>
<input type="text" class="form-control" id="userName" placeholder="请输入名字" v-model="uname">
</fieldset>
</div>
<script src="../js/base/vue.js"></script>
<script src="../js/base/jquery.min.js"></script>
<script src="../js/base/bootstrap.min.js"></script>
<script>
new Vue({
el: '#unameGroup',
data: {
uname: ''
}
});
</script>
</body>
</html>
页面初始化效果：
页面初始效果.png
修改文本框内容：
改变文本框内容1.png
改变文本框内容2.png
注意点：
- 这里的span标签以及文本框必须包含在id为unameGroup的容器中，俗话说就是得在这个“作用域内”，不然没有效果。
- input上不是value={{uname}}，而是v-model="uname"
下一篇文章将学习如何渲染列表。
