2021-04-23

Vue

1.我们我什么学习Vue

{1.开发更快速,更高速  2.企业开发使用更广泛  3.前端工程师必备技能}

2.Vue是什么? 什么是渐进式? 什么是库和框架?

{1.Vue是一个JaveScript渐进式框架  2.渐进式就是按需逐渐集成功能  3.库是方法的集合,而框架是一套拥有自己规则的语法}

3.我们在哪里书写Vue代码? 如何才能学好Vue

{1.在工程化环境下用Vue开发项目  2.多练多用多总结,找出错误 防止下次再犯}

4.用Vue开发项目,需要自己配置webpack? 使用脚手架的好处是什么?

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

5.如何安装全局包? 我们会得到什么

{1. yarn global add 或 npm i -g 包名  2. 全局包会在计算机中配置全局命令(例如:nodemon  Vue 命令)}

6.如何创建一个开箱即用的脚手架项目? 如何在网页上浏览这个项目

{1.Vue cerate 项目名  2. yarn serve 启动本地热更新开发服务器}

7.脚手架里主要文件和作用?

{1. node_modules - 都是下载的包  2.pubic/index.html - 浏览器运行的网页 3. src/main.js - webpack打包入口  4. src/App.vue - Vue 页面入口 5. package.json - 项目描述文件 }

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

{1.main.js - 项目打包入口 - Vue初始化  2.App.vue - Vue页面入口   3. index.html - 浏览器运行的文件  4. App.vue => main.js = > index.html}

9.脚手架项目配置文件是什么?

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

10.eslint是什么? 如何暂时关闭

{1. eslint是代码检查工具,违反规定就报错  2.在vue.config.js中设置lintOnSave重启服务器即可}

11.单vue文件的好处? 单vue文件使用注意事项

{1. 独立作用域,不在担心变量重名问题  2.template里只能有一个跟标签}

12.欢迎界面是那些? 如何清除?

{1.assets下图片和components下的文件,App.vue初始化代码 2.删除即可,但是要留下Vue项目入口页面App.vue文件}

13.什么是插值表达式? Vue中变量声明在哪里?

{1.双大括号,可以把Vue变量直接显示在标签内   2.data函数返回的对象的键值对}

14.什么是设计模式? MVVM是什么? MVVM的好处?

{1.设计模式是对代码分层,引入一种架构的概念  2.MVVM(模型,视图,视图模型双向关联的一种设计模式)  3.减少DOM操作,提高开发效率}

15.如何给dom标签的属性设置Vue变量?

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

16.如何给dom标签绑定事件? 如何给事件传值?

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

17.Vue事件处理函数,如何拿到事件对象?

{1.无实参,直接用第一个形参接受   2.有实参,手动传入$event}

18.Vue有哪些只要修饰符,都有什么功能?

{1.stop - 阻止事件冒泡   2. .prevent - 阻止默认行为  3. .once - 只执行一次事件处理函数}

19.按键修饰符如何使用? 有哪些主要按键修饰符?

{1.@键盘事件.按键修饰符 = "methods里的函数名"  2. .enter - 只有按下回车才能触发这个键盘事件函数   .esc - 只有按下取消键才能触发这个键盘事件函数}

20.点击翻转字符串显示思路是什么? 

{1.写需求要先写静态标签,在考虑动态效果,找到一步干什么  2.记住方法打特点 - 可以自己总结字典和口诀}

21.v-model用在哪里? v-model有什么作用?

{1.暂时只能用在表单标签上  2.把Vue的数据变量和表单的value属性双向绑定在一起}

22.下拉菜单v-model写在哪里? v-model用在复选框时,需要主要什么? Vue变量初始值会不会影响表单的默认状态?

{1.v-model写在selet上,value写在option上

 2.v-model的变量vue变量是: 1.非数组 - 关联的是checked属性  2. 数组 - 关联的是value属性

 3.会影响,因为双向数据绑定 - 互相影响 }

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

{1..number - 转成数值类型后再赋予给Vue数据变量   2..trim - 去除两边空格后把值赋予给Vue数据变量  3.lazy - 等表单失去焦点，才把值赋予给Vue数据变量 }

24.v-text和v-html有什么作用？ 区别是什么？

{1.都可以设置标签显示的内容    2. v-text把值当成普通字符串显示   v-html把值当成标签进行解析显示 }

25.vue如何控制标签显示/隐藏？ 区别是什么？

{1.v-show或v-if，给变量赋予true/false，显示/隐藏  2.v-show是用css方式显示/隐藏标签  v-if直接从DOM树上添加/移除  v-if可以配置v-else或者v-else-if使用   }

26.案例思路？

{1.还是先静态标签  2.显示/隐藏用v-show和vue变量来控制（默认true）  3.点击切换vue变量的值来达到目录 }

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

{1. 谁想循环就把v-for写谁身上  2.v-for="(值变量, 索引变量) in Vue变量" - 一定要注意in两边必须有空格   3.可以遍历数组/对象/固定数字 }

28.v-for注意事项？

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