【Vue】Vue基础

vue3文档地址：https://cn.vuejs.org
node地址：https://nodejs.org/
视频地址：

1. 开发背景

- Node.js >= 15.0
- npm （新版node包含，不用再单独安装）

2. 开发环境（基于Vscode）

- 插件：
  Vetur 提示和语法高亮
  Vue VSCode Snippets 代码片段提示     

3. 项目创建

1、npm init veu@latest

2、根据提示输入：
Project name：项目名称
Add TypeScript: （默认no）
... (默认no回车即可)

3、dos中操作
cd 项目名称  // 进入项目
npm install // 安装
npm run dev // 运行

4. 目录结构

5. 编辑器运行

npm报错，已知dos中运行正常，但是编辑器中报错，查看终端运行环境改为cmd



切换终端后运行正常
如果还报错可以重启电脑，或者将编辑器权限改为管理员运行再重启

6. 模版语法【export】

7. 属性绑定【v-bind】

8. 条件渲染【v-if】

9. 列表渲染 【v-for】

10. 事件处理【v-on/@】

11. 事件参数

12. 事件修饰符【prevent、stop…】

13. 计算属性【三元】

14. class绑定（推荐）、style绑定（不推荐）

15. 侦听器（响应式 ）【watch】

watch中方法名和data响应式数据中变量名称保持一致

16. 表单输入绑定【v-model】&修饰符【.trim、.lazy…】

17. 模板引用【this.$refs】

18. 组件

1）组件组成

2）组件嵌套关系

3）注册方式

局部注册：引入，注入，显示

全局注册：

4）组件传递数据

5）组件事件

6）组件配合v-model使用

7）生命周期

红色部分为生命周期函数（8个）：
创建期：beforeCreate created
挂载期：beforeMount mounted
更新期：beforeUpdate updated
销毁期：beforeUnmount unmounted

19. 透传【Attributes】

20. 插槽【Slots】

1）单个插槽

2）多个插槽

–渲染作用域：父级动态数据

–插槽默认值

–具名插槽：多个插槽分别命名

3）子传父插槽数据

21. 依赖注入