/miniVue

🖖 个人实现的一个迷你版本的Vue,用于学习Vue的**和理念

Primary LanguageJavaScriptMIT LicenseMIT

迷你版本Vue

Vue logo

朱昆鹏 MIT

如果有新的理解,我会及时更新的,现在还未完全实现Vue的功能,并且期待大佬的批评指点,我必虚心请教,wx:lyglyglyg666666


使用

# 下载
npm install 

# 编译打包
npm run build

# 预览
npm run serve

# 测试
npm run test 

# 生成测试报告
npm run test:c

实现代码演示(未完)

<script>
    new Vue({
        el: '#app',
        data () {
            return {
                msg: '<h1>朱昆鹏111</h1>',
                age: 21
            }
        },
        methods: {
            clickTest () {
                alert(`msg是:${this.$data.msg}`)
            }
        }
    })
</script>

实现效果演示

动图加载不出来,或者动图不动,可以点击此链接查看动图


目录介绍

  • dist 打包后实现的文件
    • vue.js 打包后的Vue文件
    • index.html 功能演示文件
    • index.js 功能演示JS文件
  • src 源文件
  • test 测试文件(主要使用Jest进行测试)
  • ...

实现列表(大部分计划本周完成)

  • 模板解析(插值表达式 和 指令)
    • 插值表达式解析(解析基础数据绑定)
    • v-text
    • v-html
    • v-model
    • v-on
  • 发布订阅者模式
  • v-model 双向数据绑定
  • vm.$data && vm.$methods 挂载到 vm 上
  • Vue组件写法
    • 基础组件
    • slot
    • ...
  • Vue生命周期
  • 虚拟DOM
  • Diff算法
  • ...

TDD践行(2019.8.14 22:26 更新)

践行TDD ---》 虽然现在写的测试很烂,但是我还是会,不断重构,不断优化,越来越好,越来越严格要求自己


Vue Flow版本 && Typescript版本 核心部分实现计划