A mini mvvm lib with virtual 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、select -
m-if条件渲染。条件支持data、computed、一段表达式 -
m-for循环。(item,index) in array、item in array
-
- 事件绑定
-
@click|@mousedown|...。可以使用$event占位原生事件
-
-
watch数据监听，详见下方示例- 声明方式
- api 方式
- 生命周期
-
created组件创建成功，可以使用this得到 MVVM 的实例 -
beforeMount将要被插入 dom -
mounted组件被添加到 dom，可以使用this.$el获取根节点 dom -
beforeUpdate组件将要更新 -
updated组件更新完毕
-
import MVVM from 'mini-mvvm'; // es module, typescript
// const MVVM from 'mini-mvvm'; // commonjs
// const MVVM = window['MiniMvvm']; // window
new MVVM({
// 挂载的目标节点的选择器
// 如果没有 template，就用这个节点作为编译模板
el: '#app',
template: `
<div id="app">
<div>{{ content }}</div>
</div>
`,
// data
data() {
return {
content: 'this is content.'
};
},
computed: {}, // ...计算属性
// ...hook，可以使用 this
created() {
// 使用api方式去watch
this.$watch('key', (val, oldVal) => {}, { immediate: true });
},
mounted() {}, // ...hook，可以使用 this.$el
methods: {}, // ...方法
// ...数据监听
watch: {
// 声明方式1：
watch1(val, oldVal) {},
// 声明方式2：
watch2: {
immediate: true, // 立即执行
handler(val, oldVal) {}
}
}
});