Skip to content
forked from wolfstark/Fuc

MVVM响应式框架,用于学习vue原理

License

Notifications You must be signed in to change notification settings

clothesmake/Fuc

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

daywatchdaywatch
daywatch
and
daywatch
Jul 18, 2017
e347f48 · Jul 18, 2017

History

9 Commits
Jul 18, 2017
Jul 18, 2017
Jul 18, 2017
Jul 17, 2017
Jul 17, 2017
Jul 17, 2017
Jul 18, 2017
Jul 17, 2017
Jul 11, 2017
Jul 18, 2017
Jul 18, 2017
Jul 18, 2017
Jul 18, 2017

Repository files navigation

�Fuc.js

MVVM响应式框架,用于学习vue原理

Installing

  yarn
  yarn run dev  // 代码调试
  yarn run build  // 代码打包压缩

Feature

  • 优于操作Dom的数据驱动
  • {{}}语法模板解析
  • v-if 指令
  • v-on 和 @event 快捷指令

TODO

  • 完善Vue的其他指令(v-for,v-model...)
  • Typescript重构
  • 查找with的替换方案
  • 使用AST替换当前编译模块

Example

// index.html

<body>
  <div id="app">姓名{{vm.username}}
     <p v-if="vm.showSex">男</p>
    <br>
    <button @click="toggleSex">切换</button>
  </div>
  <script src="../dist/fuc.js"></script>
  <script src="./demo.js"></script>
</body>
// demo.js

new Fuc({
  el: '#app',
  data: {
    name: '王',
    showSex: true,
  },
  methods: {
    toggleSex() {
      this.showSex = !this.showSex;
    },
  },
  computed: {
    username() {
      return `${this.name}翔`;
    },
  },
});

Known issue

  • 由于ES6不再支持with,目前模板上的属性需要加上vm前缀才能识别,正在查找替换方案

License

MIT

Copyright (c) 2013-present, wolfstark

About

MVVM响应式框架,用于学习vue原理

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 97.0%
  • HTML 3.0%