经过上一篇文章,已经将数据驱动界面改变的过程实现了,本章节将实现界面驱动数据更新的过程。
界面驱动数据更新的过程,主要是通过 v-model
指令实现的, 只有 v-model
指令才能实现界面驱动数据更新的过程。
好了,那么说了是通过 v-model 那么直接处理下 CompilerUtil 中的 model 方法就好了。
只需要在 model 方法在加几行代码即可实现界面驱动数据更新的过程(双向绑定的功能)。
首先说一下思路,监听文本框的输入事件,当文本框的值发生改变时,通过事件对象 e 获取到文本框最新输入的值,将最新的值设置到模型当中这样是不是就可以了。
但是在设置到模型当中有一个注意点:
!> 在 model 方法中,在参数列表中将属性的名称以参数的形式已经传递过来了,但是这个属性的名称有可能是 name, 也有可能是 person.name, 也有可能是一个多级的,这个时候就需要一级一级取,取到最后一级,给最后一级设置值就可以了。
所以我这里就专门在编写一个方法用来设置值,叫做 setValue, 我将 vm, attr, 以及最新的值 value 也穿递过去,然后在 setValue 方法中,先将 attr 以 .
分割成数组,然后通过循环遍历数组,将 vm 的值一级一级取出来,直到取到最后一级,给最后一级设置值就可以了。
好了废话不多说,直接上代码, CompilerUtil 中 setValue:
javascript
setValue(vm, attr, newValue) {
attr.split('.').reduce((data, currentAttr, index, arr) => {
if (index === arr.length - 1) {
data[currentAttr] = newValue;
}
return data[currentAttr];
}, vm.$data)
},
然后在 model 方法中, 监听文本框的输入事件在调用 setValue 方法,将 vm, attr, 以及最新的值 value 也穿递过去,代码如下:
javascript
// 监听文本框的输入事件
node.addEventListener('input', (e) => {
let newValue = e.target.value;
this.setValue(vm, value, newValue);
});
打开浏览器,输入框输入内容,发现数据已经更新了(不录制 gif 了)好了,这样就实现了界面驱动数据更新的过程。