前端-vue2-知识点自查 | 昕昕-未来不是梦

type

status

date

slug

summary

category

icon

password

1、什么是vue

构建用户界面的渐进式框架，采用自底向上逐层应用的设计，核心理念是：数据驱动视图，组件化开发

2、什么是mvc和mvvm

1、MVC是后端分层开发的概念,

V代表view视图层，作用：发送数据，展示数据

C代表controller调度层，作用：接收数据，响应数据，返回数据

M代表model模型层，作用：和数据库打交道，处理数据

2、MVVM是前端视图层，

V代表view视图层，作用：展示数据

VM代表viewmodel视图模型层，作用：连接模型层于视图层，承上启下作用

M代表model模型层，作用：数据的逻辑处理

3、框架和库的区别

框架提供一种完整的解决方案，对项目的侵入性较大，若需要更换框架，则整个项目需要重新架构

库提供一些小的功能，对项目的侵入性较小，如果当前库不能满足需求，则可以轻易地切换到其他库

4、插值表达式

{{}}

5、vue指令v-html和v-text的区别

相同点：都会覆盖标签内原有的内容

区别：v-html可以解析富文本，v-text不能

6、vue指令-属性绑定及简写

v-bind:

7、vue指令-事件绑定及简写

v-on:

8、vue事件修饰符

.stop 阻止事件冒泡

.capture 添加事件捕获模式

.once 只触发一次

.self 作用在自身才触发

.prevent 阻止默认事件

9、vue指令-双向数据绑定

v-model:value=””

v-model=””

10、vue指令-循环渲染

v-for=”(item,index) in list” :key=”index”

用于遍历数组对象和数字

key属性必须是数字或字符串，必须是唯一值，作用：提高重排效率，就地复用

11、vue指令-显示隐藏

v-if

v-show

12、vue指令-v-for如何遍历对象、数组、数字

对象：v-for=”(name,value,index) in obj” :key=”index”

数组：v-for=”(item,index) in list” :key=”index”

数字：v-for=”num in 5” :key=”num”

13、vue指令-v-for为什么设置key

key属性必须是数字或字符串，必须是唯一值，作用：提高重排效率，就地复用

14、vue指令-v-if和v-show的区别

v-if通过删除dom元素的方式控制元素的显示隐藏，v-show通过display:none

多次使用用v-show，少次使用用v-if

15、vue绑定class方式

数组

对象

三目运算符

数组内置对象

16、vue绑定style方式

数组

对象

函数的返回值

17、vue过滤器全局和局部声明方式及使用

全局和过滤器

声明在main.js里

私有过滤器

声明在data和methods平级

18、vue键盘修饰符使用

@keyup.键值或键码=’事件名’

19、vue键盘修饰符设置别名

20、vue自定义指令全局和局部声明方式及使用

使用

v-自定义指令

全局自定义指令声明

声明在main.js中

私有自定义指令

声明在data和methods平级

21、vue生命周期钩子函数有哪些？父子组件生命周期执行顺序？

钩子函数

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

父子组件生命周期执行顺序

父组件beforeCreate

父组件created

父组件beforeMount

子组件beforeCreate

子组件created

子组件beforeMount

子组件mounted

父组件mounted

父组件beforeUpdate

子组件beforeUpdate

子组件updated

父组件updated

父组件beforeDestroy

子组件beforeDestroy

子组件destroyed

父组件destroyed

22、vue生命周期钩子函数各阶段特点，什么作用？

beforeCreate：创建之前,data和methods的对象还没有初始化，作用：页面重定向

created：创建之后，data和methods中的数据初始化完成，第一个可以操作data和methods中的数据的生命周期作用：数据初始化，接口请求

beforeMount：虚拟dom挂载

mounted：真实的dom，第一个可以操作dom元素的生命周期

beforeUpdate：更新之前，data和页面内的数据还未保持同步，页面中的数据是旧的，data中的数据是最新的

updated：更新之后，data和页面中的数据已经保持一致

beforeDestroy：销毁之前，页面还没有真正的销毁作用：清空页面监听和定时器

destroyed：销毁之后

23、axios发送get，post请求

axios.get(’url’)

axios.post(’url’,data,配置)

25、vue中过渡动画结合第三方插件使用

npm安装Animate.css

在main.js中引入

定义transition及属性

26、vue中过渡动画中钩子函数的使用

27、vue中如何设置v-for列表动画

28、vue中如何父组件给子组件传值

1、在父组件的子标签中自定义一个属性

2、在子组件中使用props接收参数

29、vue中如何子组件给父组件传值

1、在父组件的子标签中自定义一个方法，方法中的参数就是子组件传递过来的数据

2、在子组件中使用this.$emit(’自定义方法名’,传递到数据)方法进行传递

30、vue中如何使用插槽，插槽的区别

默认插槽

在子组件中写slot标签

在父组件中用template标签替换

具名插槽

在子组件中写slot标签，里面加上name属性

在父组件中用template标签替换，里面加上v-slot:插槽名字，或者#插槽名字

作用域插槽

可以获取子组件中的数据

在子组件中写slot标签，里面加上name属性

在父组件中用template标签替换，里面加上#插槽名字=’scope’ scope是子组件传递的数据

31、前端路由和后端路由的区别

后端路由

普通网站来说，每一个Url都对应不同的静态资源

前端路由

对于单页面应用程序来说，通过切换hash(#)；来实现页面之间的切换

32、vue中如何使用路由

1. 创建路由new VueRouter(),接受的参数是一个对象 2. 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性 3. path属性是url的地址,component属性就是显示的组件（传组件的对象）

使用

使用 router-link 进行页面间的跳转

使用 router-view 设置所需跳转的页面在哪里显示

33、路由跳转两种方式，声明式，函数式

声明式

函数式

34、路由传参两种方式，声明式，函数式

声明式

函数式

35、路由嵌套

在父路由对象里面添加children数组，里面是路由对象，path里面路径不加/ 在父组件中加router-view标签进行显示

36、路由高亮

router-link-active：默认样式

linkActiveClass:'自定义的类名’

37、route和router的区别？

$router : 是路由操作对象，只写对象

$route : 路由信息对象，只读对象

38、路由重定向

redirect

39、ref的使用

获取DOM元素和组件在DOM元素和组件标签中加上ref=’名字’ 通过this.$refs.名字获取

40、属性计算，属性监听的区别

计算属性：结果会被缓存，除非依赖的响应式属性变化才会重新计算监听属性：只有当监听的属性发生变化时，触发相应的监听函数

41、vue-cli使用，如何创建和启动项目，项目文件结构

创建：vue create 项目名

启动：npm run serve

文件结构：

node_modules 项目依赖文件

public 公共文件

src 项目源代码

assets 静态文件

components 项目小组件

router 路由

store vuex

views项目大组件

App.vue 全局组件

main.js 项目入口文件

.gitignore git上传时忽略的文件

babel.config.js 降级

jsconfig.json

package.json 项目依赖

package-lock.json

README.md 项目阅读文件

vue.config.js 项目配置

42、使用第三方ui组件

43、覆盖ui组件样式

/deep/

:deep()

44、什么是vuex

应用程序开发的状态管理模式库，采用集中式存储管理所有组件的状态

45、为什么用vuex，解决了什么问题

进行统一的状态管理，解决不同组件共享数据的问题不同的视图需要同一状态的问题

46、vuex的核心模块

state

存放数据的地方，相当于组件中的data

this.$store.state()

getters

对state中的数据进行初加工，类似计算属性，产生新的数据，不能修改state中的数据

this.$store.getters()

mutations

修改state中的数据的唯一方法，必须是同步方法

this.$store.commit()

actions

修改state中的数据，必须通过调⽤mutations⾥⾯的⽅法，可以异步操作

this.$store.dispatch()

modules

模块化

47、vuex状态刷新重置问题如何解决

持久化存储：

安装

引入

使用

48、什么是路由守卫，如何配置

什么是导航守卫

通过跳转或取消的方式守卫导航

全局

全局前置守卫

beforeEach((to,from,next)⇒{

//next必须严格执行一次

})

全局后置

afterEach

独享

beforeEnter

组件级

beforeRouterEnter beforeRouterUpdate beforeRouterLeave

49、什么是同源策略，什么是跨域

同源策略：浏览器的一种安全协议，只要协议，主机，端口号有一个不一致就会引起同源策略，从而引起跨域

50、如何解决跨域

解决跨域：

后台开放（不安全）利用script标签中src属性不受同源策略的影响（后端配合）配置代理

51、代理如何配置，各个配置项什么意思

52、如何封装axios，好处是什么

如何封装

好处

简化代码提高代码的可维护性增加代码的复用性方便统一处理错误方便处理请求配置

昕昕丶未来不是梦