实现 MVVM 类 Vue 迷你框架(六)
人生代码
共 2361字,需浏览 5分钟
·
2021-03-29 21:11
如何实现 MVVM 类 Vue 迷你框架(六)
我们先来讲讲怎么处理 model 以及事件:
model 处理跟 text,html 处理相似 事件处理需要找到 @
属性的事件,给对应的节点添加事件监听器
// 节点元素编译
class Compile {
compileElement(node) {
const nodeAttrs = Array.from(node.attributes);
nodeAttrs.forEach(attr => {
const {name, value} = attr;
// 指令处理
if(name.startWith('m-')) {
const dir = this[name.slice(2)]; // 找出指令方法
dir && dir(node, value);
}
// 事件处理
if(name.startWith('@')) {
// 找出开头是 @
const dir = name.slice(1);
// 事件监听
this.eventHandler(node, value, dir);
}
})
}
// 绑定监听器
eventHandler(node,value,dir) {
const { methods } = this.$vm.$options;
const fn = methods && methods[value];
fn && node.addEventListener(dir, fn.bind(this.$vm));
}
}
解析 model
modelUpdater(node, val) {
node.value = val;
}
model(node, key) {
this.update(node, key, 'model');
node.addEventListener('input', e=>{
this.$vm[key] = e.target.value;
})
}
评论
MVVMFrameworkAndroid MVVM 框架
这是一个搭建MVVM模式极速开发库,DataBinding 和 Retrofit 配合使用搭建的快速
MVVMFrameworkAndroid MVVM 框架
0
MVVMFrameworkAndroid MVVM 框架
这是一个搭建MVVM模式极速开发库,DataBinding和Retrofit配合使用搭建的快速框架。环境AndroidStudio2.1MVVM模式MVVM模式:View,ViewModel,Mode
MVVMFrameworkAndroid MVVM 框架
0
AWTK-MVVMC 语言 MVVM 框架
AWTK-MVVM是一套为AWTK用C语言开发,并支持各种脚本语言的MVVM框架,实现了数据绑定、命令绑定和窗口导航等基本功能,使用AWTK-MVVM开发应用程序,无需学习AWTK本身的API,只需学
AWTK-MVVMC 语言 MVVM 框架
0
NoDomWeb 端 MVVM 框架
NoDom 是一款轻量级,web端的mvvm框架,主要用于webapp的开发,开发者只需掌握html和css,以及json数据操作方法,无需掌握过多js技巧,即可开发出丰富功能的webapp。nodo
NoDomWeb 端 MVVM 框架
0
Avalon前端 MVVM 框架
avalon是一个功能强大,体积小巧的MVVM框架。它遵循“操作数据即操作DOM”的理念,让你在代码里基本见不到一点DOM操作代码。DOM操作全部在绑定后,交给
Avalon前端 MVVM 框架
0