简单实现Vue的双向绑定
文章目录前言一、双向绑定是什么？二、实现双向绑定简易Demo1.编写Demo1.html2.编写Demo2.html前言学习完Vue.js的特性, 双向绑定是在开发中一个非常实用的点. 这次我以一个简易的Demo为切口, 谈一下我对双向绑定的理解.一、双向绑定是什么？要说起双向绑定, 必须先谈一下单向绑定。所谓的单向绑定就是， 把Model绑定到View，就是我们之前MVC实现的方式。当Model
前言
学习完Vue.js的特性, 双向绑定是在开发中一个非常实用的点. 这次我以一个简易的Demo为切口, 谈一下我对双向绑定的理解.
一、双向绑定是什么？
要说起双向绑定, 必须先谈一下单向绑定。所谓的单向绑定就是， 把Model绑定到View，就是我们之前MVC实现的方式。当Model更新时，View也会自动更新。 那么双向绑定的意思就是，把Model绑定到View的同时，也将View绑定到Model上，程序员用代码更新Model时，View就会自动更新，反之，浏览器的用户更新了View，Model的数据也自动被更新了。这样说起来，可能还不是很理解，看以下这个简易的Demo以及它的运行结果，就可以初步了解什么是双向绑定了。
二、实现双向绑定简易Demo
1.编写Demo1.html
代码如下：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="lubenwei">
<!--重要! 这里v-model里面的message, 是绑定了type="text" 和 后面的{{message}} 和 下面script标签里
的 vm的属性message-->
输入的文本: <input type="text" v-model="message"> {{message}}
</div>
<script>
var vm = new Vue({
el:"#lubenwei",
data: {
message: "卢本伟牛比"
}
});
</script>
</body>
</html>
看上面的代码。代码构成非常简单，引入Vue.js之后，只有两步。
一是id为“lubenwei”的<div>标签， 一个是<div>对应的Script标签。
下图是代码运行后的结果
① 文本输入一些东西, 后面就跟着显示一些东西。这代表了：
(浏览器的用户更新了View，Model的数据也自动被更新了, 不信你看一下控制台，输入vm.message, 发现Model的数据确实被更新了）
② 同时你在浏览器的控制台改动后面显示的东西, 输入框里面的东西也会变。这代表了：
（当程序猿用代码更新了Model时，View也会自动更新）
有点感觉了吗，这就是最简单的双向绑定的事例。
下面再写一个稍微复杂一点的。
2.编写Demo2.html
代码如下：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--Demo2 和Demo1 的需求和使用方法差不多, 只不过是变成了下拉框-->
<div id="lubenwei2">
<!--重要! 这里v-model里面的selected, 是绑定了option里面的值 和 后面的{{selected}} 和 下面script标签里的 vm的属性selected-->
下拉框:
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>{{selected}}</span>
</div>
<script>
var vm2 = new Vue({
el:"#lubenwei2",
data: {
selected:'默认值'
}
});
</script>
</body>
</html>
这个代码和Demo1的实现场景差不多， 只不过是从文本框变成了下拉框。
看到这里是不是有点蒙 vue是怎么知道应该绑定option里面的值呢 还有上文的type=“text”, vue是怎么判断的呢？
其实是自动的:
你可以用v-model 指令在表单
<input>、<textarea>及<select>元素上创建双向数据绑
定。它会根据控件类型自动选取正确的方法来更新元素。((((重点!!!))))
尽管有些神奇，但v-model本质上不过是语法糖。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。注意: v-model 会忽略所有表单元素的value、checked、 selected 特性的初始值而总是将
Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!
（这里的文字引用自 公众号 狂神说）
看完了这两个Demo，我们就对Vue中的双向绑定有了一个初步的了解。当然在实际开发中双向绑定的应用远不止于此，本文只是抛砖引玉，希望能帮助大家快速入门。
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)