目录
一、选择题
二、填空
三、简答
四、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）在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
四、vue经典案例
1、⾛马灯
<body>
<div id='app'>
<button @click="start">浪起来</button>
<button @click="stop">低调</button>
<h3>{{title}}</h3>
</div>
</body>
<script>
const vm = new Vue({
el:"#app",
data:{
title:"不要浪，别团",
Interva: null
},
methods: {
start(){
clearInterval(this.Interva)
console.log(this.title.substr(0,1));
console.log(this.title.substring(0, 1));
this.Interva = setInterval(()=>{
this.title = this.title.substr(1) + this.title.substring(0,1);
},300)
},
stop(){
clearInterval(this.Interva);
}
}
})
</script>2、简单计算器
<body>
<div id="app">
<input type="text" v-model='num1'>
<select v-model='opration'>
<option value="+">+</option>
<option value="-" selected>-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="num2">
<button @click="calc">=</button>
<span style="background-color: aqua;">{{sum}}</span>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
num1: 0,
opration: "-",
num2: 0,
sum: 0
},
methods: {
calc() {
this.num1 = Number(this.num1);
switch (this.opration) {
case "+":
this.sum = this.num1 + this.num2;
break;
case "-":
this.sum = this.num1 - this.num2;
break;
case "*":
this.sum = this.num1 * this.num2;
break;
case "/":
this.sum = this.num1 / this.num2;
break; }
} }
})
</script>3、循环渲染下列数据，展⽰数据的名字。点击这--⾏能够alert出数据的名字。顶部有搜索框，后⾯有个搜索按钮，点击搜索按钮可以按照输⼊的内容检索列表。
<div id="app">
{{title}}
<ul>
<!-- i为索引 item为内容 -->
<input type="text" v-model="item1">
<button @click="search">检索</button>
<li v-for="(item,i) in list" @click="show(item.name)" v-show="flag">id：{{item.id}} ----值：{{item.name}}</li>
</ul>
<ul>
<li v-for="(item,i) in list1">id：{{item.id}} ----值：{{item.name}} </li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#app",
data: {
list: [{ id: 3, name: "张三丰" },
{ id: 5, name: "张⽆忌" },
{ id: 13, name: "杨逍" },
{ id: 33, name: "殷天正" },
{ id: 12, name: "赵敏" },
{ id: 97, name: "周芷若" }],
list1: [],
item1: null,
flag:true
},
methods: {
show(name) {
alert(name);
},
search() {
this.list1 = this.list.filter(item => {
return item.name == this.item1;
})
if(this.list1.length==0){
this.flag = true;
}else{
this.flag = false; }
} }
})
</script>开卷，单选20（30分），填空26（26分），问答3（18分），编程1（26分）
记录一下开卷考完小结知识点，不太全面。
