- Notifications
You must be signed in to change notification settings - Fork6
基于 virtual dom 的轻量级 mvvm 库 >_<#@!
NotificationsYou must be signed in to change notification settings
shalldie/mini-mvvm
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A mini mvvm lib withvirtual dom - mini-vdom.
基于virtual dom - mini-vdom 的轻量级 mvvm 库 >_<#@!
适用于 ui 组件的构建依赖或小型项目，如果项目比较复杂，也许一个更加成熟的 mvvm 框架及其生态更适合你 🤠🤠
npm install mini-mvvm --save包含了.d.ts 文件，用起来毫无阻塞 >_<#@!
npm run dev:mini-mvvm 开发调试npm run build 生产构建- VNode 基于虚拟 dom：virtual dom - mini-vdom
- 数据监听
data、computed变动监听- 数组方法监听
push|pop|shift|unshift|splice|sort|reverse
computed计算属性文本节点数据绑定，可以是一段表达式attribute数据绑定- 支持绑定 data、computed，支持方法，可以是一段表达式
- 常用指令
m-model双向绑定。 支持input、textarea、selectm-if条件渲染。条件支持data、computed、一段表达式m-for循环。(item,index) in array、item in array
- 事件绑定
@click|@mousedown|...。可以使用$event占位原生事件
watch数据监听，详见下方示例- 声明方式
- api 方式
- 生命周期
created组件创建成功，可以使用this得到 MVVM 的实例beforeMount将要被插入 dommounted组件被添加到 dom，可以使用this.$el获取根节点 dombeforeUpdate组件将要更新updated组件更新完毕
importMVVMfrom'mini-mvvm';// es module, typescript// const MVVM from 'mini-mvvm'; // commonjs// const MVVM = window['MiniMvvm']; // windownewMVVM({// 挂载的目标节点的选择器// 如果没有 template，就用这个节点作为编译模板el:'#app',template:` <div> <div>{{ content }}</div> </div> `,// datadata(){return{content:'this is content.'};},computed:{},// ...计算属性// ...hook，可以使用 thiscreated(){// 使用api方式去watchthis.$watch('key',(val,oldVal)=>{},{immediate:true});},mounted(){},// ...hook，可以使用 this.$elmethods:{},// ...方法// ...数据监听watch:{// 声明方式1：watch1(val,oldVal){},// 声明方式2：watch2:{immediate:true,// 立即执行handler(val,oldVal){}}}});
About
基于 virtual dom 的轻量级 mvvm 库 >_<#@!
Topics
Resources
Stars
Watchers
Forks
Packages0
No packages published