vue data数据修改_前端开发：Vue中双向数据绑定的简单使用

在Vue.js开发过程中，数据处理是一个很重要的部分，尤其是Vue是一个MVVM的框架，也就是Vue经常谈到的双向数据绑定。双向数据绑定的大概原理就是：当数据发生改变变化的时候，视图也跟着发生变化；当视图发生改变变化的时候，数据同时跟着发生变化。

Vue.js是采用数据劫持结合发布者-订阅者模式的方式，是根据Object.defineProperty() 这个方法重新定义对象获取属性值和设置属性值的操作来实现，也就是劫持各个属性的setter和getter，在数据源的数据改变的时候发布消息给订阅者，然后触发相应的监听回调。 举一个简单的实例：              var vm = new Vue({            el: '#app',             data: {                title: 'hello Vue!’            }        });    Vue实现数据的双向绑定，通过输入框的例子来做实例，整个实现过程可以分为以下几步： 1、首先把输入框以及文本节点与 data 中的数据绑定；2、然后在输入框内容变化时，data 中的数据同步变化。即 view => model 的变化；3、最后在data中的数据变化时，文本节点的内容同步变化。即 model => view 的变化。实现一个简单的数据双向绑定的方法：使用Object.defineProperty()来定义属性的set方法，属性被赋值的时候，修改Input的value值以及span中的innerHTML；然后监听input的keyup事件，修改对象的属性值，即可实现简单的数据双向绑定。再举个栗子，具体内容如下;               data() {    return {      taskName: "",    };  },methods: {   //获取任务名字的方法    getName(e) {      let val = e.target.value.trim();      this.taskName = val;  //给taskname赋值    }, }以上就是本章全部内容，欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！三掌柜的微信公众号：

三掌柜的新浪微博：