Vue3.0实现todolist

项目准备

Vue3.0环境搭建

1、官网安装node，进入node.js官网安装长期支持版
打开终端输入：node -v 如果出现node版本号，表明安装成功
安装node自带npm,包管理工具
输入npm -v 出现npm的版本号
2、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
输入cnpm -v 会出现一系列版本号，说明安装成功
3、安装vue环境：cnpm i -g vue @vue/cli
输入vue -V检测vue是否装好
cd desktop进入桌面创建vue项目：vue create todolist
选择Manually select features



使用vscode打开todolist
在终端中输入npm run serve
Ctrl+左键打开项目
就已经创建启动一个vue3.0的项目了

文件和目录结构

node_modules 存放所有依赖
public favicon.ico 浏览器左上角显示的图标
index.html 项目最终上线的代码

src文件夹 assets文件夹：存放静态资源，包括图标、图片等
components文件夹：存放一般组件
router文件夹：配置路由
store文件夹：配置状态管理
views文件夹：存放路由组件
App.vue：根组件
main.js：项目组入口js文件，引入第三方的库和插件

.browserslistrc 管理浏览器版本的

.gitignore 上传git中忽略的文件
bable.config.js 配置bable的，转移js语法
package-lock.json 所有包的具体信息
package.json 包管理文件
README.md 项目介绍

基本结构

定义组件

组件是维护单一功能，可复用的单个个体

.vue单文件的几个核心概念
template标签用来编写html内容的
script标签用来编写js内容的
style标签样式

组件内容在script标签中定义
定义组件defineComponent
vue3需要用到的东西要从vue中解构出来 import {defineComponent} from ‘vue’
通过export default导出，调用defineComponent()方法 export default defineComponent
传入一个对象的参数，这个对象就是组件的配置对象，组件名称name:‘Home’, 接收父组件的数据props:{}, 定义子组件components:{}, setup(){return{}},
最重要的是setup函数，最终return一个对象，setup中传入两个参数接收父组件的数据props和上下文ctx
export default defineComponent({
name:‘Home’, //组件名称
//接收父组件的数据
props:{
},
//定义子组件
components:{
},
setup(props,ctx){
return{
}
}

实现todolist需要的四个组件

一个父组件home，三个子组件navheader,navmain,navfooter
在components中创建三个文件夹，文件夹下分别创建文件

把子组件引入到父组件当中
import NavHeader from ‘@/components/navHeader/NavHeader.vue’
import NavMain from ‘@/components/navMain/NavMain.vue’
import NavFooter from ‘@/components/navFooter/NavFooter.vue’
把import从vue中解构出来
import {defineComponent} from ‘vue’
定义组件

Home

Header:

App

运行：

ref定义单个数据

在vue3.0中，用谁就要引用谁
引用ref
定义的数据在setup函数中定义
num初始值为10

{ {}}差值表达式，把数据名插入两个大括号里

这样就定义了一个num初始值为10，name初始值为Jack，运行结果：

ref也可以定义数组
若要得到数组的第一项

差值表达式可以进行一些简单的操作

含头不含尾截取两个

ref也可以定义对象

若只想取对象中一个单独属性<