1.对SPA单页面的理解和优缺点。
spa(single-page-application)是指在初始化web应用时，就加载了html、javacript，css等，此后不会因为用户的操作加载和跳转，而且通过路由来来实现页面内容的变换，避免了重复加载。
优点：用户体验好，避免不必要的跳转和重复渲染，相对服务器压力比较小，前后端职责分离，前端交互逻辑，后端数据处理
缺点: 初次加载耗时长，为实现单页面应用需要统一加载javacript、css.部分页面按需加载.前进后退由路由管理，因为是一个页面显示所有内容，所以不能使用浏览器的前进退后功能，需要建立自己的堆栈管理。
2.v-show和v-if有啥区别
v-if是真正的条件渲染，是有惰性的，只有条件判断为true时才会渲染条件内的内容，为false则不会渲染。
v-show则不管怎么都会渲染，相对应的只是改变css中的display属性
总结：如果是频繁切换条件建议使用v-show，否则使用v-if.
3.Class 与Style如何动态绑定
Class可通过对象或者数据的手法进行绑定。
对象语法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Class 与Style如何动态绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div class="static" v-bind:class="{ active: isActive, ‘text-danger‘: hasError }"></div> </div> </body> <script> var Vm = new Vue({ el:‘#app‘, data:{ isActive:true, hasError:false } }) </script> </html>
得到结果为：
<div class="static active"></div>
数组语法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Class 与Style如何动态绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-bind:class="[activeClass, errorClass]"></div> </div> </body> <script> var Vm = new Vue({ el:‘#app‘, data: { activeClass: ‘active‘, errorClass: ‘text-danger‘ } }) </script> </html>
得到结果为：
<div class="active text-danger"></div>
Style也可以通过对象和数组进行动态绑定。
对象中：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Class 与Style如何动态绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-bind:style="styleObject">123</div> </div> </body> <script> var Vm = new Vue({ el:‘#app‘, data: { styleObject:{ color: ‘red‘, font-size: ‘25px‘ } } }) </script> </html>
得到结果：
<div style="color: red; font-size: 25px;">123</div>
数组中 v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Class 与Style如何动态绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">123</div> </div> </body> <script> var Vm = new Vue({ el:‘#app‘, data: { baseStyles:{ fontSize: ‘25px‘, }, overridingStyles:{ color: ‘red‘ } } }) </script> </html>
得到结果：
<div style="font-size: 25px; color: red;">123</div>
原文：https://www.cnblogs.com/wzw-gjh/p/12889062.html