尝鲜vue3.0-从ToDoList开始

时间:2020-9-13 作者:admin

项目生成

  1. webpack配置的版本
    直接从github clone即可
    github地址

    尝鲜vue3.0-从ToDoList开始

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

注意

尝鲜vue3.0-从ToDoList开始

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

    vite是推荐使用的新工具github.com/vitejs/vite

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

简单的计数器(介绍部分api)

HelloWorld.vue代码

尝鲜vue3.0-从ToDoList开始

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-从ToDoList开始


最后

完成上述步骤之后,相信大家对vue3.0有了初步的了解。。。

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。