vue基础面试题[1]

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 启动本地热更新开发服务器

07_vue_脚手架文件说明

问题

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

答案

1. 脚手架里主要文件和作用？
   1. node_modules - 都是下载的包
   2. public/index.html - 浏览器运行的网页
   3. src/main.js - webpack打包的入口
   4. src/App.vue - Vue页面入口
   5. package.json - 项目描述文件

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文件

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里的函数名(实参)”

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. 记住方法的特点 - 可以自己总结字典和口诀

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数据变量

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变量的值来达到目的

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范围以外