vue-utils

仿照vue2,vue3的源码实现的功能拆分使用,及包含常用的工具函数(操作cookie,history路由实现等....)

插件使用

由于插件采用原生js编写且不依赖任何第三方库，因此它可以在任意一台支持js的设备上运行。

注意⚠️：如果想将该插件引入大型项目中可直接按照下方方式进行引入,且实例化插件才可以使用，否则插件无法正常工作

import形式使用插件

*** 需要在引入后进行实例化 ***

* npm install xue-vue2

* import vueUtils from "xue-vue2"

* new vueUtils

cdn形式使用插件

• 因为使用nodejs-webserve项目将依赖中的插件进行读取并处理为一个接口
• 所以可以直接使用script标签类似cdn的方式引入到项目中

<script src="http://bing-chuan.work/get_cdn/xue-vue2"></script>

• 在业务代码中使用时实例化插件即可(此处只展示双向绑定和watch,其他功能的支持接着往下看......)

import vueUtils from "xue-vue2";
let vue = {
    //挂载的dom节点元素
    el: "#div1",
    //需要双向绑定(订阅发布)的数据
    data: {
        obj: {
            data: "调试",
        },
    },
    //需要进行监听的双向绑定数据
    wathc:{
        obj(val, oldVal) {
            console.log("watch", val, oldVal);
        }
    }
}
new vueUtils(vue)

目前支持功能

• 虚拟DOM
• Diff更新
• {{ data }} or {{ data + 'test' }} or {{ fn(data) }}
• v-for // v-for="(item, index) in list" or v-for="(item, index) in 10" or v-for="(item, index) in 'string'"
• v-if v-else-if v-else
• v-show
• v-html
• v-model
• v-click @click 点击事件
• computed 计算属性
• watch 监听
• beforeCreate、created、beforeMount、mounted、beforeUpdate、updated
• :class
• :style
• $nextTick
• ref
• reactive
• toRefs
• watchEffect
• Context

补充

npm发包,虚拟dom,双向绑定,diff算法等 不懂的可以看看我之前发的文章(相关代码相比现在有部分改动)：http://bing-chuan.work/blog