{"id":19410045,"url":"https://github.com/metadream/que","last_synced_at":"2025-10-08T22:36:49.924Z","repository":{"id":144612505,"uuid":"601633649","full_name":"metadream/que","owner":"metadream","description":"A Simple Javascript MVVM Framework (in ES6)","archived":false,"fork":false,"pushed_at":"2025-01-03T03:54:58.000Z","size":553,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-25T02:25:03.940Z","etag":null,"topics":["javascript-library","mvvm-framework","vue-alternative"],"latest_commit_sha":null,"homepage":"https://que.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metadream.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-14T13:44:34.000Z","updated_at":"2025-01-03T03:55:01.000Z","dependencies_parsed_at":"2023-11-12T07:24:30.551Z","dependency_job_id":"318e4296-0661-47c7-badc-6b6c53908c80","html_url":"https://github.com/metadream/que","commit_stats":null,"previous_names":["metadream/que"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/metadream/que","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metadream%2Fque","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metadream%2Fque/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metadream%2Fque/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metadream%2Fque/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metadream","download_url":"https://codeload.github.com/metadream/que/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metadream%2Fque/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000784,"owners_count":26082851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript-library","mvvm-framework","vue-alternative"],"created_at":"2024-11-10T12:14:41.201Z","updated_at":"2025-10-08T22:36:49.904Z","avatar_url":"https://github.com/metadream.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 项目介绍\n\n!\u003e 跳过废话，[点击这里](#五-开始我的表演) 直接开始表演。\n\n## 一. 为何重复造轮子\n\n现有的 MVVM 框架已经够多够好了，为什么还要自己折腾呢？原因不一而足，体积小巧如\nart-template 则功能太简单，卓越强大如\nVue，为了兼顾各种环境和功能，体积又难免偏大。最让强迫症患者抓狂的是，这些框架们的语法多少有些不尽人意。\n\n我想要的，就是引入一个小小的 JS 文件就能直接开搞，不要 watch 不要 compute 不要\ncomponent，越接近原生越好，能快速渲染页面即可。语法上要求所有指令直接绑定在\nDOM元 素上，而不是另起一行写循环或判断；methods 和 data 并列，而不是单独建立\nmethods 对象。最接近需求框架是微信小程序，可惜它无法直接应用于 Web 项目。\n\n为此，我借鉴了许多经典，掉进过大量深坑，耗费了无数昼夜，浓缩出这个大约 8K\n的小玩意，其核心源自 Vue 的早期版本（新版本看不懂），故取名为 Que（即\nCute-Vue）。麻雀虽小，至少目前对我来说够用了。\n\n## 二. 实现了哪些功能\n\nQue.js 支持七种常用指令，除 Text 和 Attribute\n以外，其他指令的表达式都不需要加`{{}}`花括号。\n\n### 1. Text\n\n```html\n\u003cdiv\u003e{{text}}\u003c/div\u003e\n```\n\n### 2. Attribute\n\n```html\n\u003cdiv class=\"item {{title}}\" data-index=\"{{index}}\"\u003e\u003c/div\u003e\n```\n\n### 3. Hidden\n\n```html\n\u003cdiv hidden=\"errcode == 0\"\u003emessage\u003c/div\u003e\n```\n\n### 4. Model\n\n```html\n\u003cinput model=\"username\"/\u003e\n```\n\n### 5. Event\n\n```html\n\u003cbutton @click=\"change\"\u003etest\u003c/button\u003e\n```\n\n### 6. If\n\n```html\n\u003cdiv if=\"flag == 1\"\u003e\u003c/div\u003e\n```\n\n### 7. Foreach\n\n```html\n\u003cul\u003e\n  \u003cli foreach=\"(item, index) in list\"\u003e{{index}} - {{item}}\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n### 8. Image\n\n为防止 img 标签直接使用 src 属性产生 404 错误，可改用 data-src\n\n```html\n\u003cimg data-src=\"{{imagesrc}}\"/\u003e\n```\n\n## 三. 它是如何运行的\n\n物以类聚，整个 que.js\n包含七个独立的类，完全可以分别形成文件。类之间的运行关系如下：\n![UML](https://cdn.jsdelivr.net/gh/metadream/que/docs/assets/uml.png)\n\n## 四. 兼容性怎么样\n\n不怎么样。因大量使用 ES6 语法，且仅在 Chrome上\n进行过测试，所以，估计，那些不够现代的浏览器无法使用。\n\n## 五. 开始我的表演\n\n### 1. 引入框架\n\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/gh/metadream/que/que.min.js\"\u003e\u003c/script\u003e\n```\n\n### 2. 编写 HTML\n\n```html\n\u003ch1\u003e{{title}}\u003c/h1\u003e\n\u003cul\u003e\n  \u003cli foreach=\"(user, index) in users\"\u003e\n    \u003cb\u003e{{index+1}}\u003c/b\u003e - \u003cspan\u003e{{user.name}}\u003c/span\u003e: \u003cspan\u003e{{user.age}}\u003c/span\u003e\n    \u003cspan if=\"user.sex==1\"\u003emale\u003c/span\u003e\n    \u003cspan else\u003efemale\u003c/span\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n\u003cbutton @click=\"change\"\u003echange\u003c/button\u003e\n```\n\n### 3. 编写 Javascript\n\n```js\nnew Que({\n  data: {\n    title: \"No Title\",\n    users: [],\n  },\n  ready() {\n    this.users = [\n      { name: \"lucy\", age: 23, sex: 0 },\n      { name: \"john\", age: 28, sex: 1 },\n      { name: \"jack\", age: 25, sex: 1 },\n    ];\n  },\n  change() {\n    this.title = \"User List\";\n    this.users.push({\n      name: \"rose\",\n      age: 99,\n      sex: 0,\n    });\n  },\n});\n```\n\n## 六. THANKS\n\n- https://github.com/vuejs/vue\n- https://github.com/qieguo2016/Vueuv\n- https://es6.ruanyifeng.com\n\n## 七. TODO\n\n1. 是否需卸载无用的Watcher对象\n2. 列表渲染由全量更新改为部分更新\n3. 编译和渲染改用流行的虚拟DOM\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetadream%2Fque","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetadream%2Fque","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetadream%2Fque/lists"}