Vue基础Day02_vue脚手架_基础API

01_vue_为什么学

---

问题

1. 我们为什么学习Vue？

答案

1. 我们为什么学习Vue？

1. 开发更快速，更高效

2. 企业开发都在使用

3. 前端工程师必备技能，高薪

02_vue_是什么

---

问题

1. Vue是什么？

2. 什么是渐进式？

3. 什么是库和框架？

答案

1. Vue是什么？

1. Vue是一个JavaScript渐进式框架

2. 什么是渐进式？

1. 渐进式就是按需逐渐集成功能

3. 什么是库和框架？

1. 库是方法的集合，而框架是一套拥有自己规则的语法

03_vue_开发方式_学习方法

---

问题

1. 我们在哪里书写Vue的代码？

2. 我们如何才能学好Vue？

答案

1. 我们在哪里书写Vue的代码？

1. 在工程化环境下用Vue开发项目

2. 我们如何才能学好Vue？

1. 多练多用多总结

04_vue_脚手架环境介绍

---

问题

1. 用Vue开发项目，需要自己配置webpack？

2. 使用脚手架的好处是什么？

答案

1. 用Vue开发项目，需要自己配置webpack？

1. 不需要，Vue官方提供了@vue/cli包，可以快速搭建项目基本开发环境

2. 使用脚手架的好处是什么？

1. 零配置，开箱即用，基于它快速搭建项目基本开发环境

05_vue_安装全局包

---

问题

1. 如何安装全局包？

2. 我们会得到什么？

答案

1. 如何安装全局包？

1. yarn global add 包名 或 npm i -g 包名

2. 我们会得到什么？

1. 全局包会在计算机中配置全局命令（例：nodemon、vue命令）

06_vue_创建脚手架项目_启动

---

问题

1. 如何创建一个开箱即用的脚手架项目？

2. 如何在网页上浏览这个项目？

答案

1. 如何创建一个开箱即用的脚手架项目？

1. vue create 项目名

2. 如何在网页上浏览这个项目？

1. yarn serve 启动本地热更新开发服务器

==练习时间：30s（输入命令初始化项目）==

---

07_vue_脚手架文件说明

---

问题

1. 脚手架里主要文件和作用？

答案

1. 脚手架里主要文件和作用？

1. node_modules - 都是下载的包

2. public/index.html - 浏览器运行的网页

3. src/main.js - webpack打包的入口

4. src/App.vue - Vue页面入口

5. package.json - 项目描述文件

==练习时间：3m（让学生跑起来访问感受下）==

---

08_vue_主要的3个文件和关系

---

问题

1. main.js和App.vue以及index.html作用和关系？

答案

1. main.js和App.vue以及index.html作用和关系？

1. main.js - 项目打包入口 - Vue初始化

2. App.vue - Vue页面入口

3. index.html - 浏览器运行的文件

4. App.vue => main.js => index.html

09_vue_开发服务器_自定义配置

---

问题

1. 脚手架项目配置文件是什么？

答案

1. 脚手架项目配置文件是什么？

1. 项目根目录下的vue.config.js配置文件

10_vue_eslint简介_暂时关闭设置

---

问题

1. eslint是什么？

2. 如何暂时关闭？

答案

1. eslint是什么？

1. eslint是代码检查工具，违反规定就报错

2. 如何暂时关闭？

1. 在vue.config.js中设置lintOnSave为false重启服务器即可

11_vue_单vue文件开发方式介绍

---

问题

1. 单vue文件的好处？

2. 单vue文件使用注意事项？

答案

1. 单vue文件的好处？

1. 独立作用域，不再担心变量重名问题

2. 单vue文件使用注意事项？

1. template里只能有一个根标签

12_vue_清空脚手架欢迎界面

---

问题

1. 欢迎界面是哪些？如何清除？

答案

1. 欢迎界面是哪些？如何清除？

1. assets下图片和components下的文件，App.vue初始代码

2. 删除即可，但是要留下Vue项目入口页面App.vue文件

==练习时间：3m==

---

14_vue基础语法_插值表达式

---

问题

1. 什么是插值表达式？

2. Vue中变量声明在哪里？

答案

1. 什么是插值表达式？

1. 双大括号，可以把Vue变量直接显示在标签内

2. Vue中变量声明在哪里？

1. data函数返回的对象上的键值对

15_vue基础语法_MVVM设计模式

---

问题

1. 什么是设计模式？

2. MVVM是什么？

3. MVVM好处？

答案

1. 什么是设计模式？

1. 设计模式是对代码分层，引入一种架构的概念

2. MVVM是什么？

1. MVVM（模型，视图，视图模型双向关联的一种设计模式）

3. MVVM好处？

1. 减少DOM操作，提高开发效率

16_vue指令_v-bind

---

问题

1. 如何给dom标签的属性设置Vue变量？

答案

1. 如何给dom标签的属性设置Vue变量？

1. :属性名="Vue变量"

17_vue指令_v-on绑定事件

---

问题

1. 如何给dom标签绑定事件？

2. 如何给事件传智？

答案

1. 如何给dom标签绑定事件？

1. @事件名="methods里的函数名"

2. 如何给事件传智？

1. @事件名="methods里的函数名(实参)"

==练习时间：5m==

---

18_vue事件_接收事件对象

---

问题

1. Vue事件处理函数，如何拿到事件对象？

答案

1. Vue事件处理函数，如何拿到事件对象？

1. 无实参，直接用第一个形参接收

2. 有实参，手动传入$event

19_vue事件_修饰符

---

问题

1. Vue有哪些主要修饰符，都有什么功能？

答案

1. Vue有哪些主要修饰符，都有什么功能？

1. .stop - 阻止事件冒泡

2. .prevent - 阻止默认行为

3. .once - 只执行一次事件处理函数

20_vue按键_修饰符

---

问题

1. 按键修饰符如何使用？

2. 有哪些主要按键修饰符？

答案

1. 按键修饰符如何使用？

1. @键盘事件.按键修饰符="methods里的函数名"

2. 有哪些主要按键修饰符？

1. .enter - 只有按下回车才能触发这个键盘事件函数

2. .esc - 只有按下取消键才能触发这个键盘事件函数

21_课上练习_翻转世界

---

问题

1. 点击翻转字符串显示思路是什么？

答案

1. 点击翻转字符串显示思路是什么？

1. 写需求要先写静态标签，再考虑动态效果，找到第一步干什么

2. 记住方法的特点 - 可以自己总结字典和口诀

==练习时间：5m==

---

22_vue指令_v-model基础使用

---

问题

1. v-model用在哪里？

2. v-model有什么作用？

答案

1. v-model用在哪里？

1. 暂时只能用在表单标签上

2. v-model有什么作用？

1. 把Vue的数据变量和表单的value属性双向绑定在一起

23_vue指令_v-model绑定不同表单标签

---

问题

1. 下拉菜单v-model写在哪里？

2. v-model用在复选框时，需要注意什么？

3. Vue变量初始值会不会影响表单的默认状态？

答案

1. 下拉菜单v-model写在哪里？

1. v-model写在select上，value写在option上

2. v-model用在复选框时，需要注意什么？

1. v-model的vue变量是：

1. 非数组 - 关联的是checked属性

2. 数组 - 关联的是value属性

3. Vue变量初始值会不会影响表单的默认状态？

1. 会影响，因为双向数据绑定 - 互相影响

24_vue指令_v-model修饰符

---

问题

1. Vue针对v-model有哪些修饰符来提高我们编程效率？

答案

1. Vue针对v-model有哪些修饰符来提高我们编程效率？

1. .number - 转成数值类型后再赋予给Vue数据变量

2. .trim - 去除两边空格后把值赋予给Vue数据变量

3. .lazy - 等表单失去焦点，才把值赋予给Vue数据变量

==练习时间：5m==

---

25_vue指令_v-text和v-html

---

问题

1. v-text和v-html有什么作用？

2. 区别是什么？

答案

1. v-text和v-html有什么作用？

1. 都可以设置标签显示的内容

2. 区别是什么？

1. v-text把值当成普通字符串显示

2. v-html把值当成标签进行解析显示

26_vue指令_v-show和v-if的使用

---

问题

1. vue如何控制标签显示/隐藏？

2. 区别是什么？

答案

1. vue如何控制标签显示/隐藏？

1. v-show或v-if，给变量赋予true/false，显示/隐藏

2. 区别是什么？

1. v-show是用css方式显示/隐藏标签

2. v-if直接从DOM树上添加/移除

3. v-if可以配合v-else或者v-else-if使用

27_案例_折叠面板

---

问题

1. 案例思路？

答案

1. 案例思路？

1. 还是先静态标签

2. 显示/隐藏用v-show和vue变量来控制（默认true）

3. 点击切换vue变量的值来达到目的

==练习时间：5m==

---

28_v-for的使用

---

问题

1. v-for如何循环列表？

2. v-for注意事项？

答案

1. v-for如何循环列表？

1. 谁想循环就把v-for写谁身上

2. v-for="(值变量, 索引变量) in Vue变量" - 一定要注意in两边必须有空格

3. 可以遍历数组/对象/固定数字/字符串

2. v-for注意事项？

1. 值变量和索引变量不能用到v-for范围以外

==练习时间：3m==

---