Vue3学习记录

01.

02.

1、

2、在 Vue 中，我们使用 @来标记用户的交互，@click 是点击，@keydown 是键盘敲下

监听回车键，那么我们就用 @keydown.enter=“addTodo”

3、在函数内部，我们可以在 this 上直接读到 data 里的的数据

4、<span :class="{done:todo.done}"> {{todo.title}}</span>

在 Vue 中，冒号":" 开头的属性是用来传递数据的，这里的写法的意思就是根据 todo.done 来决定是否有 done 这个 class。

 

 03.

响应式：

vue2:

vue3:

vue3与2相比的不同处

新的 RFC 机制也让我们所有人都可以参与 Vue 新语法的讨论。

工程化工具 Vite 带来了更丝滑的调试体验。

对于产品的最终效果来看，Vue 3 性能更高，体积更小。

对于普通开发者来说，Composition API 组合语法带来了更好的组织代码的形式。

全新的响应式系统基于 Proxy，也可以独立使用。

Vue 3 内置了新的 Fragment、Teleport 和 Suspense 等组件。

对于 Vue 的二次开发来说，自定义渲染器让我们开发跨端应用时更加得心应手。

对于 Vue 的源码维护者，全部的模块使用 TypeScript 重构，能够带来更好的可维护性。

 

04.

vue2项目升级到vue3

 

05.

vue3项目目录：

目录中的 index.html 是项目的入口；package.json 是管理项目依赖和配置的文件；public 目录放置静态资源，比如 logo 等图片；vite.config.js 就是和 Vite 相关所有工程化的配置；src 就是工作的重点，我们大部分的代码都会在 src 目录下管理和书写，后面我们也会在 src 目录下细化项目规范。

src目录下的规范：

├── src
│ ├── api 数据请求
│ ├── assets 静态资源
│ ├── components 组件
│ ├── pages 页面
│ ├── router 路由配置
│ ├── store vuex数据
│ └── utils 工具函数

 

路由：

　　 router-link 和 router-view 就是由 vue-router 注册的全局组件，router-link 负责跳转不同的页面，相当于 Vue 世界中的超链接 a 标签； router-view 负责渲染路由匹配的组件，我们可以通过把 router-view 放在不同的地方，实现复杂项目的页面布局。

 

CSS：

text-decoration: line-through;　　　　规定文本的中间将显示一条线。

Node.js安装地址：

http://nodejs.cn/download/