cue

Target

Lightweight high performance MVVM framework（benchmarks）

Flowsheet

Start

git clone https://github.com/handoing/cue
cd cue/
# 安装依赖
npm install

# 启动示例
npm run run:example

# 启动示例
npm run run:template-explorer

# 监听packages文件变更
npm run watch

# 项目构建
npm run build

# 测试
npm run test

Usage

tpl:

<div
  class="main"
>
  <img class="image" on-click={{this.onChange($event)}} src="{{img}}"/>
  <div class="toggle">toggle {{toggle}}</div>
  <span class="icon"></span>
</div>

js:

module.exports = {
  data: {
    toggle: true,
    img: 'https://hao8.qhimg.com/t01c413c779df7eeecb.jpg'
  },
  created() {
    console.log('created');
  },
  updated() {
    console.log('updated');
  },
  mounted() {
    console.log('mounted');
  },
  destroyed() {
    console.log('destroyed');
  },
  onChange(e) {
    this.setData({
      toggle: !this.data.toggle
    })
  }
};

Progress

compile:

• 模板插值
• 模板表达式
• 模板事件
• 模板if
• 模板list
• 模板include
• 过滤器
  • 自定义过滤器
• 指令
  • c-show
  • c-hide
  • c-class
  • c-html
  • c-model
  • c-style
  • 自定义指令
• 组件

runtime:

• 生命周期
  • created
  • updated
  • mounted
  • destroyed
• 实例属性与方法
• 过滤器
  • 自定义过滤器
• 指令
  • c-show
  • c-hide
  • c-class
  • c-html
  • c-model
  • c-style
  • 自定义指令
• 事件
• 组件
  • 全局组件
  • 局部组件
• 虚拟dom diff
• 异步数据更新
• 插件机制

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Double Han 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!