vue中的基础理论知识

第一天

1.简述MVVM和MVC的区别
MVC是后台的中框架模式 将程序分成三部分
M(model模型) V（view 视图） C（controller控制器）
MVVM 是为实现MVC中的v（view视图）
M model（数据） v（html元素）视图 v m(view-model)是用来控制数据的改变和控制试图是前端的框架模式

2、简述虚拟DOM
对复杂的文档DOM结构，提供一种方便的工具，进行最小化的DOM操作

3、如何创建vue的实例

var vm=new Vue({
　　el:“挂载点”,
　　data:{
　　数据
　},
　　methods(){
　　定义方法
　　}
　})

4、列举常用指令以及作用

1. v-for循环
2. v-on绑定事件 (语法糖@)
3. v-model双向数据绑定
4. v-text渲染字符串
5. v-html渲染html节点及字符串（解析成html可以识别）
6. v-if判断语句
7. v-show显示/隐藏（可用于判断）
8. v-bind绑定属性 （语法糖:）

5、列举出常用的修饰符
@事件.stop 阻止事件冒泡
@事件.prevent 阻止事件默认行为
@事件.capture 触发事件捕获
@事件.self 当事件在该元素本身 触发回调
@once 只执行一次

6、v-if和v-show的区别及使用场景
v-if：判断是否有dom
v-show：判断隐藏/显示dom

第二天

1.简述一下vue中method computed watch 是什么和区别
watch （监听属性）也可以响应数据的变化，当需要在数据变化时执行异步或开销较大的操作时使用watch
methods （定义事件方法）每次渲染的时候都会被重新调用
computed （计算属性）它既有属性的特点，也可以写复杂的逻辑，但是它是基于属性的缓存的，只有缓存属性的依赖发生改变的时候才会被调用，否则不会被调用

2、什么是过滤器？怎么定义全局和局部过滤器
过滤器是对 即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据
　全局：
Vue.filter(‘过滤器名’,funciton(val){
　　//逻辑代码
})
　局部：
filter：{过滤器名:funciton(参数){
　　//逻辑代码
　　}
}
3、自定义指令的语义是什么？请举例说明一个带参数的自定义指令怎么定义？

directives:{
　　“指令名”:{
　inserted:function(当前节点){
　　//对节点操作
　　}
　}
}
例：
directives:{
　color:{
　bind:function(el,binding){
　　if(binding.arg){
　　　el.style.color=binding.arg
　　}else{
　　　el.style.color=”green”
　　}
　}
}

4、渐进式框架的理解
主张最少——它是一个轻量视图，只做了自己该做的事，没有做不该做的事

5、Vue中双向数据绑定是如何实现的
使用v-model来实现
Vue 实现 双向数据绑定 主要采用：数据劫持结合“发布-订阅”模式的方式，通过Object.defineProperty（）中的 set 和 get，在数据变动时发布消息给订阅者触发监听。

6、单页面应用和多页面应用区别以及优缺点
单页面：只有一个html页面，跳转方式是组件之间的切换
优点：跳转流畅、组件化开发、组件可复用、开发便捷
缺点：首屏加载过慢
多页面：有多个页面，跳转方式是页面之间的跳转
优点：首屏加载块
缺点：跳转速度慢

7、自定义指令有哪些钩子函数，及自定义指令的使用场景
(1)bind：只调用一次，指令第一次绑定到元素时调用
(2)inserted：被绑定元素插入父节点时调用
(3)update：所在组件的虚拟节点更新时调用
(4)componentUpdated：所在组件的虚拟节点及子虚拟节点全部更新后调用
(5)unbind：只调用一次，指令与元素解绑时调用

8、v-clock有什么作用
能够解决插值表达式闪烁问题，需要在style中设置样式[v-clock]{display:none}

9、vue中怎么动态的绑定class样式

<div :class="{类名:变量}"></div>

第三天

1、简单说一下组件特性及好处
(1)特性:组件中代码可重用性、可指定性、互操作性、高内聚性、低耦合度
(2)好处：组件可以可以操作dom扩展HTML元素、可将多次使用的代码封装 、方便开发

2、vue组件的基本组成
template 结构（html代码）
script行为
style样式

3、父传递子如何传递
在父组件中给子组件标签上绑定一个属性， 属性上挂载需要传递的值
在子组件通过props:[“自定义属性名”]来接收数据

4、子传递父如何传递
(1)在父组件中给子组件标签绑定一个自定义事件，给这个事件挂载需要调用的方法
(2)在子组件的方法通过this.$emit(‘自定义事件名’)来调用这个方法

5、兄弟组件如何通信

1. 创建一个空的vue实例BUS
2. 通过BUS.$emit(‘事件名’)传到空的vue实例中 输出数据
3. 通过BUS.$on(‘事件名’,(参数)=>{挂载从子1传来的数据})来接收

6、接受props验证类型都有哪些
Number、boolean、string、object、array、function、date、symbol

第四天

1、keep-alive是什么？
包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，它自身不会渲染一个DOM元素，也不会出现在父组件中

2、生命周期共有几个？分别在什么时候使用?
beforeCreate 前<创建>后created
beforeMount 前<挂载>后mounted
beforeUpdate 前<更新>后Updated
beforeDestroy 前<销毁>后Destroyed

3、created和mounted区别
created实例化创建后，完成了data的初始化，挂载阶段还没开始$el没有获取不到真实DOM
Mounted挂载完成， $el属性创建 模块中的HTML渲染到html页面只执行一次

第五天

1、vue安装脚手架步骤？
vue create 项目名称
cd 进入 项目名
npm run serve 启动项目

2、为什么要使用脚手架
可快速开始一个vue项目，不用手动配置，直接开发，既方便又快捷

3、Vue-cli中如何使用sass
cnpm i --save-dev sass-loader
cnpm i --save-dev node-sass

4、Vue-cli打包命令是什么？打包后会导致路径问题，应该在哪里修改
npm run build
打开config/index.js看到build属性，把assetsPubicPath:”/”改为assetsPublicPath:”./”

5、Vue-router共有几种模式？默认是那种？
在vue的路由配置中有mode选项，最直观的区别就是在url中hash 带了一个很丑的 # ，而history是没有#的。vue默认使用hash。
hash（默认）、history

6、Params和query的区别
使用params传参只能使用name进行引入传递过来的值刷新后会消失，而query传参name和path都可以，值刷新后值会保存
用法:
query要用path来引入，params要用name来引入，接收参数都是类似的，分别是

this.$route.query.name

this.$route.params.name。

url地址显示:
query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

7、Assets和static的区别
共同点：两个都是存放静态资源文件的
区别：
assets：存放的静态资源文件在项目打包时，压缩后的静态资源文件最终也会放在static文件中跟着index.html一同上传
static：static中 放置的静态资源文件就不会走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器

第六天

1.嵌套路由如何配置

const routes= [
　　　{
　　　path: '/',
　　　name: 'home',
　　　component: Home,
　　　　　　children:[
　　　{
　　　　　　path:'/one', 
　　　　　　name:"one",
　　　　　　component:One,
　　　　　　children:[
　　　{
　　　　　　path:"/two",
　　　　　　name:"two",
　　　　　　component:Two
　　　}
　　　　　]
　　　　　}
　　　　]
　　　　}
　　　]

2、有列表页进入到详情页的思路
(1)在列表页中给某个元素一个点击事件，并传递一个值，在methods的方法中写跳转this.$router.push({name:”xiang”,params:{zhi:值}}
(2)在router.js中配置：path:”路径/:参数”
(3)在详情页使用mounted()获取传递过来的值（this.$route.params.值）

3、路由钩子函数共有几种？分别是什么？参数to、from、next分别是什么意思？
(1)beforeRouteEnter(to,from,next){}（路由之前调用）
(2)beforeRouteUpdate(to,from,next){}（复用时调用）
(3)beforeRouteLeave(to,from,next){}（离开路由时调用）
①to：（route路由对象）即将要进入的目标路由对象
②from：（route路由对象）当前导航正要离开的路由
③next：（funciton函数）一定要调用该方法来resolve这个钩子

4、重定向用哪个属性？
redirect:”/路径”

5、router和route区别
this.$router‘:是路由操作对象，只写对象‘this.$route` : 路由信息对象，只读对象