在Vue.js开发过程中,数据处理是一个很重要的部分,尤其是Vue是一个MVVM的框架,也就是Vue经常谈到的双向数据绑定。双向数据绑定的大概原理就是:当数据发生改变变化的时候,视图也跟着发生变化;当视图发生改变变化的时候,数据同时跟着发生变化。
Vue.js是采用数据劫持结合发布者-订阅者模式的方式,是根据Object.defineProperty() 这个方法重新定义对象获取属性值和设置属性值的操作来实现,也就是劫持各个属性的setter和getter,在数据源的数据改变的时候发布消息给订阅者,然后触发相应的监听回调。
举一个简单的实例:
{{ title }}
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事件,修改对象的属性值,即可实现简单的数据双向绑定。再举个栗子,具体内容如下;
任务名称 v-model="taskName" />
data() { return { taskName: "", }; },methods: { //获取任务名字的方法 getName(e) { let val = e.target.value.trim(); this.taskName = val; //给taskname赋值 }, }以上就是本章全部内容,欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!三掌柜的微信公众号:
三掌柜的新浪微博: