├── todo-vue3 ├── http.js ├── todos.json ├── babel.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── axios.js │ ├── http.js │ ├── scroll.js │ ├── local.js │ ├── mouse.js │ ├── addRemove.js │ ├── components │ │ └── HelloWorld.vue │ ├── App.vue │ └── index.css ├── .gitignore ├── README.md ├── vue.config.js └── package.json ├── custom-renderer-pixijs ├── .gitignore ├── example │ └── play-plane │ │ ├── src │ │ ├── utils │ │ │ ├── index.js │ │ │ └── hitTestRectangle.js │ │ ├── config │ │ │ └── index.js │ │ ├── use │ │ │ ├── index.js │ │ │ ├── useKeyboard.js │ │ │ └── useKeyboardMove.js │ │ ├── moveBullets.js │ │ ├── component │ │ │ ├── Bullet.js │ │ │ ├── EnemyPlane.js │ │ │ ├── Map.js │ │ │ ├── Plane.js │ │ │ └── GameContainer.js │ │ └── moveEnemyPlane.js │ │ ├── resource │ │ └── assets │ │ │ ├── map.jpeg │ │ │ ├── map.png │ │ │ ├── bunny.png │ │ │ ├── enemy.png │ │ │ ├── enemy1.png │ │ │ └── plane.png │ │ ├── babel.config.js │ │ ├── webpack.config.js │ │ ├── game.js │ │ ├── index.js │ │ ├── package.json │ │ ├── README.md │ │ └── uml.dio ├── README.md ├── src │ ├── index.js │ ├── patchProp.js │ └── nodeOps.js └── package.json ├── vite-mini ├── src │ ├── index.css │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── components │ │ └── HelloWorld.vue │ └── App.vue ├── .npmignore ├── public │ └── favicon.ico ├── package.json ├── index.html └── server.js ├── reactivity ├── public │ ├── abc.json │ ├── favicon.ico │ └── index.html ├── babel.config.js ├── src │ ├── assets │ │ └── logo.png │ ├── Three.vue │ ├── main.js │ ├── HTTPRequest.vue │ ├── TimeLine.js │ ├── HTTPRequest.js │ ├── Hash.js │ ├── Fragment.vue │ ├── LocalStorage.js │ ├── Timer.js │ ├── List.vue │ ├── BinaryTree.vue │ ├── vanilla-main.js │ ├── App.vue │ ├── .QRCode.vue │ ├── LocalStorage.vue │ └── ThreeRender.js ├── README.md └── package.json ├── vue3-demo-webpack ├── .gitignore ├── src │ ├── logo.png │ ├── main.js │ └── App.vue ├── index.html ├── package.json ├── README.md └── webpack.config.js ├── vue3-demo-vite ├── .npmignore ├── public │ └── favicon.ico ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── index.css │ ├── App.vue │ └── components │ │ └── HelloWorld.vue ├── index.html └── package.json ├── vue3-todomvc ├── .gitignore ├── public │ └── favicon.ico ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── index.css │ ├── scroll.js │ ├── components │ │ └── HelloWorld.vue │ ├── mouse.js │ └── App.vue ├── index.html └── package.json ├── animate ├── composition │ ├── .gitignore │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── main.js │ │ ├── assets │ │ │ └── logo.png │ │ ├── index.css │ │ ├── counter.js │ │ ├── components │ │ │ └── HelloWorld.vue │ │ ├── mouse.js │ │ ├── todos.js │ │ └── App.vue │ ├── package.json │ └── index.html └── option │ ├── babel.config.js │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── counter.js │ ├── mouse.js │ ├── App.vue │ └── components │ │ └── HelloWorld.vue │ ├── .gitignore │ ├── README.md │ └── package.json ├── workshop ├── vue3-vite │ ├── .gitignore │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.js │ │ ├── index.css │ │ ├── components │ │ │ ├── scroll.js │ │ │ └── HelloWorld.vue │ │ └── App.vue │ ├── package.json │ └── index.html ├── node-reactivity │ ├── server.js │ ├── package.json │ └── package-lock.json └── vue3-kkb │ ├── index.html │ ├── kproxy.js │ └── kkb-vue3.js ├── vue-comp ├── nodemon.json ├── monitor.js ├── package.json ├── list │ ├── row.vue │ ├── list.vue │ └── list-composition.vue ├── ssr-gen.js ├── package-lock.json ├── perf.vue └── ssr.js ├── assets ├── vue3-three.gif ├── vue2-update.gif ├── vue3-canvas.gif ├── vue3-update.gif ├── vue3-update-0741325.gif └── image-20200529165704762.png ├── vue3-runtime-canvas ├── .vscode │ └── settings.json ├── examples │ └── assets │ │ └── bunny.png ├── webpack.config.js ├── index.html ├── package.json ├── runtime-canvas │ ├── index.js │ ├── patchProp.js │ └── nodeOps.js ├── main.js ├── game │ ├── Bullet.js │ └── Plane.js ├── game.js └── index.js ├── todo-vue2 ├── babel.config.js ├── public │ ├── favicon.ico │ ├── index.html │ └── hash.js ├── src │ ├── assets │ │ └── logo.png │ ├── plugins │ │ └── element.js │ ├── main.js │ ├── local.js │ ├── components │ │ └── HelloWorld.vue │ ├── App.vue │ └── index.css ├── vue.config.js ├── .gitignore ├── README.md └── package.json ├── vue2-demo ├── babel.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── list │ │ ├── row.vue │ │ └── list-composition.vue │ ├── App.vue │ └── components │ │ └── HelloWorld.vue ├── .gitignore ├── README.md └── package.json ├── vue3-demo-cli ├── babel.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── App.vue │ └── components │ │ └── HelloWorld.vue ├── .gitignore ├── README.md └── package.json ├── custom-renderer ├── babel.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── App.vue │ ├── App1.vue │ ├── components │ │ └── HelloWorld.vue │ ├── three-renderer.js │ └── renderer.js ├── .gitignore ├── README.md └── package.json ├── .gitignore ├── ssr3 ├── package.json └── server.js ├── ssr2 ├── package.json └── server.js ├── LICENSE ├── compostion-vs-option ├── compisition.vue └── option.vue └── README.md /todo-vue3/http.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /todo-vue3/todos.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /custom-renderer-pixijs/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /vite-mini/src/index.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | color:red; 3 | } 4 | -------------------------------------------------------------------------------- /reactivity/public/abc.json: -------------------------------------------------------------------------------- 1 | { 2 | "a":1200, 3 | "b":2 4 | } -------------------------------------------------------------------------------- /vite-mini/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | *.local -------------------------------------------------------------------------------- /vue3-demo-webpack/.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | .DS_Store 3 | node_modules 4 | -------------------------------------------------------------------------------- /vue3-demo-vite/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | *.local -------------------------------------------------------------------------------- /vue3-todomvc/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | *.local -------------------------------------------------------------------------------- /animate/composition/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | *.local -------------------------------------------------------------------------------- /workshop/vue3-vite/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | *.local -------------------------------------------------------------------------------- /vue-comp/nodemon.json: -------------------------------------------------------------------------------- 1 | { 2 | "verbose": true, 3 | "ignore": ["ssr2.js","ssr3.js"] 4 | } -------------------------------------------------------------------------------- /assets/vue3-three.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/assets/vue3-three.gif -------------------------------------------------------------------------------- /vue3-runtime-canvas/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.words": [ 3 | "PIXI" 4 | ] 5 | } -------------------------------------------------------------------------------- /assets/vue2-update.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/assets/vue2-update.gif -------------------------------------------------------------------------------- /assets/vue3-canvas.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/assets/vue3-canvas.gif -------------------------------------------------------------------------------- /assets/vue3-update.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/assets/vue3-update.gif -------------------------------------------------------------------------------- /todo-vue2/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /todo-vue2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/todo-vue2/public/favicon.ico -------------------------------------------------------------------------------- /todo-vue3/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /todo-vue3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/todo-vue3/public/favicon.ico -------------------------------------------------------------------------------- /vite-mini/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/vite-mini/public/favicon.ico -------------------------------------------------------------------------------- /vue2-demo/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vue2-demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/vue2-demo/public/favicon.ico -------------------------------------------------------------------------------- /animate/option/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /assets/vue3-update-0741325.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/assets/vue3-update-0741325.gif -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/src/utils/index.js: -------------------------------------------------------------------------------- 1 | export { hitTestRectangle } from "./hitTestRectangle"; 2 | -------------------------------------------------------------------------------- /reactivity/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /reactivity/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/reactivity/public/favicon.ico -------------------------------------------------------------------------------- /reactivity/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/reactivity/src/assets/logo.png -------------------------------------------------------------------------------- /todo-vue2/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/todo-vue2/src/assets/logo.png -------------------------------------------------------------------------------- /todo-vue3/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/todo-vue3/src/assets/logo.png -------------------------------------------------------------------------------- /vite-mini/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/vite-mini/src/assets/logo.png -------------------------------------------------------------------------------- /vue2-demo/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/vue2-demo/src/assets/logo.png -------------------------------------------------------------------------------- /vue3-demo-cli/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vue3-demo-webpack/src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/vue3-demo-webpack/src/logo.png -------------------------------------------------------------------------------- /vue3-todomvc/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/vue3-todomvc/public/favicon.ico -------------------------------------------------------------------------------- /animate/option/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/animate/option/public/favicon.ico -------------------------------------------------------------------------------- /custom-renderer/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vue3-demo-cli/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/vue3-demo-cli/public/favicon.ico -------------------------------------------------------------------------------- /vue3-demo-cli/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/vue3-demo-cli/src/assets/logo.png -------------------------------------------------------------------------------- /vue3-demo-vite/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/vue3-demo-vite/public/favicon.ico -------------------------------------------------------------------------------- /vue3-todomvc/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/vue3-todomvc/src/assets/logo.png -------------------------------------------------------------------------------- /animate/option/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/animate/option/src/assets/logo.png -------------------------------------------------------------------------------- /assets/image-20200529165704762.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/assets/image-20200529165704762.png -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/src/config/index.js: -------------------------------------------------------------------------------- 1 | export const stage = { 2 | width: 750, 3 | height: 800, 4 | }; 5 | -------------------------------------------------------------------------------- /custom-renderer/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/custom-renderer/public/favicon.ico -------------------------------------------------------------------------------- /custom-renderer/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/custom-renderer/src/assets/logo.png -------------------------------------------------------------------------------- /vue3-demo-vite/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/vue3-demo-vite/src/assets/logo.png -------------------------------------------------------------------------------- /animate/composition/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/animate/composition/public/favicon.ico -------------------------------------------------------------------------------- /animate/composition/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /vue3-demo-webpack/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /workshop/vue3-vite/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/workshop/vue3-vite/public/favicon.ico -------------------------------------------------------------------------------- /workshop/vue3-vite/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/workshop/vue3-vite/src/assets/logo.png -------------------------------------------------------------------------------- /animate/composition/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/animate/composition/src/assets/logo.png -------------------------------------------------------------------------------- /todo-vue3/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue' 3 | import './index.css' 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /vue3-demo-webpack/index.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | .DS_Store 3 | node_modules 4 | coverage 5 | temp 6 | explorations 7 | TODOs.md 8 | *.log 9 | 10 | */node_modules 11 | 12 | -------------------------------------------------------------------------------- /vue3-runtime-canvas/examples/assets/bunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/vue3-runtime-canvas/examples/assets/bunny.png -------------------------------------------------------------------------------- /vue3-demo-cli/src/main.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import {createApp} from 'vue' 4 | import App from './App.vue' 5 | let vm = createApp(App) 6 | vm.mount('#app') 7 | 8 | -------------------------------------------------------------------------------- /vue3-demo-vite/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import './index.css' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /vue2-demo/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | let vm = new Vue({ 5 | render: h => h(App), 6 | }).$mount('#app') 7 | 8 | -------------------------------------------------------------------------------- /workshop/vue3-vite/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import './index.css' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/src/use/index.js: -------------------------------------------------------------------------------- 1 | export { useKeyboardMove } from "./useKeyboardMove"; 2 | export { useKeyboard } from "./useKeyboard"; 3 | -------------------------------------------------------------------------------- /todo-vue2/src/plugins/element.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Element from 'element-ui' 3 | import 'element-ui/lib/theme-chalk/index.css' 4 | 5 | Vue.use(Element) 6 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/resource/assets/map.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/custom-renderer-pixijs/example/play-plane/resource/assets/map.jpeg -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/resource/assets/map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/custom-renderer-pixijs/example/play-plane/resource/assets/map.png -------------------------------------------------------------------------------- /animate/option/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/resource/assets/bunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/custom-renderer-pixijs/example/play-plane/resource/assets/bunny.png -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/resource/assets/enemy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/custom-renderer-pixijs/example/play-plane/resource/assets/enemy.png -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/resource/assets/enemy1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/custom-renderer-pixijs/example/play-plane/resource/assets/enemy1.png -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/resource/assets/plane.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shengxinjing/vue3-vs-vue2/HEAD/custom-renderer-pixijs/example/play-plane/resource/assets/plane.png -------------------------------------------------------------------------------- /vue3-todomvc/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import './index.css' 4 | import 'todomvc-app-css/index.css' 5 | 6 | createApp(App).mount('#app') 7 | -------------------------------------------------------------------------------- /reactivity/src/Three.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /todo-vue2/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import './index.css' 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | render: h => h(App), 9 | }).$mount('#app') 10 | -------------------------------------------------------------------------------- /custom-renderer/src/main.js: -------------------------------------------------------------------------------- 1 | // import { createApp } from './three-renderer'; 2 | // import App from "./App.vue"; 3 | 4 | import { createApp } from './renderer'; 5 | import App from "./App1.vue"; 6 | createApp(App).mount("#app") 7 | 8 | 9 | -------------------------------------------------------------------------------- /reactivity/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from '@vue/runtime-dom'; 2 | //import { createApp } from './ThreeRender'; 3 | 4 | import App from "./App.vue"; 5 | 6 | //import "./vanilla-main"; 7 | 8 | createApp(App).mount(document.querySelector("#app")) 9 | -------------------------------------------------------------------------------- /vite-mini/src/main.js: -------------------------------------------------------------------------------- 1 | // import 都会发起一个网络请求 viet拦截这个请求，渲染 2 | import { createApp } from 'vue' // node_module 3 | import App from './App.vue' // 解析成额外的 ?type=template请求 4 | import './index.css' 5 | 6 | createApp(App).mount('#app') 7 | 8 | // alert('2') 9 | -------------------------------------------------------------------------------- /vue3-todomvc/src/index.css: -------------------------------------------------------------------------------- 1 | #app { 2 | font-family: Avenir, Helvetica, Arial, sans-serif; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-osx-font-smoothing: grayscale; 5 | text-align: center; 6 | color: #2c3e50; 7 | margin-top: 60px; 8 | } 9 | -------------------------------------------------------------------------------- /reactivity/src/HTTPRequest.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /vue3-demo-vite/src/index.css: -------------------------------------------------------------------------------- 1 | #app { 2 | font-family: Avenir, Helvetica, Arial, sans-serif; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-osx-font-smoothing: grayscale; 5 | text-align: center; 6 | color: #2c3e50; 7 | margin-top: 60px; 8 | } 9 | -------------------------------------------------------------------------------- /workshop/vue3-vite/src/index.css: -------------------------------------------------------------------------------- 1 | #app { 2 | font-family: Avenir, Helvetica, Arial, sans-serif; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-osx-font-smoothing: grayscale; 5 | text-align: center; 6 | color: #2c3e50; 7 | margin-top: 60px; 8 | } 9 | -------------------------------------------------------------------------------- /animate/composition/src/index.css: -------------------------------------------------------------------------------- 1 | #app { 2 | font-family: Avenir, Helvetica, Arial, sans-serif; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-osx-font-smoothing: grayscale; 5 | text-align: center; 6 | color: #2c3e50; 7 | margin-top: 60px; 8 | } 9 | -------------------------------------------------------------------------------- /reactivity/src/TimeLine.js: -------------------------------------------------------------------------------- 1 | import {reactive} from "@vue/reactivity"; 2 | let timer = { 3 | t: 0 4 | } 5 | let observer = reactive(timer); 6 | 7 | setInterval(function(){ 8 | observer.t = Date.now(); 9 | }, 1000) 10 | 11 | export default observer; -------------------------------------------------------------------------------- /todo-vue2/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | devServer: { 3 | proxy:{ 4 | '/api/':{ 5 | target:'http://localhost:7001', 6 | secure:false, 7 | pathRewrite:{ 8 | '^/api':'' 9 | } 10 | } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /animate/option/src/counter.js: -------------------------------------------------------------------------------- 1 | export default { 2 | data() { 3 | return { 4 | count:1 5 | } 6 | }, 7 | computed: { 8 | double() { 9 | return this.count * 2 10 | } 11 | }, 12 | methods:{ 13 | add(){ 14 | this.count++ 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /vue3-runtime-canvas/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | module.exports = { 3 | devtool: "source-map", 4 | mode: "development", 5 | entry: "./index.js", 6 | output: { 7 | filename: "main.js", 8 | path: path.resolve(__dirname, "./dist"), 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/babel.config.js: -------------------------------------------------------------------------------- 1 | // babel.config.js 2 | module.exports = { 3 | presets: [ 4 | [ 5 | '@babel/preset-env', 6 | { 7 | targets: { 8 | node: 'current', 9 | }, 10 | }, 11 | ], 12 | ], 13 | }; -------------------------------------------------------------------------------- /animate/composition/src/counter.js: -------------------------------------------------------------------------------- 1 | 2 | import {ref, computed} from 'vue' 3 | 4 | export default function useCounter(){ 5 | let count = ref(1) 6 | function add(){ 7 | count.value++ 8 | } 9 | let double = computed(()=>count.value*2) 10 | return {count, double, add} 11 | } 12 | 13 | -------------------------------------------------------------------------------- /vue3-demo-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vite App 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /reactivity/src/HTTPRequest.js: -------------------------------------------------------------------------------- 1 | import {reactive} from "@vue/reactivity"; 2 | 3 | 4 | export default function HTTPRequest(url, method, headers){ 5 | let data = reactive({}); 6 | fetch(url) 7 | .then(response => response.json()) 8 | .then(d => Object.assign(data, d)); 9 | return data; 10 | } 11 | -------------------------------------------------------------------------------- /todo-vue2/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /todo-vue3/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /vue-comp/monitor.js: -------------------------------------------------------------------------------- 1 | export default function monitor (action, fn,vm) { 2 | return function () { 3 | var s = window.performance.now() 4 | fn.apply(this, arguments) 5 | Vue.nextTick(function () { 6 | vm.action = action 7 | vm.time = window.performance.now() - s 8 | }) 9 | } 10 | } -------------------------------------------------------------------------------- /vue2-demo/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /custom-renderer/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /vue3-demo-cli/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | devtool: "source-map", 5 | mode: "development", 6 | entry: path.resolve(__dirname,"./index.js"), 7 | output: { 8 | filename: "main.js", 9 | path: path.resolve(__dirname, "./dist"), 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /workshop/node-reactivity/server.js: -------------------------------------------------------------------------------- 1 | const {ref, computed,effect} = require('@vue/reactivity') 2 | 3 | let count = ref(1) 4 | setInterval(()=>{ 5 | count.value++ 6 | },1000) 7 | // let double = computed(()=> count.value*2) 8 | effect(()=>{ 9 | console.log('count is',count.value) 10 | }) 11 | 12 | // composition = @vue/reactivity + 生命周期 -------------------------------------------------------------------------------- /animate/composition/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "composition", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build" 7 | }, 8 | "dependencies": { 9 | "vue": "^3.0.2" 10 | }, 11 | "devDependencies": { 12 | "vite": "^1.0.0-rc.8", 13 | "@vue/compiler-sfc": "^3.0.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/README.md: -------------------------------------------------------------------------------- 1 | # vue-pixijs 2 | 3 | 使用 vue3 的语法来开发 pixijs 4 | 5 | ## 实现原理 6 | 7 | 实现了自定义的 vue Renderer ，渲染使用 pixijs 8 | 9 | 10 | ## why 11 | 12 | 1. 需求驱动学习 vue3 + pixijs 13 | 2. 以开发小游戏的形式去完善 Renderer 14 | 15 | 16 | ## 进行中 17 | 1. [打飞机游戏](https://github.com/cuixiaorui/vue-pixijs/tree/master/example/play-plane) 18 | 19 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/src/utils/hitTestRectangle.js: -------------------------------------------------------------------------------- 1 | export const hitTestRectangle = (objectA, objectB) => { 2 | return ( 3 | objectA.x + objectA.width > objectB.x && 4 | objectA.x < objectB.x + objectB.width && 5 | objectA.y + objectA.height > objectB.y && 6 | objectA.y < objectB.y + objectB.height 7 | ); 8 | }; 9 | -------------------------------------------------------------------------------- /reactivity/src/Hash.js: -------------------------------------------------------------------------------- 1 | import {reactive} from "@vue/reactivity"; 2 | 3 | 4 | export default function HTTPRequest(){ 5 | let data = reactive({}); 6 | data.value = document.location.hash; 7 | window.addEventListener("hashchange", (v1, v2) => { 8 | data.value = document.location.hash 9 | }) 10 | return data; 11 | } 12 | -------------------------------------------------------------------------------- /vue3-demo-vite/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 | -------------------------------------------------------------------------------- /vue3-demo-vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-demo-vite", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build" 7 | }, 8 | "dependencies": { 9 | "vue": "^3.0.0-beta.14" 10 | }, 11 | "devDependencies": { 12 | "vite": "^0.19.0", 13 | "@vue/compiler-sfc": "^3.0.0-beta.14" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /animate/option/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /vue3-runtime-canvas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /workshop/vue3-vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-vite", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build" 7 | }, 8 | "dependencies": { 9 | "vue": "^3.0.0-beta.15" 10 | }, 11 | "devDependencies": { 12 | "vite": "^1.0.0-beta.3", 13 | "@vue/compiler-sfc": "^3.0.0-beta.15" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/game.js: -------------------------------------------------------------------------------- 1 | import * as PIXI from "PIXI.js"; 2 | 3 | export const game = initPixi(); 4 | 5 | function initPixi() { 6 | let app = new PIXI.Application({ 7 | width: 750, 8 | height: 800, 9 | }); 10 | app.renderer.backgroundColor = 0x061639; 11 | document.body.appendChild(app.view); 12 | return app; 13 | } 14 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/index.js: -------------------------------------------------------------------------------- 1 | import { initRuntimeCanvas } from "../../src/index"; 2 | import gameComponent from "./src/component/GameContainer"; 3 | import { game } from "./game"; 4 | 5 | const { renderer } = initRuntimeCanvas(); 6 | 7 | // root component 作为游戏的根容器 8 | const root = renderer.createApp(gameComponent); 9 | root.mount(game.stage); 10 | -------------------------------------------------------------------------------- /reactivity/src/Fragment.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /vue2-demo/README.md: -------------------------------------------------------------------------------- 1 | # vue2-demo 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Customize configuration 19 | See [Configuration Reference](https://cli.vuejs.org/config/). 20 | -------------------------------------------------------------------------------- /animate/option/README.md: -------------------------------------------------------------------------------- 1 | # option 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Customize configuration 19 | See [Configuration Reference](https://cli.vuejs.org/config/). 20 | -------------------------------------------------------------------------------- /todo-vue3/README.md: -------------------------------------------------------------------------------- 1 | # vue-composition-api 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Customize configuration 19 | See [Configuration Reference](https://cli.vuejs.org/config/). 20 | -------------------------------------------------------------------------------- /vue3-demo-cli/README.md: -------------------------------------------------------------------------------- 1 | # vue3-demo-cli 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Customize configuration 19 | See [Configuration Reference](https://cli.vuejs.org/config/). 20 | -------------------------------------------------------------------------------- /custom-renderer/README.md: -------------------------------------------------------------------------------- 1 | # custom-renderer 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Customize configuration 19 | See [Configuration Reference](https://cli.vuejs.org/config/). 20 | -------------------------------------------------------------------------------- /vue3-todomvc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /vue3-todomvc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-todomcv", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build" 7 | }, 8 | "dependencies": { 9 | "todomvc-app-css": "^2.3.0", 10 | "vue": "^3.0.0-beta.15" 11 | }, 12 | "devDependencies": { 13 | "vite": "^1.0.0-beta.3", 14 | "@vue/compiler-sfc": "^3.0.0-beta.15" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /workshop/node-reactivity/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node-reactivity", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "@vue/reactivity": "^3.0.0-beta.20" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /workshop/vue3-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /animate/composition/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /reactivity/src/LocalStorage.js: -------------------------------------------------------------------------------- 1 | import {reactive, ref, effect} from "@vue/reactivity"; 2 | 3 | 4 | export default function LocalStorage(key, defaultValue){ 5 | let data = reactive({}); 6 | 7 | Object.assign(data, localStorage[key] && JSON.parse(localStorage[key]) || defaultValue); 8 | 9 | effect(() => localStorage[key] = JSON.stringify(data)); 10 | 11 | return data; 12 | } 13 | -------------------------------------------------------------------------------- /todo-vue2/src/local.js: -------------------------------------------------------------------------------- 1 | const STORAGE_KEY = 'todo-vue2' 2 | export default { 3 | get: function () { 4 | var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]') 5 | todos.forEach(function (todo, index) { 6 | todo.id = index 7 | }) 8 | return todos 9 | }, 10 | set: function (todos) { 11 | localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)) 12 | } 13 | } -------------------------------------------------------------------------------- /todo-vue3/src/axios.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | let request = axios.create({ 3 | baseURL:"/api" 4 | }) 5 | 6 | 7 | request.interceptors.response.use( 8 | async response=>{ 9 | // header config这里处理就可以了，应用层只需要数据data 10 | let {data} = response 11 | // if(dat) 12 | return data 13 | 14 | } 15 | ) 16 | 17 | export default request 18 | 19 | 20 | -------------------------------------------------------------------------------- /reactivity/src/Timer.js: -------------------------------------------------------------------------------- 1 | import {reactive} from "@vue/reactivity"; 2 | 3 | let timer = { 4 | t: 0 5 | } 6 | 7 | let observer = reactive(timer); 8 | 9 | let begin = Date.now(); 10 | 11 | setInterval(function(){ 12 | observer.s = new Date().getSeconds(); 13 | observer.m = new Date().getMinutes(); 14 | observer.h = new Date().getHour(); 15 | }, 500); 16 | 17 | 18 | export default observer; -------------------------------------------------------------------------------- /vue-comp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-comp", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "ssr-gen.js", 6 | "dependencies": { 7 | "vue-template-compiler": "^2.6.11" 8 | }, 9 | "devDependencies": {}, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC" 16 | } 17 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/src/index.js: -------------------------------------------------------------------------------- 1 | import { createRenderer } from "@vue/runtime-core"; 2 | import { nodeOps } from "./nodeOps"; 3 | import { patchProp } from "./patchProp"; 4 | 5 | export const initRuntimeCanvas = () => { 6 | const renderer = createRenderer({ 7 | ...nodeOps, 8 | patchProp, 9 | }); 10 | 11 | return { 12 | renderer, 13 | }; 14 | }; 15 | 16 | export * from "@vue/runtime-core"; 17 | -------------------------------------------------------------------------------- /todo-vue3/src/http.js: -------------------------------------------------------------------------------- 1 | import {reactive, ref, effect} from "@vue/reactivity"; 2 | import axios from "axios"; 3 | 4 | 5 | export default async function(url,defaultValue){ 6 | let obj = reactive({}); 7 | const {data} = await axios.get(url) 8 | Object.assign(obj, defaultValue,data); 9 | console.log(obj) 10 | effect(() => axios.post(url,data),{lazy:true}); 11 | return data; 12 | 13 | } 14 | 15 | -------------------------------------------------------------------------------- /vite-mini/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-demo6", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build" 7 | }, 8 | "dependencies": { 9 | "@vue/compiler-dom": "^3.0.0-beta.14", 10 | "koa": "^2.12.0", 11 | "vue": "^3.0.0-beta.14" 12 | }, 13 | "devDependencies": { 14 | "@vue/compiler-sfc": "^3.0.0-beta.14", 15 | "vite": "^0.20.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /reactivity/src/List.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /todo-vue3/src/scroll.js: -------------------------------------------------------------------------------- 1 | import { ref, onMounted, onUnmounted } from 'vue' 2 | export default function useScroll() { 3 | const top = ref(0) 4 | 5 | function update(e) { 6 | top.value = window.scrollY 7 | } 8 | 9 | onMounted(() => { 10 | window.addEventListener('scroll', update) 11 | }) 12 | 13 | onUnmounted(() => { 14 | window.removeEventListener('scroll', update) 15 | }) 16 | 17 | return { top } 18 | } -------------------------------------------------------------------------------- /vue3-todomvc/src/scroll.js: -------------------------------------------------------------------------------- 1 | import { ref, onMounted, onUnmounted } from 'vue' 2 | export default function useScroll() { 3 | const top = ref(0) 4 | 5 | function update(e) { 6 | top.value = window.scrollY 7 | } 8 | 9 | onMounted(() => { 10 | window.addEventListener('scroll', update) 11 | }) 12 | 13 | onUnmounted(() => { 14 | window.removeEventListener('scroll', update) 15 | }) 16 | 17 | return { top } 18 | } -------------------------------------------------------------------------------- /ssr3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ssr3", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "@vue/server-renderer": "^3.0.0-beta.14", 14 | "express": "^4.17.1", 15 | "vue": "^3.0.0-beta.14" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /vite-mini/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /vue3-todomvc/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /workshop/vue3-vite/src/components/scroll.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import {ref, onMounted,onUnmounted} from 'vue' 4 | 5 | // 节流防抖 6 | export default function useScroll(){ 7 | const top = ref(0) 8 | function update(e){ 9 | top.value = window.scrollY 10 | } 11 | onMounted(()=>{ 12 | window.addEventListener('scroll',update) 13 | }) 14 | onUnmounted(()=>{ 15 | window.removeEventListener('scroll',update) 16 | }) 17 | 18 | return {top} 19 | } -------------------------------------------------------------------------------- /animate/option/src/mouse.js: -------------------------------------------------------------------------------- 1 | export default { 2 | data() { 3 | return { 4 | x:0 5 | } 6 | }, 7 | methods:{ 8 | update(e){ 9 | this.x = e.pageX 10 | } 11 | }, 12 | computed:{ 13 | double(){ 14 | return this.x*2 15 | } 16 | }, 17 | mounted(){ 18 | window.addEventListener('mousemove', this.update) 19 | }, 20 | destroyed(){ 21 | window.removeEventListener('mousemove', this.update) 22 | } 23 | } -------------------------------------------------------------------------------- /vue3-demo-vite/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /workshop/vue3-vite/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /animate/composition/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /animate/composition/src/mouse.js: -------------------------------------------------------------------------------- 1 | import {ref, onMounted, onUnmounted, computed} from 'vue' 2 | 3 | export default function useMouse(){ 4 | let x = ref(0) 5 | function update(e){ 6 | x.value = e.pageX 7 | } 8 | let double = computed(()=>x.value*2) 9 | onMounted(()=>{ 10 | window.addEventListener('mousemove', update) 11 | }) 12 | onUnmounted(()=>{ 13 | window.removeEventListener('mousemove', update) 14 | }) 15 | return {x, double} 16 | 17 | } -------------------------------------------------------------------------------- /todo-vue3/src/local.js: -------------------------------------------------------------------------------- 1 | import {reactive, ref, effect} from "@vue/reactivity"; 2 | 3 | 4 | export default function(key, defaultValue= [{ 5 | id: "1", 6 | title: "吃饭", 7 | completed: false 8 | }]){ 9 | let data = reactive({}); 10 | 11 | Object.assign(data, localStorage[key] && JSON.parse(localStorage[key]) || defaultValue); 12 | 13 | effect(() => localStorage[key] = JSON.stringify(data)); 14 | console.log(data) 15 | return data; 16 | } 17 | -------------------------------------------------------------------------------- /todo-vue3/vue.config.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | module.exports = { 3 | devServer: { 4 | before(app){ 5 | app.get('/api/todos', (req,res)=>{ 6 | res.json(JSON.parse(fs.readFileSync('./todos.json'))) 7 | }) 8 | 9 | app.post('/api/todos', (req,res)=>{ 10 | console.log(req.body) 11 | res.json(JSON.parse(fs.readFileSync('./todos.json'))) 12 | }) 13 | 14 | } 15 | 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /vue-comp/list/row.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /reactivity/src/BinaryTree.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /todo-vue3/src/mouse.js: -------------------------------------------------------------------------------- 1 | import { ref, onMounted, onUnmounted } from 'vue' 2 | export default function useMousePosition() { 3 | const x = ref(10) 4 | const y = ref(10) 5 | 6 | function update(e) { 7 | x.value = e.pageX 8 | y.value = e.pageY 9 | } 10 | 11 | onMounted(() => { 12 | window.addEventListener('mousemove', update) 13 | }) 14 | 15 | onUnmounted(() => { 16 | window.removeEventListener('mousemove', update) 17 | }) 18 | 19 | return { x, y } 20 | } -------------------------------------------------------------------------------- /vue3-todomvc/src/mouse.js: -------------------------------------------------------------------------------- 1 | import { ref, onMounted, onUnmounted } from 'vue' 2 | export default function useMousePosition() { 3 | const x = ref(10) 4 | const y = ref(10) 5 | 6 | function update(e) { 7 | x.value = e.pageX 8 | y.value = e.pageY 9 | } 10 | 11 | onMounted(() => { 12 | window.addEventListener('mousemove', update) 13 | }) 14 | 15 | onUnmounted(() => { 16 | window.removeEventListener('mousemove', update) 17 | }) 18 | 19 | return { x, y } 20 | } -------------------------------------------------------------------------------- /vite-mini/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /reactivity/README.md: -------------------------------------------------------------------------------- 1 | # mvvm-demo 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /todo-vue2/README.md: -------------------------------------------------------------------------------- 1 | # client 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /animate/composition/src/todos.js: -------------------------------------------------------------------------------- 1 | import { reactive, ref } from 'vue' 2 | 3 | export default function useTodo() { 4 | let val = ref('') 5 | let todos = reactive([ 6 | { id: 0, title: '吃饭', done: false }, 7 | { id: 1, title: '睡觉', done: false }, 8 | { id: 2, title: 'lsp', done: false }, 9 | ]) 10 | function addTodo() { 11 | todos.push({ 12 | id: todos.length, 13 | title: val.value, 14 | done: false 15 | }) 16 | val.value = '' 17 | } 18 | return { val,todos, addTodo} 19 | } -------------------------------------------------------------------------------- /todo-vue3/src/addRemove.js: -------------------------------------------------------------------------------- 1 | export default function (state) { 2 | function addTodo() { 3 | var value = state.newTodo && state.newTodo.trim(); 4 | if (!value) { 5 | return; 6 | } 7 | state.todos.push({ 8 | id: state.todos.length + 1, 9 | title: value, 10 | completed: false 11 | }); 12 | state.newTodo = ""; 13 | } 14 | function removeTodo(todo) { 15 | var index = state.todos.indexOf(todo); 16 | state.todos.splice(index, 1); 17 | } 18 | return { addTodo, removeTodo } 19 | } -------------------------------------------------------------------------------- /vue3-runtime-canvas/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-runtime-canvas", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "@vue/runtime-dom": "^3.0.0-beta.14", 15 | "pixi.js": "^5.2.4" 16 | }, 17 | "devDependencies": { 18 | "webpack": "^4.43.0", 19 | "webpack-cli": "^3.3.11" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /vue3-runtime-canvas/runtime-canvas/index.js: -------------------------------------------------------------------------------- 1 | import { createRenderer } from "@vue/runtime-core"; 2 | import { getNodeOps } from "./nodeOps"; 3 | import { patchProp } from "./patchProp"; 4 | 5 | // const { render, createApp:canvasCreateApp } = createRenderer({ 6 | // ...nodeOps, 7 | // }); 8 | 9 | export const initRuntimeCanvas = (app) => { 10 | const renderer = createRenderer({ 11 | ...getNodeOps(app), 12 | patchProp, 13 | }); 14 | 15 | return { 16 | renderer, 17 | }; 18 | }; 19 | 20 | export * from "@vue/runtime-core"; 21 | -------------------------------------------------------------------------------- /animate/option/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "option", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.5", 11 | "vue": "^2.6.11" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "~4.5.0", 15 | "@vue/cli-service": "~4.5.0", 16 | "vue-template-compiler": "^2.6.11" 17 | }, 18 | "browserslist": [ 19 | "> 1%", 20 | "last 2 versions", 21 | "not dead" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /ssr2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ssr", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "express": "^4.17.1", 14 | "vue-template-compiler": "^2.6.11" 15 | }, 16 | "dependencies": { 17 | "@vue/runtime-dom": "^3.0.0-beta.14", 18 | "@vue/server-renderer": "^3.0.0-beta.14", 19 | "vue": "^2.6.11", 20 | "vue-server-renderer": "^2.6.11" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /vue2-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-demo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.4", 11 | "vue": "^2.6.11" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "~4.3.0", 15 | "@vue/cli-service": "~4.3.0", 16 | "lodash": "^4.17.15", 17 | "vue-template-compiler": "^2.6.11" 18 | }, 19 | "browserslist": [ 20 | "> 1%", 21 | "last 2 versions", 22 | "not dead" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /vite-mini/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |

kkb

11 |
12 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /vue3-demo-webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "webpack-dev-server", 5 | "build": "webpack --env.prod" 6 | }, 7 | "dependencies": { 8 | "vue": "^3.0.0-beta.2" 9 | }, 10 | "devDependencies": { 11 | "@vue/compiler-sfc": "^3.0.0-beta.2", 12 | "css-loader": "^3.4.2", 13 | "file-loader": "^6.0.0", 14 | "mini-css-extract-plugin": "^0.9.0", 15 | "url-loader": "^4.0.0", 16 | "vue-loader": "^16.0.0-alpha.3", 17 | "webpack": "^4.42.1", 18 | "webpack-cli": "^3.3.11", 19 | "webpack-dev-server": "^3.10.3" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /vue3-demo-webpack/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 24 | 25 | 33 | -------------------------------------------------------------------------------- /ssr2/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const app = express() 3 | const vueapp = require('vue-comp/ssr') 4 | const Vue = require('vue') 5 | const renderer2 = require('vue-server-renderer').createRenderer() 6 | const vue2Compile= require('vue-template-compiler') 7 | 8 | vueapp.render = new Function(vue2Compile.ssrCompile(vueapp.template).render) 9 | 10 | 11 | app.get('/',async function(req,res){ 12 | 13 | let vapp = new Vue(vueapp) 14 | let html = await renderer2.renderToString(vapp) 15 | res.send(`

vue2

`+html) 16 | }) 17 | 18 | app.listen(9092,()=>{ 19 | console.log('listen 9092') 20 | }) 21 | -------------------------------------------------------------------------------- /ssr3/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const app = express() 3 | const vueapp = require('vue-comp/ssr') 4 | const Vue = require('vue') // vue@next 5 | const renderer3 = require('@vue/server-renderer') 6 | const vue3Compile= require('@vue/compiler-ssr') 7 | vueapp.ssrRender = new Function('require',vue3Compile.compile(vueapp.template).code)(require) 8 | 9 | app.get('/',async function(req,res){ 10 | let vapp = Vue.createApp(vueapp) 11 | let html = await renderer3.renderToString(vapp) 12 | res.send(`

vue3

`+html) 13 | }) 14 | 15 | app.listen(9093,()=>{ 16 | console.log('listen 9093') 17 | }) 18 | -------------------------------------------------------------------------------- /vue-comp/ssr-gen.js: -------------------------------------------------------------------------------- 1 | const vue2Compile= require('vue-template-compiler') 2 | const vue3Compile= require('@vue/compiler-ssr') 3 | const fs = require('fs') 4 | const ssr = require('./ssr') 5 | 6 | // console.log(comp) 7 | fs.writeFileSync('ssr/ssr2.js',`module.exports = { 8 | ${ssr.data.toString()}, 9 | render(){${vue2Compile.compile(ssr.template).render}} 10 | }`) 11 | 12 | 13 | console.log(vue3Compile.compile(ssr.template)) 14 | fs.writeFileSync('ssr/ssr3.js',`module.exports = { 15 | ${ssr.data.toString()}, 16 | ssrRender(){${vue3Compile.compile(ssr.template).code}} 17 | }`) 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /reactivity/src/vanilla-main.js: -------------------------------------------------------------------------------- 1 | import {reactive, ref, effect} from "@vue/reactivity"; 2 | 3 | let data = ref(1); 4 | 5 | let input1 = document.createElement("input"); 6 | 7 | document.getElementById("app").appendChild(input1); 8 | 9 | 10 | input1.addEventListener("input", (event) => { 11 | data.value = event.target.value; 12 | }) 13 | effect(()=> input1.value = data.value) 14 | 15 | 16 | let input2 = document.createElement("input"); 17 | document.getElementById("app").appendChild(input2); 18 | 19 | input2.addEventListener("input", (event) => { 20 | data.value = event.target.value; 21 | }) 22 | effect(()=> input2.value = data.value) -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/src/moveBullets.js: -------------------------------------------------------------------------------- 1 | import { stage } from "./config"; 2 | const bulletSpeed = 3; 3 | const topLine = -100; 4 | const bottomLine = stage.height + 50; 5 | 6 | const isOverBorder = (val) => { 7 | if (val > bottomLine) { 8 | return true; 9 | } 10 | 11 | if (val < topLine) { 12 | return true; 13 | } 14 | 15 | return false; 16 | }; 17 | 18 | export const moveBullets = (bullets) => { 19 | bullets.forEach((bullet, index) => { 20 | const dir = bullet.dir; 21 | bullet.y += bulletSpeed * dir; 22 | if (isOverBorder(bullet.y)) { 23 | bullets.splice(index, 1); 24 | } 25 | }); 26 | }; 27 | -------------------------------------------------------------------------------- /custom-renderer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custom-renderer", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.4", 11 | "three": "^0.116.1", 12 | "vue": "^3.0.0-beta.1" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "~4.3.0", 16 | "@vue/cli-service": "~4.3.0", 17 | "@vue/compiler-sfc": "^3.0.0-beta.1", 18 | "vue-cli-plugin-vue-next": "~0.1.3" 19 | }, 20 | "browserslist": [ 21 | "> 1%", 22 | "last 2 versions", 23 | "not dead" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /vue3-demo-cli/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-demo-cli", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.4", 11 | "vue": "^3.0.0-beta.1" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "~4.3.0", 15 | "@vue/cli-service": "~4.3.0", 16 | "@vue/compiler-sfc": "^3.0.0-beta.1", 17 | "lodash": "^4.17.15", 18 | "vue-cli-plugin-vue-next": "~0.1.2" 19 | }, 20 | "browserslist": [ 21 | "> 1%", 22 | "last 2 versions", 23 | "not dead" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "play-plane", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "build": "webpack", 7 | "start": "serve .", 8 | "test": "jest" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "@babel/core": "^7.10.2", 15 | "@babel/preset-env": "^7.10.2", 16 | "babel-jest": "^26.0.1", 17 | "jest": "^26.0.1", 18 | "serve": "^11.3.1", 19 | "webpack": "^4.43.0", 20 | "webpack-cli": "^3.3.11" 21 | }, 22 | "dependencies": { 23 | "pixi.js": "^5.2.4" 24 | }, 25 | "description": "" 26 | } 27 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/src/component/Bullet.js: -------------------------------------------------------------------------------- 1 | import { h, ref, defineComponent, watch } from "../../../../src/index"; 2 | 3 | //炮弹 4 | export default defineComponent({ 5 | props: ["x", "y", "id"], 6 | setup(props, ctx) { 7 | const x = ref(props.x); 8 | const y = ref(props.y); 9 | 10 | watch(props, (newProps) => { 11 | x.value = newProps.x; 12 | y.value = newProps.y; 13 | }); 14 | 15 | return { 16 | x, 17 | y, 18 | }; 19 | }, 20 | render(ctx) { 21 | return h("Sprite", { 22 | x: ctx.x, 23 | y: ctx.y, 24 | texture: "../../resource/assets/bunny.png", 25 | }); 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /todo-vue3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-composition-api", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "axios": "^0.19.2", 11 | "core-js": "^3.6.4", 12 | "vue": "^3.0.0-beta.1" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "~4.3.0", 16 | "@vue/cli-service": "~4.3.0", 17 | "@vue/compiler-sfc": "^3.0.0-beta.1", 18 | "spark-md5": "^3.0.1", 19 | "vue-cli-plugin-vue-next": "~0.1.3" 20 | }, 21 | "browserslist": [ 22 | "> 1%", 23 | "last 2 versions", 24 | "not dead" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /custom-renderer/src/App.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | -------------------------------------------------------------------------------- /todo-vue2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /vue2-demo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /animate/option/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /vue3-demo-cli/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /reactivity/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 29 | 30 | 33 | -------------------------------------------------------------------------------- /vue3-demo-webpack/README.md: -------------------------------------------------------------------------------- 1 | # vue-next-webpack-preview 2 | 3 | > Minimal webpack setup for Vue 3 (beta) 4 | 5 | This is for preview purposes only. There might be bugs and undocumented behavior differences from v2, which are expected. 6 | 7 | Also note that if you are using VSCode, Vetur isn't updated to take advantage of Vue 3's typing yet so intellisense in Vue files may not be fully functional (especially in templates). 8 | 9 | ### Prerequisites 10 | - Node & NPM 11 | 12 | ### Install 13 | ```sh 14 | npm install 15 | ``` 16 | ### Usage 17 | ##### Develop 18 | ```sh 19 | # run dev server at localhost:8080 20 | npm run dev 21 | ``` 22 | ##### Build 23 | ```sh 24 | # transpile js for deployment 25 | npm run build 26 | ``` 27 | -------------------------------------------------------------------------------- /custom-renderer/src/App1.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /todo-vue2/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | 21 | 22 | 38 | -------------------------------------------------------------------------------- /reactivity/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /todo-vue3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /workshop/node-reactivity/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node-reactivity", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@vue/reactivity": { 8 | "version": "3.0.0-beta.20", 9 | "resolved": "https://registry.npm.taobao.org/@vue/reactivity/download/@vue/reactivity-3.0.0-beta.20.tgz", 10 | "integrity": "sha1-ihbwiTlKKahQnkyOUV9eyEsmzBM=", 11 | "requires": { 12 | "@vue/shared": "3.0.0-beta.20" 13 | } 14 | }, 15 | "@vue/shared": { 16 | "version": "3.0.0-beta.20", 17 | "resolved": "https://registry.npm.taobao.org/@vue/shared/download/@vue/shared-3.0.0-beta.20.tgz", 18 | "integrity": "sha1-Ait6rAlmnWynn/LNOEGIU7L/yL4=" 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /vue3-runtime-canvas/main.js: -------------------------------------------------------------------------------- 1 | import { h, createApp, defineComponent, reactive } from "@vue/runtime-dom"; 2 | 3 | const RootComponent = { 4 | setup() { 5 | const list = reactive(["list"]); 6 | 7 | return { 8 | name: "cxr", 9 | list, 10 | }; 11 | }, 12 | 13 | render(ctx) { 14 | // const renderHello = () => { 15 | // return ctx.list.map((val) => { 16 | // return val; 17 | // }); 18 | // }; 19 | 20 | return h( 21 | "div", 22 | { 23 | onClick() { 24 | console.log("dd"); 25 | ctx.list.push("ddd"); 26 | }, 27 | }, 28 | ctx.list.map((val) => { 29 | return h("p", val); 30 | }) 31 | ); 32 | }, 33 | }; 34 | 35 | createApp(RootComponent).mount("#app"); 36 | -------------------------------------------------------------------------------- /reactivity/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3.0", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "@vue/reactivity": "^3.0.0-beta.12", 11 | "@vue/runtime-core": "^3.0.0-beta.12", 12 | "@vue/runtime-dom": "^3.0.0-beta.12", 13 | "core-js": "^3.6.4", 14 | "three": "^0.116.1", 15 | "vue": "^3.0.0-beta.1" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "^4.3.0", 19 | "@vue/cli-service": "^4.3.0", 20 | "vue-cli-plugin-vue-next": "^0.1.2", 21 | "@vue/compiler-sfc": "^3.0.0-beta.1" 22 | }, 23 | "browserslist": [ 24 | "> 1%", 25 | "last 2 versions", 26 | "not dead" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/README.md: -------------------------------------------------------------------------------- 1 | # 打飞机 2 | 3 | ## 启动 4 | 5 | 1. 先启动服务 6 | 7 | ```shell 8 | yarn start 9 | ``` 10 | 11 | 2. 访问 http://localhost:5000/dist/ 12 | 13 | ## 开发 14 | 15 | ```shell 16 | yarn build --watch 17 | ``` 18 | 19 | ## tasking 20 | 21 | - [x] 地图可滚动 22 | - [x] 逻辑实现 23 | - [x] 素材 24 | - [ ] 开始页面 25 | - [ ] 结束页面 26 | - [ ] 战斗 27 | - [ ] 敌机 28 | - [x] 1秒创建一个敌机 29 | - [x] 从上往下移动 30 | - [x] 移动的方向随机变换 31 | - [x] 不允许移动超过地图边界 32 | - [x] 可以发射炮弹 33 | - [x] 超出屏幕过，销毁炮弹 34 | - [x] 被击中 3 次就要爆炸掉 35 | - [ ] 销毁之前播放爆炸动画 36 | - [ ] 碰到敌机子弹的话会减少血量 37 | - [x] 我方子弹碰到地方子弹的话，双方子弹都消失 38 | - [ ] 血量为零时 game over 39 | - [ ] 显示我方飞机的血量 40 | - [ ] 优化 41 | - [x] 飞机移动不流畅 42 | - [ ] 刚进战斗时，飞机应该自己飞出来 43 | - [ ] 抽离所有的参数配置到 options 内 44 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/src/use/useKeyboard.js: -------------------------------------------------------------------------------- 1 | import { ref, onMounted, onUnmounted } from "../../../../src/index"; 2 | /** 3 | * 注册键盘事件 4 | */ 5 | export const useKeyboard = (map) => { 6 | const handleKeydown = (e) => { 7 | const callbackObj = map[e.code]; 8 | if (callbackObj && callbackObj.keydown) callbackObj.keydown(e); 9 | }; 10 | 11 | const handleKeyup = (e) => { 12 | const callbackObj = map[e.code]; 13 | if (callbackObj && callbackObj.keyup) callbackObj.keyup(e); 14 | }; 15 | 16 | onMounted(() => { 17 | window.addEventListener("keydown", handleKeydown); 18 | window.addEventListener("keyup", handleKeyup); 19 | }); 20 | 21 | onUnmounted(() => { 22 | window.removeEventListener("keydown", handleKeydown); 23 | window.removeEventListener("keyup", handleKeyup); 24 | }); 25 | }; 26 | -------------------------------------------------------------------------------- /reactivity/src/.QRCode.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 24 | 25 | 34 | -------------------------------------------------------------------------------- /vue3-runtime-canvas/game/Bullet.js: -------------------------------------------------------------------------------- 1 | import { h, ref, defineComponent } from "../runtime-canvas/index"; 2 | //炮弹 3 | export default defineComponent({ 4 | props: ["x","y"], 5 | setup(props, ctx) { 6 | const speed = 15; 7 | const y = ref(props.y); 8 | // mock ticker 9 | const intervalNumber = setInterval(() => { 10 | y.value -= speed; 11 | 12 | if(y.value < 100){ 13 | clearInterval(intervalNumber) 14 | ctx.emit("destroy") 15 | // 用不了了 16 | // ctx.$destroy() 17 | } 18 | }, 100); 19 | 20 | clearInterval(); 21 | return { 22 | x: props.x, 23 | y 24 | }; 25 | }, 26 | render(ctx) { 27 | return h("Sprite", { 28 | x: ctx.x, 29 | y: ctx.y, 30 | texture: "../examples/assets/bunny.png", 31 | }); 32 | }, 33 | }); 34 | -------------------------------------------------------------------------------- /custom-renderer/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 17 | 18 | 19 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /workshop/vue3-kkb/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
click
12 | 13 | 32 | 33 | -------------------------------------------------------------------------------- /vue2-demo/src/list/row.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 28 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/src/patchProp.js: -------------------------------------------------------------------------------- 1 | import * as PIXI from "PIXI.js"; 2 | export const patchProp = ( 3 | el, 4 | key, 5 | prevValue, 6 | nextValue, 7 | isSVG = false, 8 | prevChildren, 9 | parentComponent, 10 | parentSuspense, 11 | unmountChildren 12 | ) => { 13 | switch (key) { 14 | case "x": 15 | el.x = nextValue; 16 | break; 17 | case "y": 18 | el.y = nextValue; 19 | break; 20 | case "width": 21 | el.width = nextValue; 22 | break; 23 | case "height": 24 | el.height = nextValue; 25 | break; 26 | case "on": 27 | Object.keys(nextValue).forEach((eventName) => { 28 | const callback = nextValue[eventName]; 29 | el.on(eventName, callback); 30 | }); 31 | break; 32 | case "texture": 33 | let texture = PIXI.Texture.from(nextValue); 34 | el.texture = texture; 35 | break; 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /animate/option/src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /vue3-runtime-canvas/runtime-canvas/patchProp.js: -------------------------------------------------------------------------------- 1 | export const patchProp = ( 2 | el, 3 | key, 4 | prevValue, 5 | nextValue, 6 | isSVG = false, 7 | prevChildren, 8 | parentComponent, 9 | parentSuspense, 10 | unmountChildren 11 | ) => { 12 | // console.log(el, key, prevValue, nextValue); 13 | 14 | switch (key) { 15 | case "x": 16 | el.x = nextValue; 17 | break; 18 | case "y": 19 | el.y = nextValue; 20 | break; 21 | case "width": 22 | el.width = nextValue; 23 | break; 24 | case "height": 25 | el.height = nextValue; 26 | break; 27 | case "on": 28 | Object.keys(nextValue).forEach((eventName) => { 29 | const callback = nextValue[eventName]; 30 | el.on(eventName, callback); 31 | }); 32 | break; 33 | case "texture": 34 | let texture = PIXI.Texture.from(nextValue); 35 | el.texture = texture; 36 | break; 37 | } 38 | }; 39 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-pixijs", 3 | "version": "1.0.0", 4 | "description": "使用 vue3 的语法来开发 pixijs ", 5 | "main": "webpack.config.js", 6 | "directories": { 7 | "example": "example" 8 | }, 9 | "scripts": { 10 | "build": "webpack" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/cuixiaorui/vue-pixijs.git" 15 | }, 16 | "keywords": [ 17 | "vue", 18 | "vue3", 19 | "vue-next", 20 | "canvas", 21 | "pixijs", 22 | "pixi", 23 | "game" 24 | ], 25 | "author": "cuixiaorui", 26 | "license": "ISC", 27 | "bugs": { 28 | "url": "https://github.com/cuixiaorui/vue-pixijs/issues" 29 | }, 30 | "homepage": "https://github.com/cuixiaorui/vue-pixijs#readme", 31 | "devDependencies": { 32 | "webpack": "^4.43.0", 33 | "webpack-cli": "^3.3.11" 34 | }, 35 | "dependencies": { 36 | "@vue/runtime-core": "^3.0.0-beta.14", 37 | "pixi.js": "^5.2.4" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /vue-comp/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-comp", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "de-indent": { 8 | "version": "1.0.2", 9 | "resolved": "https://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fde-indent%2Fdownload%2Fde-indent-1.0.2.tgz", 10 | "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=" 11 | }, 12 | "he": { 13 | "version": "1.2.0", 14 | "resolved": "https://registry.npm.taobao.org/he/download/he-1.2.0.tgz", 15 | "integrity": "sha1-hK5l+n6vsWX922FWauFLrwVmTw8=" 16 | }, 17 | "vue-template-compiler": { 18 | "version": "2.6.11", 19 | "resolved": "https://registry.npm.taobao.org/vue-template-compiler/download/vue-template-compiler-2.6.11.tgz", 20 | "integrity": "sha1-wEcE749JixUxMAGJk+VjCdRpgIA=", 21 | "requires": { 22 | "de-indent": "^1.0.2", 23 | "he": "^1.1.0" 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /workshop/vue3-kkb/kproxy.js: -------------------------------------------------------------------------------- 1 | 2 | let activeEffect 3 | // mini依赖中心 4 | class Dep { 5 | constructor(){ 6 | this.subs = new Set() 7 | } 8 | depend(){ 9 | // 收集依赖 10 | if(activeEffect){ 11 | this.subs.add(activeEffect) 12 | } 13 | } 14 | notofy(){ 15 | // 数据变化，触发effect执行 16 | this.subs.forEach(effect=>effect()) 17 | } 18 | } 19 | function effect(fn){ 20 | activeEffect = fn 21 | fn() 22 | } 23 | const dep = new Dep() // vue3就变成一个大的map 24 | 25 | // ref大概的原理 待会我们看代码 26 | function ref(val){ 27 | let _value = val 28 | // 拦截.value操作 29 | let state = { 30 | get value(){ 31 | // 获取值，收集依赖 track 32 | dep.depend() 33 | return _value 34 | }, 35 | set value(newCount){ 36 | // 修改，通知dep，执行有这个依赖的effect函数 37 | _value = newCount 38 | // trigger 39 | dep.notofy() 40 | } 41 | } 42 | return state 43 | } 44 | const state = ref(0) 45 | 46 | effect(()=>{ 47 | // 这个函数内部，依赖state的变化 48 | console.log(state.value) 49 | }) 50 | 51 | setInterval(()=>{ 52 | state.value++ 53 | },1000) -------------------------------------------------------------------------------- /animate/composition/src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 蜗牛老湿 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /todo-vue2/public/hash.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // web-worker 4 | self.importScripts('spark-md5.min.js') 5 | 6 | self.onmessage = e=>{ 7 | // 接受主线程的通知 8 | const {chunks} = e.data 9 | const spark = new self.SparkMD5.ArrayBuffer() 10 | let progress = 0 11 | let count = 0 12 | 13 | const loadNext = index=>{ 14 | const reader = new FileReader() 15 | reader.readAsArrayBuffer(chunks[index].file) 16 | reader.onload = e=>{ 17 | // 累加器 不能依赖index， 18 | count++ 19 | // 增量计算md5 20 | spark.append(e.target.result) 21 | if(count===chunks.length){ 22 | // 通知主线程，计算结束 23 | self.postMessage({ 24 | progress:100, 25 | hash:spark.end() 26 | }) 27 | }else{ 28 | // 每个区块计算结束，通知进度即可 29 | progress += 100/chunks.length 30 | self.postMessage({ 31 | progress 32 | }) 33 | // 计算下一个 34 | loadNext(count) 35 | } 36 | } 37 | } 38 | // 启动 39 | loadNext(0) 40 | 41 | 42 | } -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/src/moveEnemyPlane.js: -------------------------------------------------------------------------------- 1 | import { stage } from "./config"; 2 | 3 | export const moveEnemyPlane = (enemyPlanes) => { 4 | enemyPlanes.forEach((enemyPlane, index) => { 5 | if (!enemyPlane.moveInfo) { 6 | enemyPlane.moveInfo = {}; 7 | enemyPlane.moveInfo.dir = 1; 8 | enemyPlane.moveInfo.count = 0; 9 | } 10 | 11 | enemyPlane.y++; 12 | enemyPlane.x += 1 * enemyPlane.moveInfo.dir; 13 | enemyPlane.moveInfo.count++; 14 | if (enemyPlane.moveInfo.count > 120) { 15 | const factor = Math.random() > 0.5 ? 1 : -1; 16 | // 随机转换方向 17 | enemyPlane.moveInfo.dir = enemyPlane.moveInfo.dir * factor; 18 | enemyPlane.moveInfo.count = 0; 19 | } 20 | 21 | // 检测是否到边界了 22 | if (isArrivedRightBorder(enemyPlane)) { 23 | enemyPlane.x = stage.width - enemyPlane.width; 24 | } 25 | if (isArrivedLeftBorder(enemyPlane)) { 26 | enemyPlane.x = 0; 27 | } 28 | }); 29 | }; 30 | 31 | function isArrivedLeftBorder(enemyPlane) { 32 | return enemyPlane.x <= 0; 33 | } 34 | 35 | function isArrivedRightBorder(enemyPlane) { 36 | return enemyPlane.x + enemyPlane.width >= stage.width; 37 | } 38 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/src/component/EnemyPlane.js: -------------------------------------------------------------------------------- 1 | import { game } from "../../game"; 2 | import { useKeyboardMove, useKeyboard } from "../use"; 3 | import { 4 | h, 5 | defineComponent, 6 | ref, 7 | watch, 8 | onMounted, 9 | onUnmounted, 10 | } from "../../../../src/index"; 11 | // 敌方飞机 12 | export default defineComponent({ 13 | props: ["x", "y"], 14 | setup(props, ctx) { 15 | const x = ref(props.x); 16 | const y = ref(props.y); 17 | 18 | watch(props, (newValue) => { 19 | x.value = newValue.x; 20 | y.value = newValue.y; 21 | }); 22 | 23 | // 发射子弹 24 | const attackInterval = 2000; 25 | let intervalId; 26 | onMounted(() => { 27 | intervalId = setInterval(() => { 28 | ctx.emit("attack", { 29 | x: x.value + 105, 30 | y: y.value + 200, 31 | }); 32 | }, attackInterval); 33 | }); 34 | 35 | onUnmounted(() => { 36 | clearInterval(intervalId); 37 | }); 38 | 39 | return { 40 | x, 41 | y, 42 | }; 43 | }, 44 | render(ctx) { 45 | return h("Sprite", { 46 | x: ctx.x, 47 | y: ctx.y, 48 | texture: "../../resource/assets/enemy1.png", 49 | }); 50 | }, 51 | }); 52 | -------------------------------------------------------------------------------- /vue3-runtime-canvas/game/Plane.js: -------------------------------------------------------------------------------- 1 | import { h, ref, defineComponent } from "../runtime-canvas/index"; 2 | import Bullet from "./Bullet" 3 | // 飞机 4 | export default defineComponent({ 5 | setup(props, ctx) { 6 | // 初始位置 7 | // 舞台高度为 500 8 | const x = ref(200); 9 | const y = ref(400); 10 | 11 | const speed = 20; 12 | window.addEventListener("keydown", (e) => { 13 | switch (e.code) { 14 | case "ArrowDown": 15 | y.value += speed; 16 | break; 17 | case "ArrowUp": 18 | y.value -= speed; 19 | break; 20 | 21 | case "ArrowLeft": 22 | x.value -= speed; 23 | break; 24 | 25 | case "ArrowRight": 26 | x.value += speed; 27 | break; 28 | 29 | case "Space": 30 | ctx.emit("attack",{ 31 | x, 32 | y 33 | }) 34 | console.log("发一个炮弹"); 35 | break; 36 | default: 37 | break; 38 | } 39 | }); 40 | 41 | return { 42 | x, 43 | y, 44 | }; 45 | }, 46 | render(ctx) { 47 | return h("Rectangle", { 48 | x: ctx.x, 49 | y: ctx.y, 50 | texture:"../examples/assets/bunny.png" 51 | }); 52 | }, 53 | }); 54 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/src/component/Map.js: -------------------------------------------------------------------------------- 1 | import { game } from "../../game"; 2 | import { 3 | h, 4 | ref, 5 | defineComponent, 6 | onMounted, 7 | onUnmounted, 8 | } from "../../../../src/index"; 9 | 10 | // 地图 11 | export default defineComponent({ 12 | setup(props, ctx) { 13 | const mapHeight = 800; 14 | let x1 = ref(0); 15 | let x2 = ref(0); 16 | let y1 = ref(0); 17 | let y2 = ref(-mapHeight); 18 | 19 | const speed = 1; 20 | 21 | game.ticker.add(() => { 22 | y1.value += speed; 23 | y2.value += speed; 24 | 25 | if (y1.value > mapHeight) { 26 | y1.value = y2.value - mapHeight; 27 | } 28 | 29 | if (y2.value > mapHeight) { 30 | y2.value = y1.value - mapHeight; 31 | } 32 | }); 33 | return { 34 | y1, 35 | x1, 36 | y2, 37 | x2, 38 | }; 39 | }, 40 | render(ctx) { 41 | return h("Container", [ 42 | h("Sprite", { 43 | x: ctx.x1, 44 | y: ctx.y1, 45 | texture: "../../resource/assets/map.png", 46 | key: "1", 47 | }), 48 | h("Sprite", { 49 | x: ctx.x2, 50 | y: ctx.y2, 51 | texture: "../../resource/assets/map.png", 52 | key: "2", 53 | }), 54 | ]); 55 | }, 56 | }); 57 | -------------------------------------------------------------------------------- /todo-vue2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "start": "npm run serve" 10 | }, 11 | "dependencies": { 12 | "axios": "^0.19.2", 13 | "blessed": "^0.1.81", 14 | "blessed-contrib": "^4.8.18", 15 | "core-js": "^3.6.4", 16 | "element-ui": "^2.4.5", 17 | "marked": "^0.8.0", 18 | "spark-md5": "^3.0.0", 19 | "stylus": "^0.54.7", 20 | "stylus-loader": "^3.0.2", 21 | "vue": "^2.6.11" 22 | }, 23 | "devDependencies": { 24 | "@vue/cli-plugin-babel": "^4.2.0", 25 | "@vue/cli-plugin-eslint": "^4.2.0", 26 | "@vue/cli-service": "^4.2.0", 27 | "babel-eslint": "^10.0.3", 28 | "eslint": "^6.7.2", 29 | "eslint-plugin-vue": "^6.1.2", 30 | "vue-cli-plugin-element": "^1.0.1", 31 | "vue-template-compiler": "^2.6.11" 32 | }, 33 | "eslintConfig": { 34 | "root": true, 35 | "env": { 36 | "node": true 37 | }, 38 | "extends": [ 39 | "plugin:vue/essential" 40 | ], 41 | "parserOptions": { 42 | "parser": "babel-eslint" 43 | }, 44 | "rules": {} 45 | }, 46 | "browserslist": [ 47 | "> 1%", 48 | "last 2 versions" 49 | ] 50 | } 51 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/src/component/Plane.js: -------------------------------------------------------------------------------- 1 | import { game } from "../../game"; 2 | import { useKeyboardMove, useKeyboard } from "../use"; 3 | import { h, defineComponent } from "../../../../src/index"; 4 | // 飞机 5 | export default defineComponent({ 6 | setup(props, ctx) { 7 | const { x, y } = useKeyboardMove({ 8 | x: 200, 9 | y: 400, 10 | speed: 7, 11 | }); 12 | 13 | attackHandler(ctx, x, y); 14 | 15 | return { 16 | x, 17 | y, 18 | }; 19 | }, 20 | render(ctx) { 21 | return h("Sprite", { 22 | x: ctx.x, 23 | y: ctx.y, 24 | texture: "../../resource/assets/plane.png", 25 | }); 26 | }, 27 | }); 28 | 29 | function attackHandler(ctx, x, y) { 30 | let isAttack = false; 31 | // 攻击间隔时间 32 | const ATTACK_INTERVAL = 10; 33 | 34 | let startTime = 0; 35 | game.ticker.add(() => { 36 | if (isAttack) { 37 | startTime++; 38 | if (startTime > ATTACK_INTERVAL) { 39 | emitAttack(); 40 | startTime = 0; 41 | } 42 | } 43 | }); 44 | 45 | const emitAttack = () => { 46 | ctx.emit("attack", { 47 | x: x.value + 50, 48 | y: y.value, 49 | }); 50 | }; 51 | 52 | const startAttack = () => { 53 | isAttack = true; 54 | startTime = 100; 55 | }; 56 | 57 | const stopAttack = () => { 58 | isAttack = false; 59 | }; 60 | 61 | useKeyboard({ 62 | Space: { 63 | keydown: startAttack, 64 | keyup: stopAttack, 65 | }, 66 | }); 67 | } 68 | -------------------------------------------------------------------------------- /vue3-runtime-canvas/game.js: -------------------------------------------------------------------------------- 1 | import * as PIXI from 'pixi.js' 2 | 3 | 4 | 5 | //Create a Pixi Application 6 | let app = new PIXI.Application({width: 256, height: 256}); 7 | // set background 8 | app.renderer.backgroundColor = 0x061639; 9 | 10 | //Add the canvas that Pixi automatically created for you to the HTML document 11 | document.body.appendChild(app.view); 12 | 13 | 14 | // let rectangle = new PIXI.Graphics(); 15 | // rectangle.lineStyle(4, 0xFF3300, 1); 16 | // rectangle.beginFill(0x66CCFF); 17 | // rectangle.drawRect(0, 0, 64, 64); 18 | // rectangle.endFill(); 19 | // rectangle.x = 0; 20 | // rectangle.y = 0; 21 | 22 | // app.stage.addChild(rectangle); 23 | // app.stage.on("pointerdown",()=>{ 24 | // console.log("click") 25 | // }) 26 | 27 | 28 | const sprite = new PIXI.Sprite(); 29 | 30 | // Set the initial position 31 | sprite.anchor.set(0.5); 32 | sprite.x = app.screen.width / 2; 33 | sprite.y = app.screen.height / 2; 34 | 35 | // Opt-in to interactivity 36 | sprite.interactive = true; 37 | 38 | // Shows hand cursor 39 | sprite.buttonMode = true; 40 | 41 | // Pointers normalize touch and mouse 42 | sprite.on('pointerdown', onClick); 43 | 44 | // Alternatively, use the mouse & touch events: 45 | // sprite.on('click', onClick); // mouse-only 46 | // sprite.on('tap', onClick); // touch-only 47 | 48 | 49 | 50 | 51 | 52 | app.stage.addChild(sprite); 53 | 54 | let texture = PIXI.Texture.from('examples/assets/bunny.png'); 55 | 56 | // sprite.texture = "examples/assets/bunny.png" 57 | sprite.texture = texture; 58 | 59 | function onClick() { 60 | sprite.x += 4; 61 | } 62 | -------------------------------------------------------------------------------- /vue3-runtime-canvas/index.js: -------------------------------------------------------------------------------- 1 | import * as PIXI from "PIXI.js"; 2 | import { 3 | h, 4 | initRuntimeCanvas, 5 | ref, 6 | defineComponent, 7 | reactive, 8 | watch, 9 | } from "./runtime-canvas/index"; 10 | 11 | import Plane from "./game/Plane"; 12 | import Bullet from "./game/Bullet"; 13 | 14 | window.PIXI = PIXI; 15 | let app = initPixi(); 16 | const { renderer } = initRuntimeCanvas(app); 17 | const RootComponent = createRootComponent(); 18 | 19 | const root = renderer.createApp(RootComponent); 20 | root.mount(app.stage); 21 | 22 | function createRootComponent() { 23 | return { 24 | setup() { 25 | // 存储所有的子弹 26 | const selfBullets = reactive([]); 27 | 28 | return { 29 | selfBullets, 30 | }; 31 | }, 32 | 33 | render(ctx) { 34 | console.log( 35 | h(Bullet, { 36 | props: { 37 | x: ref(100), 38 | y: 200, 39 | }, 40 | }) 41 | ); 42 | return h( 43 | "Container", 44 | { 45 | width: 500, 46 | height: 500, 47 | }, 48 | [ 49 | h(Plane, { 50 | onAttack(pos) { 51 | ctx.selfBullets.push(pos); 52 | }, 53 | }), 54 | ...ctx.selfBullets.map((bulletInfo) => { 55 | return h(Bullet, { 56 | x: bulletInfo.x, 57 | y: bulletInfo.y, 58 | }); 59 | }), 60 | ] 61 | ); 62 | }, 63 | }; 64 | } 65 | 66 | function initPixi() { 67 | let app = new PIXI.Application({ width: 500, height: 500 }); 68 | app.renderer.backgroundColor = 0x061639; 69 | document.body.appendChild(app.view); 70 | return app; 71 | } 72 | -------------------------------------------------------------------------------- /vue2-demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 54 | 72 | -------------------------------------------------------------------------------- /vue3-demo-cli/src/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 54 | 72 | -------------------------------------------------------------------------------- /reactivity/src/LocalStorage.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /custom-renderer-pixijs/src/nodeOps.js: -------------------------------------------------------------------------------- 1 | import * as PIXI from "PIXI.js"; 2 | export const nodeOps = { 3 | insert: (child, parent, anchor) => { 4 | parent.addChild(child); 5 | }, 6 | 7 | remove: (child) => { 8 | const parent = child.parent; 9 | if (parent) { 10 | parent.removeChild(child); 11 | } 12 | }, 13 | 14 | createElement: (tag, isSVG, is) => { 15 | let element; 16 | if (tag === "Rectangle") { 17 | // 创建一个矩形 18 | element = new PIXI.Graphics(); 19 | element.lineStyle(4, 0xff3300, 1); 20 | element.beginFill(0x66ccff); 21 | element.drawRect(0, 0, 64, 64); 22 | element.endFill(); 23 | element.x = 0; 24 | element.y = 0; 25 | // Opt-in to interactivity 26 | element.interactive = true; 27 | // Shows hand cursor 28 | element.buttonMode = true; 29 | } else if (tag === "Sprite") { 30 | element = new PIXI.Sprite(); 31 | element.x = 0; 32 | element.y = 0; 33 | } else if (tag === "Container") { 34 | element = new PIXI.Container(); 35 | element.x = 0; 36 | element.y = 0; 37 | } 38 | 39 | return element; 40 | }, 41 | 42 | createText: (text) => doc.createTextNode(text), 43 | 44 | createComment: (text) => {}, 45 | 46 | setText: (node, text) => { 47 | node.nodeValue = text; 48 | }, 49 | 50 | setElementText: (el, text) => { 51 | el.textContent = text; 52 | }, 53 | 54 | parentNode: (node) => node.parentNode, 55 | 56 | nextSibling: (node) => node.nextSibling, 57 | 58 | querySelector: (selector) => doc.querySelector(selector), 59 | 60 | setScopeId(el, id) { 61 | el.setAttribute(id, ""); 62 | }, 63 | 64 | cloneNode(el) { 65 | return el.cloneNode(true); 66 | }, 67 | }; 68 | -------------------------------------------------------------------------------- /vue3-demo-webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const { VueLoaderPlugin } = require('vue-loader') 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 4 | 5 | module.exports = (env = {}) => ({ 6 | mode: env.prod ? 'production' : 'development', 7 | devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map', 8 | entry: path.resolve(__dirname, './src/main.js'), 9 | output: { 10 | path: path.resolve(__dirname, './dist'), 11 | publicPath: '/dist/' 12 | }, 13 | resolve: { 14 | alias: { 15 | // this isn't technically needed, since the default `vue` entry for bundlers 16 | // is a simple `export * from '@vue/runtime-dom`. However having this 17 | // extra re-export somehow causes webpack to always invalidate the module 18 | // on the first HMR update and causes the page to reload. 19 | 'vue': '@vue/runtime-dom' 20 | } 21 | }, 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.vue$/, 26 | use: 'vue-loader' 27 | }, 28 | { 29 | test: /\.png$/, 30 | use: { 31 | loader: 'url-loader', 32 | options: { limit: 8192 } 33 | } 34 | }, 35 | { 36 | test: /\.css$/, 37 | use: [ 38 | { 39 | loader: MiniCssExtractPlugin.loader, 40 | options: { hmr: !env.prod } 41 | }, 42 | 'css-loader' 43 | ] 44 | } 45 | ] 46 | }, 47 | plugins: [ 48 | new VueLoaderPlugin(), 49 | new MiniCssExtractPlugin({ 50 | filename: '[name].css' 51 | }) 52 | ], 53 | devServer: { 54 | inline: true, 55 | hot: true, 56 | stats: 'minimal', 57 | contentBase: __dirname, 58 | overlay: true 59 | } 60 | }) 61 | -------------------------------------------------------------------------------- /vue-comp/perf.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /reactivity/src/ThreeRender.js: -------------------------------------------------------------------------------- 1 | import { createRenderer } from '@vue/runtime-core' 2 | /* 3 | patchProp( 4 | el: HostElement, 5 | key: string, 6 | prevValue: any, 7 | nextValue: any, 8 | isSVG?: boolean, 9 | prevChildren?: VNode[], 10 | parentComponent?: ComponentInternalInstance | null, 11 | parentSuspense?: SuspenseBoundary | null, 12 | unmountChildren?: UnmountChildrenFn 13 | ): void 14 | insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void 15 | remove(el: HostNode): void 16 | createElement( 17 | type: string, 18 | isSVG?: boolean, 19 | isCustomizedBuiltIn?: string 20 | ): HostElement 21 | createText(text: string): HostNode 22 | createComment(text: string): HostNode 23 | setText(node: HostNode, text: string): void 24 | setElementText(node: HostElement, text: string): void 25 | parentNode(node: HostNode): HostElement | null 26 | nextSibling(node: HostNode): HostNode | null 27 | querySelector?(selector: string): HostElement | null 28 | setScopeId?(el: HostElement, id: string): void 29 | cloneNode?(node: HostNode): HostNode 30 | insertStaticContent?( 31 | content: string, 32 | parent: HostElement, 33 | anchor: HostNode | null, 34 | isSVG: boolean 35 | ): HostElement[] 36 | */ 37 | 38 | const doc = document 39 | const { render, createApp } = createRenderer( { 40 | insert: (child, parent, anchor) => { 41 | if (anchor) { 42 | parent.insertBefore(child, anchor) 43 | } else { 44 | parent.appendChild(child) 45 | } 46 | }, 47 | createElement(type, isSVG, isCustomizedBuiltIn) { 48 | console.log(type, isSVG, isCustomizedBuiltIn); 49 | return document.createElement('div') 50 | }, 51 | setElementText(node, text){ 52 | console.log(node, text) 53 | } 54 | }); 55 | 56 | export { render, createApp } 57 | 58 | export * from '@vue/runtime-core' -------------------------------------------------------------------------------- /vue3-runtime-canvas/runtime-canvas/nodeOps.js: -------------------------------------------------------------------------------- 1 | // import {Graphics} from "PIXI.js"; 2 | 3 | export const getNodeOps = (app) => { 4 | return { 5 | insert: (child, parent, anchor) => { 6 | parent.addChild(child); 7 | }, 8 | 9 | remove: (child) => { 10 | const parent = child.parentNode; 11 | if (parent) { 12 | parent.removeChild(child); 13 | } 14 | }, 15 | 16 | createElement: (tag, isSVG, is) => { 17 | let element; 18 | if (tag === "Rectangle") { 19 | // 创建一个矩形 20 | element = new window.PIXI.Graphics(); 21 | element.lineStyle(4, 0xff3300, 1); 22 | element.beginFill(0x66ccff); 23 | element.drawRect(0, 0, 64, 64); 24 | element.endFill(); 25 | element.x = 0; 26 | element.y = 0; 27 | // Opt-in to interactivity 28 | element.interactive = true; 29 | 30 | // Shows hand cursor 31 | element.buttonMode = true; 32 | } else if (tag === "Sprite") { 33 | element = new window.PIXI.Sprite(); 34 | element.x = 0; 35 | element.y = 0; 36 | } else if (tag === "Container") { 37 | element = new window.PIXI.Container(); 38 | element.x = 0; 39 | element.y = 0; 40 | } 41 | 42 | return element; 43 | }, 44 | 45 | createText: (text) => doc.createTextNode(text), 46 | 47 | createComment: (text) => { 48 | // console.log(text); 49 | }, 50 | 51 | setText: (node, text) => { 52 | node.nodeValue = text; 53 | }, 54 | 55 | setElementText: (el, text) => { 56 | el.textContent = text; 57 | }, 58 | 59 | parentNode: (node) => node.parentNode, 60 | 61 | nextSibling: (node) => node.nextSibling, 62 | 63 | querySelector: (selector) => doc.querySelector(selector), 64 | 65 | setScopeId(el, id) { 66 | el.setAttribute(id, ""); 67 | }, 68 | 69 | cloneNode(el) { 70 | return el.cloneNode(true); 71 | }, 72 | }; 73 | }; 74 | -------------------------------------------------------------------------------- /todo-vue3/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 40 | 41 | 42 | 58 | -------------------------------------------------------------------------------- /vue2-demo/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 40 | 41 | 42 | 58 | -------------------------------------------------------------------------------- /animate/option/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 40 | 41 | 42 | 58 | -------------------------------------------------------------------------------- /custom-renderer/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 40 | 41 | 42 | 58 | -------------------------------------------------------------------------------- /vue3-demo-cli/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 40 | 41 | 42 | 58 | -------------------------------------------------------------------------------- /vue-comp/list/list.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /vue-comp/list/list-composition.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /vue2-demo/src/list/list-composition.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /vue-comp/ssr.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | module.exports = { 4 | template: `
5 |
6 |
    7 |
  • kkb
    • 8 |
  • kkb
    • 9 |
  • kkb
    • 10 |
  • kkb
    • 11 |
  • kkb
    • 12 |
  • kkb
    • 13 |
  • {{n}}--{{todo}}
    • 14 |
15 |
16 |
`, 17 | data(){ 18 | return { 19 | todos:['吃饭','睡觉'] 20 | } 21 | } 22 | } 23 | 24 | 25 | // const self = (global || root) 26 | 27 | // self.performance = { 28 | // now: function () { 29 | // var hrtime = process.hrtime() 30 | // return ((hrtime[0] * 1000000 + hrtime[1] / 1000) / 1000) 31 | // } 32 | // } 33 | 34 | // function generateGrid (rowCount, columnCount) { 35 | // var grid = [] 36 | 37 | // for (var r = 0; r < rowCount; r++) { 38 | // var row = { id: r, items: [] } 39 | // for (var c = 0; c < columnCount; c++) { 40 | // row.items.push({ id: (r + '-' + c) }) 41 | // } 42 | // grid.push(row) 43 | // } 44 | 45 | // return grid 46 | // } 47 | 48 | // const gridData = generateGrid(100, 5) 49 | 50 | // module.exports = { 51 | // template: '

{{ Math.random() }}

', 52 | // components: { 53 | // myTable: { 54 | // data: function () { 55 | // return { 56 | // grid: gridData 57 | // } 58 | // }, 59 | // // template: '
123{{ item.id }}
', 60 | // template: '
', 61 | // components: { 62 | // row: { 63 | // props: ['row'], 64 | // template: '{{ Math.random() }}', 65 | // components: { 66 | // column: { 67 | // template: '' + 68 | // // 25 plain elements for each cell 69 | // '' + 74 | // '' 75 | // } 76 | // } 77 | // } 78 | // } 79 | // } 80 | // } 81 | // } 82 | -------------------------------------------------------------------------------- /workshop/vue3-vite/src/App.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 101 | 111 | -------------------------------------------------------------------------------- /compostion-vs-option/compisition.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /workshop/vue3-kkb/kkb-vue3.js: -------------------------------------------------------------------------------- 1 | 2 | const effectStack = [] 3 | let targetMap = new WeakMap() // 存储所有reactive，所有key对应的依赖 4 | // { 5 | // target1:{ 6 | // key: [effect] 7 | // } 8 | // } 9 | 10 | 11 | function track(target,key){ 12 | // 收集依赖 13 | // reactive可能又多个，一个又有N各属性key 14 | const effect = effectStack[effectStack.length-1] 15 | if(effect){ 16 | let depMap = targetMap.get(target) 17 | if(!depMap){ 18 | depMap = new Map() 19 | targetMap.set(target, depMap) 20 | } 21 | let dep = depMap.get(key) 22 | if(!dep){ 23 | dep = new Set() 24 | depMap.set(key,dep) 25 | } 26 | // 添加依赖 27 | dep.add(effect) 28 | effect.deps.push(dep) 29 | } 30 | } 31 | 32 | function trigger(target,key,info){ 33 | // 触发更新 34 | let depMap = targetMap.get(target) 35 | if(!depMap){ 36 | return 37 | } 38 | const effects = new Set() 39 | const computedRunners = new Set() 40 | 41 | if(key){ 42 | let deps = depMap.get(key) 43 | deps.forEach(effect=>{ 44 | if(effect.computed){ 45 | computedRunners.add(effect) 46 | }else{ 47 | effects.add(effect) 48 | } 49 | }) 50 | } 51 | computedRunners.forEach(computed=>computed()) 52 | effects.forEach(effect=>effect()) 53 | } 54 | 55 | function effect(fn,options={}){ 56 | // {lazy:false,computed:false} 57 | // 副作用 58 | // computed是一个特殊的effect 59 | let e = createReactiveEffect(fn,options) 60 | 61 | if(!options.lazy){ 62 | // lazy决定是不是首次就执行effect 63 | e() 64 | } 65 | return e 66 | } 67 | 68 | const baseHandler = { 69 | get(target,key){ 70 | const res = target[key] // reflect更合理的 71 | // 收集依赖 72 | track(target,key) 73 | return res 74 | }, 75 | set(target,key,val){ 76 | const info = {oldValue:target[key], newValue:val} 77 | target[key] = val // Reflect.set 78 | // 触发更新 79 | trigger(target,key,info) 80 | } 81 | } 82 | function reactive(target){ 83 | // target变成响应式 84 | const observerd = new Proxy(target,baseHandler) 85 | return observerd 86 | } 87 | 88 | function createReactiveEffect(fn,options){ 89 | const effect = function effect(...args){ 90 | return run(effect,fn,args) 91 | } 92 | // 为了后续清理 以及缓存 93 | effect.deps = [] 94 | effect.computed = options.computed 95 | effect.lazy = options.lazy 96 | return effect 97 | } 98 | function run(effect,fn,args){ 99 | if(effectStack.indexOf(effect)===-1){ 100 | try{ 101 | effectStack.push(effect) 102 | return fn(...args) 103 | }finally{ 104 | effectStack.pop() 105 | } 106 | } 107 | } 108 | function computed(fn){ 109 | // 特殊的effect 110 | const runner = effect(fn, {computed:true,lazy:true}) 111 | return{ 112 | effect:runner, 113 | get value(){ 114 | return runner() 115 | } 116 | } 117 | } -------------------------------------------------------------------------------- /custom-renderer/src/three-renderer.js: -------------------------------------------------------------------------------- 1 | import { createRenderer } from '@vue/runtime-core' 2 | import * as THREE from 'three' 3 | import {nextTick} from '@vue/runtime-core' 4 | /* 5 | patchProp( 6 | el: HostElement, 7 | key: string, 8 | prevValue: any, 9 | nextValue: any, 10 | isSVG?: boolean, 11 | prevChildren?: VNode[], 12 | parentComponent?: ComponentInternalInstance | null, 13 | parentSuspense?: SuspenseBoundary | null, 14 | unmountChildren?: UnmountChildrenFn 15 | ): void 16 | insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void 17 | remove(el: HostNode): void 18 | createElement( 19 | type: string, 20 | isSVG?: boolean, 21 | isCustomizedBuiltIn?: string 22 | ): HostElement 23 | createText(text: string): HostNode 24 | createComment(text: string): HostNode 25 | setText(node: HostNode, text: string): void 26 | setElementText(node: HostElement, text: string): void 27 | parentNode(node: HostNode): HostElement | null 28 | nextSibling(node: HostNode): HostNode | null 29 | querySelector?(selector: string): HostElement | null 30 | setScopeId?(el: HostElement, id: string): void 31 | cloneNode?(node: HostNode): HostNode 32 | insertStaticContent?( 33 | content: string, 34 | parent: HostElement, 35 | anchor: HostNode | null, 36 | isSVG: boolean 37 | ): HostElement[] 38 | */ 39 | 40 | let renderer 41 | 42 | function draw(obj) { 43 | const {camera,cameraPos, scene, geometry,geometryArg,material,mesh,meshY,meshX} = obj 44 | if([camera,cameraPos, scene, geometry,geometryArg,material,mesh,meshY,meshX].filter(v=>v).length<9){ 45 | return 46 | } 47 | let cameraObj = new THREE[camera]( 40, window.innerWidth / window.innerHeight, 0.1, 10 ) 48 | Object.assign(cameraObj.position,cameraPos) 49 | 50 | let sceneObj = new THREE[scene]() 51 | 52 | let geometryObj = new THREE[geometry]( ...geometryArg) 53 | let materialObj = new THREE[material]() 54 | 55 | let meshObj = new THREE[mesh]( geometryObj, materialObj ) 56 | meshObj.rotation.x = meshX 57 | meshObj.rotation.y = meshY 58 | sceneObj.add( meshObj ) 59 | renderer.render( sceneObj, cameraObj ); 60 | 61 | } 62 | 63 | const { createApp: originCa } = createRenderer({ 64 | insert: (child, parent, anchor) => { 65 | if(parent.domElement){ 66 | draw(child) 67 | } 68 | }, 69 | createElement(type, isSVG, isCustom) { 70 | return { 71 | type 72 | } 73 | }, 74 | setElementText(node, text) { 75 | }, 76 | patchProp(el, key, prev, next) { 77 | el[key] = next 78 | draw(el) 79 | }, 80 | parentNode: node => node, 81 | nextSibling: node => node, 82 | createText: text => text, 83 | remove:node=>node 84 | 85 | }); 86 | function createApp(...args) { 87 | const app = originCa(...args) 88 | return { 89 | mount(selector) { 90 | renderer = new THREE.WebGLRenderer( { antialias: true } ); 91 | renderer.setSize( window.innerWidth, window.innerHeight ); 92 | document.body.appendChild( renderer.domElement ); 93 | app.mount(renderer) 94 | } 95 | } 96 | } 97 | export { createApp } 98 | 99 | -------------------------------------------------------------------------------- /vite-mini/server.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | const Koa = require('koa') 4 | const compilerSfc = require('@vue/compiler-sfc') // .vue 5 | const compilerDom = require('@vue/compiler-dom') // 模板 6 | 7 | const app = new Koa() 8 | function rewriteImport(content){ 9 | return content.replace(/from ['|"]([^'"]+)['|"]/g, function(s0,s1){ 10 | // . ../ /开头的，都是相对路径 11 | if(s1[0]!=='.'&& s1[1]!=='/'){ 12 | return `from '/@modules/${s1}'` 13 | }else{ 14 | return s0 15 | } 16 | }) 17 | } 18 | 19 | app.use(async ctx=>{ 20 | const {request:{url,query} } = ctx 21 | // 首页 22 | if(url=='/'){ 23 | ctx.type="text/html" 24 | let content = fs.readFileSync('./index.html','utf-8') 25 | content = content.replace(' 29 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /custom-renderer/src/renderer.js: -------------------------------------------------------------------------------- 1 | import { createRenderer } from '@vue/runtime-core' 2 | /* 3 | patchProp( 4 | el: HostElement, 5 | key: string, 6 | prevValue: any, 7 | nextValue: any, 8 | isSVG?: boolean, 9 | prevChildren?: VNode[], 10 | parentComponent?: ComponentInternalInstance | null, 11 | parentSuspense?: SuspenseBoundary | null, 12 | unmountChildren?: UnmountChildrenFn 13 | ): void 14 | insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void 15 | remove(el: HostNode): void 16 | createElement( 17 | type: string, 18 | isSVG?: boolean, 19 | isCustomizedBuiltIn?: string 20 | ): HostElement 21 | createText(text: string): HostNode 22 | createComment(text: string): HostNode 23 | setText(node: HostNode, text: string): void 24 | setElementText(node: HostElement, text: string): void 25 | parentNode(node: HostNode): HostElement | null 26 | nextSibling(node: HostNode): HostNode | null 27 | querySelector?(selector: string): HostElement | null 28 | setScopeId?(el: HostElement, id: string): void 29 | cloneNode?(node: HostNode): HostNode 30 | insertStaticContent?( 31 | content: string, 32 | parent: HostElement, 33 | anchor: HostNode | null, 34 | isSVG: boolean 35 | ): HostElement[] 36 | */ 37 | 38 | let ctx 39 | 40 | function draw(ele, isChild) { 41 | if (!isChild) { 42 | ctx.clearRect(0, 0, 500, 500) 43 | } 44 | 45 | 46 | ctx.fillStyle = ele.fill || 'white' 47 | ctx.fillRect(...ele.pos) 48 | if (ele.text) { 49 | ctx.fillStyle = ele.color || 'white' 50 | ele.fontSize = ele.type == "h1" ? 20 : 12 51 | ctx.font = (ele.fontSize || 18) + 'px serif' 52 | ctx.fillText(ele.text, ele.pos[0] + 10, ele.pos[1] + ele.fontSize) 53 | } 54 | ele.child && ele.child.forEach(c => { 55 | console.log('child:::', c) 56 | draw(c, true) 57 | }) 58 | 59 | } 60 | 61 | const { createApp: originCa } = createRenderer({ 62 | insert: (child, parent, anchor) => { 63 | if (typeof child == 'string') { 64 | parent.text = child 65 | } else { 66 | child.parent = parent 67 | if (!parent.child) { 68 | parent.child = [child] 69 | } else { 70 | parent.child.push(child) 71 | } 72 | } 73 | if (parent.nodeName) { 74 | draw(child) 75 | if (child.onClick) { 76 | ctx.canvas.addEventListener('click', () => { 77 | child.onClick() 78 | setTimeout(() => { 79 | draw(child) 80 | }) 81 | }, false) 82 | } 83 | } 84 | }, 85 | createElement(type, isSVG, isCustom) { 86 | return { 87 | type 88 | } 89 | }, 90 | setElementText(node, text) { 91 | node.text = text 92 | }, 93 | patchProp(el, key, prev, next) { 94 | el[key] = next 95 | }, 96 | parentNode: node => node, 97 | nextSibling: node => node, 98 | createText: text => text, 99 | remove:node=>node 100 | 101 | }); 102 | function createApp(...args) { 103 | const app = originCa(...args) 104 | return { 105 | mount(selector) { 106 | const canvas = document.createElement('canvas') 107 | canvas.width = window.innerWidth 108 | canvas.height = window.innerHeight 109 | document.querySelector(selector).appendChild(canvas) 110 | ctx = canvas.getContext('2d') 111 | app.mount(canvas) 112 | } 113 | } 114 | } 115 | export { createApp } 116 | 117 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue3-vs-vue2 2 | Vue3和Vue2细致比较 3 | 4 | @todo mvc样式 5 | 6 | 7 | 8 | ## 环境 9 | 10 | 三种体验vue3的方式 11 | 12 | 1. vue-cli 13 | * Vue create vue3-demo-cli 14 | * Vue add vue-next 15 | * 代码文件 vue3-demo-cli 16 | 2. webpack 17 | 1. 代码文件 vue-demo-webpack 18 | 2. [代码仓库](https://github.com/vuejs/vue-next-webpack-preview) 19 | 3. 新工具vite 20 | 1. create-vite-app 21 | 2. 代码文件 vue3-demo-vite 22 | 23 | 24 | 25 | ## Reactivity & Fragment 26 | 27 | Winter奇思妙想 [代码](reactivity) 28 | 29 | ``` 30 | ├── Fragment.vue 31 | ├── HTTPRequest.js 数据源响应式 32 | ├── HTTPRequest.vue 33 | ├── List.vue 34 | ├── LocalStorage.js 利用响应式，无缝切换localstorage 35 | ├── LocalStorage.vue 36 | ├── Three.vue 37 | ├── ThreeRender.js 38 | ├── TimeLine.js 39 | ├── Timer.js 40 | ├── assets 41 | │   └── logo.png 42 | ├── main.js 43 | └── vanilla-main.js 原生js双向绑定 44 | ``` 45 | 46 | 47 | 48 | ## SSR 49 | 50 | 测试vue2和vue3再ssr的环境的表现,使用wrk压测，测试组件 静态动态三比一 51 | 52 | ```javascript 53 | { 54 | template: `
55 |
56 |
    57 |
  • kkb
    • 58 |
  • kkb
    • 59 |
  • kkb
    • 60 |
  • kkb
    • 61 |
  • kkb
    • 62 |
  • kkb
    • 63 |
  • {{n}}--{{todo}}
    • 64 |
65 |
66 |
`, 67 | data(){ 68 | return { 69 | todos:['吃饭','睡觉'] 70 | } 71 | } 72 | } 73 | 74 | ``` 75 | 再vue-comp里执行npm link 然后ssr2和ssr3里npm install共享 76 | 77 | ```bash 78 | // vue2 12个进程，300个并发，压19秒 79 | ➜ ~ wrk -t12 -c400 -d10s http://localhost:9092/ 80 | Running 10s test @ http://localhost:9092/ 81 | 12 threads and 400 connections 82 | ^[[A Thread Stats Avg Stdev Max +/- Stdev 83 | Latency 1.48s 442.21ms 1.80s 89.88% 84 | Req/Sec 24.62 20.56 88.00 59.73% 85 | 1319 requests in 10.10s, 173.65MB read 86 | Socket errors: connect 157, read 183, write 0, timeout 74 87 | Requests/sec: 130.58 88 | Transfer/sec: 17.19MB 89 | ``` 90 | ```bash 91 | // vue3 12个进程，300个并发，压19秒 92 | ➜ ~ wrk -t12 -c400 -d10s http://localhost:9093/ 93 | Running 10s test @ http://localhost:9093/ 94 | 12 threads and 400 connections 95 | Thread Stats Avg Stdev Max +/- Stdev 96 | Latency 770.76ms 165.36ms 1.89s 89.11% 97 | Req/Sec 63.99 56.81 252.00 74.34% 98 | 2912 requests in 10.10s, 411.12MB read 99 | Socket errors: connect 157, read 31, write 0, timeout 0 100 | Requests/sec: 288.21 101 | Transfer/sec: 40.69MB 102 | ``` 103 | QPS大概是有2.2倍的提升 真赞 104 | 105 | 106 | ## update 对比 107 | 108 | ```bash 109 | vue2-demo 110 | vue3-demo-cli 111 | ``` 112 | [测试组件代码 ](vue-demo/src/App.vue) 500个组件，静态动态三比一 113 | 114 | Vue2 render和update 大概50% 稍微有点波动 115 | 116 | ![vue3-update](assets/vue3-update-0741325.gif) 117 | 118 | ![vue2-update](assets/vue2-update.gif) 119 | 120 | ## composition vs option 121 | 122 | [官网的对比代码](com) 123 | 124 | todo mvc 对比 125 | 126 | @todo 需要加点样式 127 | 128 | @todo 把storage和http的响应式，放在todomvc里 129 | 130 | 131 | 132 | ## 自定义renderer 133 | 134 | [canvas和three.js](custom-renderer) 135 | 136 | [pixi renderer打飞机demo](vue3-runtime-canvas) 137 | 138 | ```javascript 139 | import { createApp } from './three-renderer'; 140 | import App from "./App.vue"; 141 | 142 | // canvas 143 | // import { createApp } from './renderer'; 144 | // import App from "./App1.vue"; 145 | createApp(App).mount("#app") 146 | ``` 147 | 148 | ![vue3-canvas](assets/vue3-canvas.gif) 149 | 150 | ![vue3-three](assets/vue3-three.gif) 151 | 152 | ![image-20200529165704762](assets/image-20200529165704762.png) -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/src/component/GameContainer.js: -------------------------------------------------------------------------------- 1 | import Bullet from "./Bullet.js"; 2 | import Plane from "./Plane.js"; 3 | import Map from "./Map.js"; 4 | import EnemyPlane from "./EnemyPlane"; 5 | import { game } from "../../game"; 6 | import { hitTestRectangle } from "../utils"; 7 | import { h, reactive, ref } from "../../../../src/index.js"; 8 | import { moveBullets } from "../moveBullets"; 9 | import { moveEnemyPlane } from "../moveEnemyPlane"; 10 | import { stage } from "../config/index.js"; 11 | 12 | let hashCode = 0; 13 | const createHashCode = () => { 14 | return hashCode++; 15 | }; 16 | 17 | export default { 18 | setup() { 19 | //生产敌机 20 | const createEnemyPlaneData = (x) => { 21 | return { 22 | x, 23 | y: -200, 24 | width: 217, 25 | height: 263, 26 | life: 3, 27 | }; 28 | }; 29 | const selfBullets = reactive([]); 30 | const enemyPlanes = reactive([]); 31 | const enemyPlaneBullets = reactive([]); 32 | 33 | setInterval(() => { 34 | const x = Math.floor((1 + stage.width) * Math.random()); 35 | enemyPlanes.push(createEnemyPlaneData(x)); 36 | }, 1000); 37 | 38 | const handleBulletDestroy = ({ id }) => { 39 | const index = selfBullets.findIndex((info) => info.id == id); 40 | if (index !== -1) { 41 | selfBullets.splice(index, 1); 42 | } 43 | }; 44 | 45 | const handlePlaneAttack = ({ x, y }) => { 46 | const id = createHashCode(); 47 | const width = 26; 48 | const height = 37; 49 | const dir = -1; 50 | selfBullets.push({ x, y, id, width, height, dir }); 51 | }; 52 | 53 | const handleEnemyPlaneAttack = ({ x, y }) => { 54 | const id = createHashCode(); 55 | const width = 26; 56 | const height = 37; 57 | const dir = 1; 58 | enemyPlaneBullets.push({ x, y, id, width, height, dir }); 59 | }; 60 | 61 | game.ticker.add(() => { 62 | moveBullets(selfBullets); 63 | moveBullets(enemyPlaneBullets); 64 | moveEnemyPlane(enemyPlanes); 65 | 66 | // 先遍历所有的子弹 67 | selfBullets.forEach((bullet, selfIndex) => { 68 | // 检测我方子弹是否碰到了敌机 69 | enemyPlanes.forEach((enemyPlane, enemyPlaneIndex) => { 70 | const isIntersect = hitTestRectangle(bullet, enemyPlane); 71 | if (isIntersect) { 72 | selfBullets.splice(selfIndex, 1); 73 | 74 | // 敌机需要减血 75 | enemyPlane.life--; 76 | if (enemyPlane.life <= 0) { 77 | // todo 78 | // 可以让实例发消息过来在销毁 79 | // 因为需要在销毁之前播放销毁动画 80 | enemyPlanes.splice(enemyPlaneIndex, 1); 81 | } 82 | } 83 | }); 84 | 85 | // 检测是否碰到了敌方子弹 86 | enemyPlaneBullets.forEach((enemyBullet, enemyBulletIndex) => { 87 | const isIntersect = hitTestRectangle(bullet, enemyBullet); 88 | if (isIntersect) { 89 | selfBullets.splice(selfIndex, 1); 90 | enemyPlaneBullets.splice(enemyBulletIndex, 1); 91 | } 92 | }); 93 | }); 94 | }); 95 | 96 | return { 97 | enemyPlanes, 98 | selfBullets, 99 | enemyPlaneBullets, 100 | handleBulletDestroy, 101 | handlePlaneAttack, 102 | handleEnemyPlaneAttack, 103 | }; 104 | }, 105 | 106 | render(ctx) { 107 | const createBullet = (info, index) => { 108 | return h(Bullet, { 109 | key: "Bullet" + info.id, 110 | x: info.x, 111 | y: info.y, 112 | id: info.id, 113 | width: info.width, 114 | height: info.height, 115 | onDestroy: ctx.handleBulletDestroy, 116 | }); 117 | }; 118 | 119 | const createEnemyPlane = (info, index) => { 120 | return h(EnemyPlane, { 121 | key: "EnemyPlane" + index, 122 | x: info.x, 123 | y: info.y, 124 | height: info.height, 125 | width: info.width, 126 | onAttack: ctx.handleEnemyPlaneAttack, 127 | }); 128 | }; 129 | 130 | return h("Container", [ 131 | h(Map), 132 | h(Plane, { 133 | onAttack: ctx.handlePlaneAttack, 134 | }), 135 | ...ctx.selfBullets.map(createBullet), 136 | ...ctx.enemyPlaneBullets.map(createBullet), 137 | ...ctx.enemyPlanes.map(createEnemyPlane), 138 | ]); 139 | }, 140 | }; 141 | -------------------------------------------------------------------------------- /todo-vue2/src/App.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 149 | 150 | 169 | -------------------------------------------------------------------------------- /todo-vue3/src/App.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 132 | 133 | 172 | -------------------------------------------------------------------------------- /compostion-vs-option/option.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | -------------------------------------------------------------------------------- /todo-vue3/src/index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | button { 8 | margin: 0; 9 | padding: 0; 10 | border: 0; 11 | background: none; 12 | font-size: 100%; 13 | vertical-align: baseline; 14 | font-family: inherit; 15 | font-weight: inherit; 16 | color: inherit; 17 | -webkit-appearance: none; 18 | appearance: none; 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; 21 | } 22 | 23 | body { 24 | font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; 25 | line-height: 1.4em; 26 | background: #f5f5f5; 27 | color: #4d4d4d; 28 | min-width: 230px; 29 | max-width: 550px; 30 | margin: 0 auto; 31 | -webkit-font-smoothing: antialiased; 32 | -moz-osx-font-smoothing: grayscale; 33 | font-weight: 300; 34 | } 35 | 36 | button, 37 | input[type="checkbox"] { 38 | outline: none; 39 | } 40 | 41 | .hidden { 42 | display: none; 43 | } 44 | 45 | .todoapp { 46 | background: #fff; 47 | margin: 130px 0 40px 0; 48 | position: relative; 49 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 50 | 0 25px 50px 0 rgba(0, 0, 0, 0.1); 51 | } 52 | 53 | .todoapp input::-webkit-input-placeholder { 54 | font-style: italic; 55 | font-weight: 300; 56 | color: #e6e6e6; 57 | } 58 | 59 | .todoapp input::-moz-placeholder { 60 | font-style: italic; 61 | font-weight: 300; 62 | color: #e6e6e6; 63 | } 64 | 65 | .todoapp input::input-placeholder { 66 | font-style: italic; 67 | font-weight: 300; 68 | color: #e6e6e6; 69 | } 70 | 71 | .todoapp h1 { 72 | position: absolute; 73 | top: -155px; 74 | width: 100%; 75 | font-size: 100px; 76 | font-weight: 100; 77 | text-align: center; 78 | color: rgba(175, 47, 47, 0.15); 79 | -webkit-text-rendering: optimizeLegibility; 80 | -moz-text-rendering: optimizeLegibility; 81 | text-rendering: optimizeLegibility; 82 | } 83 | 84 | .new-todo, 85 | .edit { 86 | position: relative; 87 | margin: 0; 88 | width: 100%; 89 | font-size: 24px; 90 | font-family: inherit; 91 | font-weight: inherit; 92 | line-height: 1.4em; 93 | border: 0; 94 | outline: none; 95 | color: inherit; 96 | padding: 6px; 97 | border: 1px solid #999; 98 | box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); 99 | box-sizing: border-box; 100 | -webkit-font-smoothing: antialiased; 101 | -moz-osx-font-smoothing: grayscale; 102 | } 103 | 104 | .new-todo { 105 | padding: 16px 16px 16px 60px; 106 | border: none; 107 | background: #fff; 108 | box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03); 109 | } 110 | 111 | .main { 112 | position: relative; 113 | z-index: 2; 114 | border-top: 1px solid #e6e6e6; 115 | } 116 | 117 | label[for='toggle-all'] { 118 | display: none; 119 | } 120 | 121 | .toggle-all { 122 | position: absolute; 123 | top: -55px; 124 | left: -12px; 125 | width: 60px; 126 | height: 34px; 127 | text-align: center; 128 | } 129 | 130 | .toggle-all:before { 131 | content: '❯'; 132 | font-size: 22px; 133 | color: #e6e6e6; 134 | padding: 10px 27px 10px 27px; 135 | } 136 | 137 | .toggle-all:checked:before { 138 | color: #737373; 139 | } 140 | 141 | .todo-list { 142 | margin: 0; 143 | padding: 0; 144 | list-style: none; 145 | } 146 | 147 | .todo-list li { 148 | position: relative; 149 | font-size: 24px; 150 | border-bottom: 1px solid #ededed; 151 | } 152 | 153 | .todo-list li:last-child { 154 | border-bottom: none; 155 | } 156 | 157 | .todo-list li.editing { 158 | border-bottom: none; 159 | padding: 0; 160 | } 161 | 162 | .todo-list li.editing .edit { 163 | display: block; 164 | width: 506px; 165 | padding: 13px 17px 12px 17px; 166 | margin: 0 0 0 43px; 167 | } 168 | 169 | .todo-list li.editing .view { 170 | display: none; 171 | } 172 | 173 | .todo-list li .toggle { 174 | text-align: center; 175 | width: 40px; 176 | /* auto, since non-WebKit browsers doesn't support input styling */ 177 | height: auto; 178 | position: absolute; 179 | top: 0; 180 | bottom: 0; 181 | left:20px; 182 | margin: auto 0; 183 | border: none; /* Mobile Safari */ 184 | } 185 | 186 | .todo-list li .toggle:after { 187 | content: url('data:image/svg+xml;utf8,'); 188 | } 189 | 190 | .todo-list li .toggle:checked:after { 191 | content: url('data:image/svg+xml;utf8,'); 192 | } 193 | 194 | .todo-list li label { 195 | white-space: pre-line; 196 | word-break: break-all; 197 | padding: 15px 60px 15px 15px; 198 | margin-left: 45px; 199 | display: block; 200 | line-height: 1.2; 201 | transition: color 0.4s; 202 | } 203 | 204 | .todo-list li.completed label { 205 | color: #d9d9d9; 206 | text-decoration: line-through; 207 | } 208 | 209 | .todo-list li .destroy { 210 | display: none; 211 | position: absolute; 212 | top: 0; 213 | right: 10px; 214 | bottom: 0; 215 | width: 40px; 216 | height: 40px; 217 | margin: auto 0; 218 | font-size: 30px; 219 | color: #cc9a9a; 220 | margin-bottom: 11px; 221 | transition: color 0.2s ease-out; 222 | } 223 | 224 | .todo-list li .destroy:hover { 225 | color: #af5b5e; 226 | } 227 | 228 | .todo-list li .destroy:after { 229 | content: '×'; 230 | } 231 | 232 | .todo-list li:hover .destroy { 233 | display: block; 234 | } 235 | 236 | .todo-list li .edit { 237 | display: none; 238 | } 239 | 240 | .todo-list li.editing:last-child { 241 | margin-bottom: -1px; 242 | } 243 | 244 | .footer { 245 | color: #777; 246 | padding: 10px 15px; 247 | height: 20px; 248 | text-align: center; 249 | border-top: 1px solid #e6e6e6; 250 | } 251 | 252 | .footer:before { 253 | content: ''; 254 | position: absolute; 255 | right: 0; 256 | bottom: 0; 257 | left: 0; 258 | height: 50px; 259 | overflow: hidden; 260 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 261 | 0 8px 0 -3px #f6f6f6, 262 | 0 9px 1px -3px rgba(0, 0, 0, 0.2), 263 | 0 16px 0 -6px #f6f6f6, 264 | 0 17px 2px -6px rgba(0, 0, 0, 0.2); 265 | } 266 | 267 | .todo-count { 268 | float: left; 269 | text-align: left; 270 | } 271 | 272 | .todo-count strong { 273 | font-weight: 300; 274 | } 275 | 276 | .filters { 277 | margin: 0; 278 | padding: 0; 279 | list-style: none; 280 | position: absolute; 281 | right: 0; 282 | left: 0; 283 | } 284 | 285 | .filters li { 286 | display: inline; 287 | } 288 | 289 | .filters li a { 290 | color: inherit; 291 | margin: 3px; 292 | padding: 3px 7px; 293 | text-decoration: none; 294 | border: 1px solid transparent; 295 | border-radius: 3px; 296 | } 297 | 298 | .filters li a.selected, 299 | .filters li a:hover { 300 | border-color: rgba(175, 47, 47, 0.1); 301 | } 302 | 303 | .filters li a.selected { 304 | border-color: rgba(175, 47, 47, 0.2); 305 | } 306 | 307 | .clear-completed, 308 | html .clear-completed:active { 309 | float: right; 310 | position: relative; 311 | line-height: 20px; 312 | text-decoration: none; 313 | cursor: pointer; 314 | } 315 | 316 | .clear-completed:hover { 317 | text-decoration: underline; 318 | } 319 | 320 | .info { 321 | margin: 65px auto 0; 322 | color: #bfbfbf; 323 | font-size: 10px; 324 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 325 | text-align: center; 326 | } 327 | 328 | .info p { 329 | line-height: 1; 330 | } 331 | 332 | .info a { 333 | color: inherit; 334 | text-decoration: none; 335 | font-weight: 400; 336 | } 337 | 338 | .info a:hover { 339 | text-decoration: underline; 340 | } 341 | 342 | /* 343 | Hack to remove background from Mobile Safari. 344 | Can't use it globally since it destroys checkboxes in Firefox 345 | */ 346 | @media screen and (-webkit-min-device-pixel-ratio:0) { 347 | .toggle-all, 348 | .todo-list li .toggle { 349 | background: none; 350 | } 351 | 352 | .todo-list li .toggle { 353 | height: 40px; 354 | } 355 | 356 | .toggle-all { 357 | -webkit-transform: rotate(90deg); 358 | transform: rotate(90deg); 359 | -webkit-appearance: none; 360 | } 361 | } 362 | 363 | @media (max-width: 430px) { 364 | .footer { 365 | height: 50px; 366 | } 367 | 368 | .filters { 369 | bottom: 10px; 370 | } 371 | } -------------------------------------------------------------------------------- /todo-vue2/src/index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | button { 8 | margin: 0; 9 | padding: 0; 10 | border: 0; 11 | background: none; 12 | font-size: 100%; 13 | vertical-align: baseline; 14 | font-family: inherit; 15 | font-weight: inherit; 16 | color: inherit; 17 | -webkit-appearance: none; 18 | appearance: none; 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; 21 | } 22 | 23 | body { 24 | font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; 25 | line-height: 1.4em; 26 | background: #f5f5f5; 27 | color: #4d4d4d; 28 | min-width: 230px; 29 | max-width: 550px; 30 | margin: 0 auto; 31 | -webkit-font-smoothing: antialiased; 32 | -moz-osx-font-smoothing: grayscale; 33 | font-weight: 300; 34 | } 35 | 36 | button, 37 | input[type="checkbox"] { 38 | outline: none; 39 | } 40 | 41 | .hidden { 42 | display: none; 43 | } 44 | 45 | .todoapp { 46 | background: #fff; 47 | margin: 130px 0 40px 0; 48 | position: relative; 49 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 50 | 0 25px 50px 0 rgba(0, 0, 0, 0.1); 51 | } 52 | 53 | .todoapp input::-webkit-input-placeholder { 54 | font-style: italic; 55 | font-weight: 300; 56 | color: #e6e6e6; 57 | } 58 | 59 | .todoapp input::-moz-placeholder { 60 | font-style: italic; 61 | font-weight: 300; 62 | color: #e6e6e6; 63 | } 64 | 65 | .todoapp input::input-placeholder { 66 | font-style: italic; 67 | font-weight: 300; 68 | color: #e6e6e6; 69 | } 70 | 71 | .todoapp h1 { 72 | position: absolute; 73 | top: -155px; 74 | width: 100%; 75 | font-size: 100px; 76 | font-weight: 100; 77 | text-align: center; 78 | color: rgba(175, 47, 47, 0.15); 79 | -webkit-text-rendering: optimizeLegibility; 80 | -moz-text-rendering: optimizeLegibility; 81 | text-rendering: optimizeLegibility; 82 | } 83 | 84 | .new-todo, 85 | .edit { 86 | position: relative; 87 | margin: 0; 88 | width: 100%; 89 | font-size: 24px; 90 | font-family: inherit; 91 | font-weight: inherit; 92 | line-height: 1.4em; 93 | border: 0; 94 | outline: none; 95 | color: inherit; 96 | padding: 6px; 97 | border: 1px solid #999; 98 | box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); 99 | box-sizing: border-box; 100 | -webkit-font-smoothing: antialiased; 101 | -moz-osx-font-smoothing: grayscale; 102 | } 103 | 104 | .new-todo { 105 | padding: 16px 16px 16px 60px; 106 | border: none; 107 | background: rgba(0, 0, 0, 0.003); 108 | box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03); 109 | } 110 | 111 | .main { 112 | position: relative; 113 | z-index: 2; 114 | border-top: 1px solid #e6e6e6; 115 | } 116 | 117 | label[for='toggle-all'] { 118 | display: none; 119 | } 120 | 121 | .toggle-all { 122 | position: absolute; 123 | top: -55px; 124 | left: -12px; 125 | width: 60px; 126 | height: 34px; 127 | text-align: center; 128 | } 129 | 130 | .toggle-all:before { 131 | content: '❯'; 132 | font-size: 22px; 133 | color: #e6e6e6; 134 | padding: 10px 27px 10px 27px; 135 | } 136 | 137 | .toggle-all:checked:before { 138 | color: #737373; 139 | } 140 | 141 | .todo-list { 142 | margin: 0; 143 | padding: 0; 144 | list-style: none; 145 | } 146 | 147 | .todo-list li { 148 | position: relative; 149 | font-size: 24px; 150 | border-bottom: 1px solid #ededed; 151 | } 152 | 153 | .todo-list li:last-child { 154 | border-bottom: none; 155 | } 156 | 157 | .todo-list li.editing { 158 | border-bottom: none; 159 | padding: 0; 160 | } 161 | 162 | .todo-list li.editing .edit { 163 | display: block; 164 | width: 506px; 165 | padding: 13px 17px 12px 17px; 166 | margin: 0 0 0 43px; 167 | } 168 | 169 | .todo-list li.editing .view { 170 | display: none; 171 | } 172 | 173 | .todo-list li .toggle { 174 | text-align: center; 175 | width: 40px; 176 | /* auto, since non-WebKit browsers doesn't support input styling */ 177 | height: auto; 178 | position: absolute; 179 | top: 0; 180 | bottom: 0; 181 | left:20px; 182 | margin: auto 0; 183 | border: none; /* Mobile Safari */ 184 | } 185 | 186 | .todo-list li .toggle:after { 187 | content: url('data:image/svg+xml;utf8,'); 188 | } 189 | 190 | .todo-list li .toggle:checked:after { 191 | content: url('data:image/svg+xml;utf8,'); 192 | } 193 | 194 | .todo-list li label { 195 | white-space: pre-line; 196 | word-break: break-all; 197 | padding: 15px 60px 15px 15px; 198 | margin-left: 45px; 199 | display: block; 200 | line-height: 1.2; 201 | transition: color 0.4s; 202 | } 203 | 204 | .todo-list li.completed label { 205 | color: #d9d9d9; 206 | text-decoration: line-through; 207 | } 208 | 209 | .todo-list li .destroy { 210 | display: none; 211 | position: absolute; 212 | top: 0; 213 | right: 10px; 214 | bottom: 0; 215 | width: 40px; 216 | height: 40px; 217 | margin: auto 0; 218 | font-size: 30px; 219 | color: #cc9a9a; 220 | margin-bottom: 11px; 221 | transition: color 0.2s ease-out; 222 | } 223 | 224 | .todo-list li .destroy:hover { 225 | color: #af5b5e; 226 | } 227 | 228 | .todo-list li .destroy:after { 229 | content: '×'; 230 | } 231 | 232 | .todo-list li:hover .destroy { 233 | display: block; 234 | } 235 | 236 | .todo-list li .edit { 237 | display: none; 238 | } 239 | 240 | .todo-list li.editing:last-child { 241 | margin-bottom: -1px; 242 | } 243 | 244 | .footer { 245 | color: #777; 246 | padding: 10px 15px; 247 | height: 20px; 248 | text-align: center; 249 | border-top: 1px solid #e6e6e6; 250 | } 251 | 252 | .footer:before { 253 | content: ''; 254 | position: absolute; 255 | right: 0; 256 | bottom: 0; 257 | left: 0; 258 | height: 50px; 259 | overflow: hidden; 260 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 261 | 0 8px 0 -3px #f6f6f6, 262 | 0 9px 1px -3px rgba(0, 0, 0, 0.2), 263 | 0 16px 0 -6px #f6f6f6, 264 | 0 17px 2px -6px rgba(0, 0, 0, 0.2); 265 | } 266 | 267 | .todo-count { 268 | float: left; 269 | text-align: left; 270 | } 271 | 272 | .todo-count strong { 273 | font-weight: 300; 274 | } 275 | 276 | .filters { 277 | margin: 0; 278 | padding: 0; 279 | list-style: none; 280 | position: absolute; 281 | right: 0; 282 | left: 0; 283 | } 284 | 285 | .filters li { 286 | display: inline; 287 | } 288 | 289 | .filters li a { 290 | color: inherit; 291 | margin: 3px; 292 | padding: 3px 7px; 293 | text-decoration: none; 294 | border: 1px solid transparent; 295 | border-radius: 3px; 296 | } 297 | 298 | .filters li a.selected, 299 | .filters li a:hover { 300 | border-color: rgba(175, 47, 47, 0.1); 301 | } 302 | 303 | .filters li a.selected { 304 | border-color: rgba(175, 47, 47, 0.2); 305 | } 306 | 307 | .clear-completed, 308 | html .clear-completed:active { 309 | float: right; 310 | position: relative; 311 | line-height: 20px; 312 | text-decoration: none; 313 | cursor: pointer; 314 | } 315 | 316 | .clear-completed:hover { 317 | text-decoration: underline; 318 | } 319 | 320 | .info { 321 | margin: 65px auto 0; 322 | color: #bfbfbf; 323 | font-size: 10px; 324 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 325 | text-align: center; 326 | } 327 | 328 | .info p { 329 | line-height: 1; 330 | } 331 | 332 | .info a { 333 | color: inherit; 334 | text-decoration: none; 335 | font-weight: 400; 336 | } 337 | 338 | .info a:hover { 339 | text-decoration: underline; 340 | } 341 | 342 | /* 343 | Hack to remove background from Mobile Safari. 344 | Can't use it globally since it destroys checkboxes in Firefox 345 | */ 346 | @media screen and (-webkit-min-device-pixel-ratio:0) { 347 | .toggle-all, 348 | .todo-list li .toggle { 349 | background: none; 350 | } 351 | 352 | .todo-list li .toggle { 353 | height: 40px; 354 | } 355 | 356 | .toggle-all { 357 | -webkit-transform: rotate(90deg); 358 | transform: rotate(90deg); 359 | -webkit-appearance: none; 360 | } 361 | } 362 | 363 | @media (max-width: 430px) { 364 | .footer { 365 | height: 50px; 366 | } 367 | 368 | .filters { 369 | bottom: 10px; 370 | } 371 | } -------------------------------------------------------------------------------- /custom-renderer-pixijs/example/play-plane/uml.dio: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | --------------------------------------------------------------------------------