mybinder数据绑定使用(mini-mvvm)

作者: admin 分类: 网页前端 发布时间: 2024-10-02 11:35

示例网址:

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’;

 

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

标签云