Vue是个前端框架，所以这边文章是写给对前端有兴趣的伙伴，今天小编就来说说关于vue双向绑定用什么代码?下面更多详细答案一起来看看吧!
vue双向绑定用什么代码
开场白Vue是个前端框架，所以这边文章是写给对前端有兴趣的伙伴。
Vue为什么会出现社会的进步是由需求推动的，任何新生事物的出现，都是因为有人有需要。
为了弄清楚这个需求，先了解两个知识点：浏览器的职责以及前端工作的历史演进。
浏览器的职责
当你想提供一个网站服务的时候，你所做的实际上只是两件事：一是搞台服务器，使你的程序跑起来；二是使服务器能公网访问。
可是你的网站不会自己跑到用户眼前，还得需要用户打开他的浏览器，输入网址，点击GO，这个时候你的网页才呈现给用户。整个过程，涉及两个参与主体：服务器和浏览器。服务器往浏览器传输的用户感兴趣的文本信息包含的就是网页三套件：html、css以及js脚本。
因此，所有浏览器都得包括三部分：html解析器，渲染器，脚本引擎。Html解析器负责生成DOM树，一种浏览器自己维护自己用的数据结构，用户看不见；渲染器负责呈现文字、图表、视频给用户；脚本引擎负责与用户互动。
如果对前端工作进行总结的话，主要就是两点：修改页面元素、维护当前页面状态。如果将当前JS所有变量的一个快照理解成就是一个状态，维护状态，靠的是JS；而修改页面元素，最终还得靠操作DOM。
前端工作的演进历史
在jQuery出现以前，我们直接操作DOM结构，这种方法复杂度高，而且需要考虑不同浏览器的兼容性；有了jQuery强大的选择器以及高度封装的API，我们可以更方便的操作DOM，jQuery帮我们处理兼容性问题，同时也使DOM操作变得简单；
jQuery虽然很大程度上解放了前端生产力，但时间一长，人总是喜新厌旧的，而且黑天鹅也经常发生。Gmail的诞生，对前端的影响犹如阿里当年推出余额宝时对互联网金融的影响一样，都是一个引爆点。用过Gmail邮箱的人都知道，这就是一个单页面应用，整个使用过程中，根本没有页面的跳转，尤为可贵之处在于整个页面的修改完全不需要直接操作DOM，而是基于一种新的MVVM模式，理所当然，Gmail团队提供了MVVM模式的一种实现，就是框架AngularJS。
MVVM模式，本质上就是使用数据双向绑定，使得页面修改完全不需要直接操作DOM。更新了状态即JS变量，页面元素会自动更新；反之，更新了页面元素，数据状态也会自动更新。野心不小的AngularJS却并不满足于此，它融合了各种模式：MVVM、MVC，结果就是AngularJS大而全。这个社会就是奇怪，喜欢大而全的人很多，喜欢小清新的也大有人在，Vue就是这个小清新，专注于MVVM。
Vue做了什么Vue的核心只关注视图层，它的定位就是一个渐进式的前端框架，而且是实现了MVVM模式的前端框架。渐进式指的就是页面视图变化时只修改需要变化的DOM元素，而不是大范围修改DOM，因为这样性能更高。
Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件，也就是双向绑定和组件式开发。
双向绑定的实现关键点双向绑定指的是页面元素和JS变量两者之间的绑定，页面元素变化时告知JS变量，反之，JS变量变化时告知页面元素。显然，为了实现双向绑定，我们得分别能监听到页面元素的变化和JS变量的值的变化。对于前者，基于HTML原生支持的各种事件模型，可以很方便的监听到，那么如何监听某一个JS变量的值的变化呢？
ECMAScript5.1开始提供了 一个API：Object.defineProperty。 这个API，能够为JS对象的属性设计一个特殊的 getter/setter，然后在 setter 里触发一个函数，就可以达到监听的效果。下面的代码片段是个例子，仅供参考。
function Archiver() {
var temperature = null;
Object.defineProperty(this, 'temperature', {
get: function() {
console.log('get!');
return temperature;
},
set: function(value) {
temperature = value;
console.log(value);
}
});
}
var arc = new Archiver();
arc.temperature; // 控制台打印出'get!'
arc.temperature = 11; // 控制台打印出11
arc.temperature = 13; // 控制台打印出13
到此，也应该基本明白如何监听页面元素以及JS变量的变化了。接下来扒一扒Vue.js基于此又做了哪些更深层次的特性。
Vue.js 和诸多 MVVM 的思路是类似的，主要做了三件事：
其一，对JS data进行了监听，并且提供订阅某个数据项的变化的能力，这个监听者俗称Observer；
其二，解析html，分析html里包含的所有Vue.js指令即directive，得到每一个directive所依赖的数据项及其相应的视图更新方法。比如 v-text="message" 被解析之后，所依赖的数据项 this.$data.message，以及相应的视图更新方法 node.text= this.$data.message，这个解析器俗称directive parser；
其三，集成directive的数据依赖及对应数据的observer，即将之前解析出的数据项对应的视图更新方法与数据项的变化监听绑定在一起，这样当数据变化的时候，就会触发observer，进而触发相关依赖对应的视图更新方法，最后达到更新视图的目的，这个集成器俗称Watcher。
所以整个Vue.js的核心，就是如何实现observer, directive parser, watcher这三样东西。
,
