目录
一、选择题
二、填空
三、简答
四、vue经典案例
注:括号内为书中知识点页面。
1.你对vue中mvvm的模式设计有什么感想?(9)
mvvm设计模式采用的双向绑定,当view发生变化,model会跟着变化,model发生变化,view也会同步,这样的话,我们就可以更多的关注逻辑,从而减少dom的操作,代码的耦合性也更好。
2.Vue特点,优点(13)
Vue核心思想:vue两大核心思想为__数据驱动和组件化。
vue的两大特点:响应式编程,组件化
Vue的优势:
- 双向数据绑定,组件化,数据和结构的分离,虚拟DOM ,运行速度快
- Vue是单页面应用,页面局部刷新,不用每次跳转页面请求所有的数据和dom
3.开发工具:vscode,hbuider,subline,webstorm
4.目前三大主流框架,都有自己的路由实现:
Angular的ngRouter
React的ReactRouter
Vue的vue-router
5.修饰符作用(27,45,64-66)
事件绑定修饰符:.prevent 阻止默认事件(27)
.lazy,.number,.trim (45)
.stop阻止冒泡、.capture 事件捕获、.self 自身事件触发、.once 一次性绑定(64-66)
6.form表单
7.vue-router 动态路由
前端路由的核心:改变URL,但是页面不进行整体的刷新。
例:以下选项中不可以进行路由跳转的是:D
A. push()
B.replace()
C. route-link
D.jump()
例:以下获取动态路由{ path: '/user/:id' }中id的值正确的是:A
A.this.$route.params.id
B.this.route.params.id
C.this.$router.params.id
D.this.router.params.id
8.跨域(181,329)
1.前端使用代理(181) 同源策略:指协议,域名,端口都要相同,其中有一个不同便会产生跨域。
2.后端Cors跨域配置(329)
9.计算属性(95-99)
计算属性的重点突出在属性两个字上,首先它是个属性,其次这个属性有计算的能力,这里的计算就是个函数。简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),可以想象为缓存。
说明:
methods:定义方法,调用方法需要带括号
computed:定义计算属性,因为是属性所以调用不需要带括号
结论:调用方法时,每次都需要进行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销。
10.computed和watch的区别
computed计算结果并返回,只有当计算的值发生改变时才会触发
Watch 监听某一个值,当监听的值发生变化时,执行对应的操作
与computed的区别是,watch更加适用于监听某一个值的变化并做对应的操作,比如请求后台接口等,而computed适用于计算已有的值并返回结果
11.vue的生命周期,执行顺序争取的是:D
A. beforeCreate -> init->create->mount->destory
B. mount-> init->beforeCreate->create->destory
C.beforeCreate->create->init->mount->destory
D.init->beforeCreate->create->init->destory
12.用于监听 DOM 事件的指令是:A
A.v-on B.v-model C.v-bind D.v-html
13.css和js理解
14.Vue组件理解(82)
使用组件的好处:
提高开发效率,方便重复利用,简化调试步骤,提升整个项目的可维护性,便于协同开发。
全局注册(83)和局部注册(86)
Vue组件中data值不能为对象,原因(84),data必须是函数,然后将数据利用return返回
1.组件props(89)
让子组件使用父组件的数据,需要通过子组件的props选项来实现,使用v-bind传递一个实际值。
2.$emit(100)
父传子:父组件通过v-bind绑定一个属性,子组件中通过props接受父组件中的绑定的属性
子传父:子组件通过广播的方式$emit将值传递给父组件,父组件中通过一个函数去接受子组件中传递过来的值
3.$ children/$ parent
指定已创建的实例之父实例,在两者之间建立父子关系,子实例可以用this.$ parent访问父实例,子实例被推入父实例的$ children数组中
$ children 的值是数组,而$ parent是个对象
vue组件封装优点:
组件是vue.js最强的功能之一,组件可以扩展HTML元素封装可重用代码,组件是可复用的vue实例组件可以提升整个项目的开发效率。
能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性低等问题。
15.vuex5个核心概念
state:存储数据
mutations:更新数据方法
actions:调用mutations方法,更新state数据
getters:对state中的数据进行预处理
modules:模块化vuex
例.以下选项中不属于vuex中的属性?D
A. state
B.getters
C.actions
D.init
16.vue生命周期阶段
beforeCreate创建之前 created创建完成
beforeMount渲染之前 mounted渲染完成
beforeUpdate数据更新前 update更新完毕
beforeDestory 实例销毁之前 Destory实例销毁后
17.计算属性和watch的区别
computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。
watch监听的是你定义的变量,当你定义的变量的值发生变化时,调用对应的方法。
就好在div写一个表达式name,data里写入num和lastname,firstname,在watch里当num的值发生变化时,就会调用num的方法,方法里面的形参对应的是num的新值和旧值,
而计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
1. 脚手架理解作用安装(141)
脚手架与SPA:vue脚手架写法为vue-cli,工程化项目时使用的模板为webpack。
2.路由懒加载使用(158)
懒加载也叫延迟加载,即在需要的时候进行加载,随用随载在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验。
运用懒加载可以将页面进行划分,按需加载页面,可以分担首页所承担的加载压力,减少加载用时。
懒加载的方式:
(1)结合Vue的异步组件和Webpack的代码分析。
(2)AMD写法
(3)在ES6中,可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割。
3.springboot配置文件yml文件和properties作用(235)
在springboot项目中我们经常看到默认生成的application.properties文件,其实yml文件作用和它一样,他们都是用来修改一些默认的配置值。如Mysql的用户名,密码等。
yml写法:
1)每一个等级用冒号分隔,然后空行,以空格的缩进程度来控制层级关系,空格个数不重要,注意不能使用Tab符号。properties文件每一个点为一级。
2)冒号后面为值时,需要用一个空格隔开。
1. yml通过缩进来控制父子关系
2. 属性和值之间通过半角的冒号 + 空格 来间隔(每个k的冒号后面一定都要加一个空格;)
3. 在properties文件中是以”.”进行分割的, 在yml中是用”:”进行分割;
例子:
application.properties
eureka.instance.hostname=localhost
eureka.client.registerWithEureka=false
eureka.client.fetchRegistry=false
application.yml
eureka:
client:
fetchRegistry: false
registerWithEureka: false
instance:
hostname: localhost
读取顺序:Springboot项目中properites和yml都存在情况下,优先读取properties文件。
正常的情况是先加载yml,接下来加载properties文件。如果相同的配置存在于两个文件中。最后会使用properties中的配置。最后读取的优先集最高。
两个配置文件中的端口号不一样会读取properties中的端口号。
加载顺序yml>yaml>properties,优先级properties>yaml>yml,就是properties会覆盖其他两个
加载顺序和优先级是相反的,正常的加载顺序是yml>properties,但是由于后加载的会覆盖先加载的,所以当两种文件都有的时候我们看到的是properties的执行了和yml的被覆盖了,所以优先级是properties>yml
4.Springboot异常处理(250-255)
使用@ExceptionHandler注解处理局部异常
使用@ControllerAdvice注解处理全局异常
配置SimpleMappingExceptionResolver类处理异常
5.Spring boot 安全框架(333-350)
Spring Security默认的用户名是user,Spring Security启动的时候会生成默认密码,在启动日志中可以看到
6.Springboot 整合数据库(288)
Redis可以通过配置文件中的databases修改默认数据库个数,Redis不支持自定义数据库名,Redis的多个数据库之间不是完全隔离的,flushall命令会清空所有数据库的数据。
7.接口测试工具postman(285)
8.定时器(266)
简单的定时任务可以直接通过Spring自带的task来实现,复杂的定时任务则可以通过集成的Quartz来实现。
9.Springboot整合mysql(310)
JdbcTemplate:JDBC连接数据库的工具类。
10springboot打包:项目部署,打包成jar,war(351)
Spring Boot项目可以内嵌Servlet容器,因此部署极为方便,可以直接打包成可执行Jar包部署在有Java运行环境的服务器上,也可以打包成War包并部署到外部Tomcat服务器上等。
11.前后端分离
核心思想是前端HTML页面通过Ajax调用后端的RESTful API并使用JSON数据进行交互。(354)
热部署就是在项目正在运行的时候修改代码,却不用重新启动项目。(282)4
前后端对于后端来说,不用考虑前端的布局,只需要考虑后端数据的正确性,那么在后端测试返回的JSON数据的正确性就离不开Postman工具。(282)
前后端分离:
将一个应用的前端代码和后端代码分开写;
前端只需要独立编写客户端代码,后端只需要独立编写服务端代码提供数据接口;
前端通过Ajax请求来访问后端的数据接口,将Model展示到View中;
前后端开发者,只需要提前约定好接口文档(URL、参数、数据类型...),然后分别独立开发,前端可以造假数据进行测试,完全不依赖于后端,最后完成前与后端集成即可;实现了前后端应用的解耦合,极大的提升了开发效率;
单体:前端应用+后端应用,前端写HTML,通过Ajax请求后端RESTful数据接口;
前端应用:负责数据展示,用户交互;
后端应用:负责提供数据处理接口;
不使用前后端分离的方式,会有哪些问题?
传统的Java Web开发中,前端使用JSP开发,JSP不是由后端开发者独立完成的;
前端开发写HTML静态页面,后端开发写JSP,这种开发方式效率极低;
实现技术:Spring Boot + Vue,使用Spring Boot进行后端应用开发,使用Vue进行前端应用开发
1. 热部署原理(283)
深层原理是使用了两个ClassLoader,一个Classloader加载那些不会改变的类(第三方Jar包),另一个ClassLoader加载会更改的类,称为restart ClassLoader,这样在有代码更改的时候,原来的restart ClassLoader 被丢弃,重新创建一个restart ClassLoader,由于需要加载的类相比较少,所以实现了较快的重启时间。
2.vue路由(158)
SPA(single page application):单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。 单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面 ;vue-router在实现单页面前端路由时,提供了两种模式,根据mode参数来决定采用哪一种方式
3.条件渲染指令包含哪些,两者区别是什么?(56)
v-if v-show
实质本质方法的区别:vue-show本质就直标签display设为none,控制隐藏;vue-if是动态的向DOM树向添加或者删除DOM元素
编译的区别:v-show就是在控制css;v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件。
编译的条件:v-show都会编译,初始值为false,只是将display设为none,但它也编译了。v-if初始值设为false就不会编译了。
性能:v-show只能编译一次,后面其实就是控制css,而v-if不停的销毁和创建,如果需要频繁的使用,则使用v-show较好,如果在运行时,条件很少改变,如果使用v-if比较好。
4.Vue 单项数据流(95-99)
单向数据流:父级 prop 的更新会向下流动到子组件中,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值,数据是单向的,父组件的数据传递给子组件,只能单项绑定,不可以在子组件修改父组件的数据; 双向数据绑定:数据和页面进行双向绑定,相互影响。
5.为什么在使用v-for的时候需要添加key属性?
因为vue在更新渲染dom的时候是根据新旧dom数进行对比的,使用key来给每个节点做一个唯一标识,
6.vue的router-link和a的区别
a标签:点击a标签从当前页面跳转到另一个页面,页面会重新加载,相当于打开了一个网页
router-link:不会跳转到新的页面,不会重新渲染,不像a标签一样需要重新渲染,减少了DOM性能的损耗
7.Vue 父子组件间的参数传递是如何做到的?
父组件向子组件传值:
1)子组件在props中创建一个属性,用来接收父组件传过来的值;
2)在父组件中注册子组件;
3)在子组件标签中添加子组件props中创建的属性;
4)把需要传给子组件的值赋给该属性
子组件向父组件传值:
1)子组件中需要以某种方式(如点击事件)的方法来触发一个自定义的事件;
2)将需要传的值作为$emit的第二个参数,该值将作为实参传给响应事件的方法;
3)在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
1、⾛马灯
2、简单计算器
3、循环渲染下列数据,展⽰数据的名字。点击这--⾏能够alert出数据的名字。顶部有搜索框,后⾯有个搜索按钮,点击搜索按钮可以按照输⼊的内容检索列表。