关于javascript:尝鲜vue30从ToDoList开始1

我的项目生成

1. webpack 配置的版本
   间接从 github clone 即可
   github 地址
   
2. @vue/cli

npm i -g @vue/cli
vue create vue-demo-1
cd vue-demo-1
vue add vue-next
npm run serve

留神

//package.json 可见
"dependencies": {
  "core-js": "^3.6.5",
  "vue": "^3.0.0-beta.1"
},

1. vite

   vite 是 举荐应用 的新工具 https://github.com/vitejs/vite

   npm init vite-app vue-demo-2
   cd vue-demo-2
   npm install
   npm run dev

简略的计数器（介绍局部 api）

HelloWorld.vue 代码

asyncCom.vue

<script>
import {onMounted} from 'vue'
export default {
 name: 'asyncCom',
 async setup(){onMounted(()=>{console.log('---');
   })
   await sleep()}
}
function sleep(){return new Promise((resolve)=>{setTimeout(()=>{resolve()
     console.log(1);
   },3000)
 })
}
</script>

ToDoList 组件

• 顶部输入框，enter 增加新 item
• list 须要单项有 checkbox 和 delete，全选性能, 以及选中个数的统计
• 滚动列表，输入框到肯定地位需置顶

  (款式可本人调节)
  toDoList.vue

最初

实现上述步骤之后，置信大家对 vue3.0 有了初步的理解。。。

生命不息，代码不止。。。

下一篇介绍 vue3.0 的变动尝鲜 vue3.0- 理解变动(2)