mybinder数据绑定使用(mini-mvvm)
示例网址:
https://github.com/shalldie/mini-mvvm
https://shalldie.github.io/demos/mini-mvvm/
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 组件更新完毕
示例:
var vm=new mybinder({
// 挂载的目标节点的选择器
// 如果没有 template,就用这个节点作为编译模板
el: '#app',
template: `
<div id="app">
<div>{{ content }}</div>
</div>
`,
// data
data: {
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) {}
}
}
});
//外部调用
vm.$data.content=‘this is my blog’;
