1.为什么要选vue?与其他框架对比的优势和劣势?
vue是基于数据驱动的框架,不需要操作DOM数结构,只需关注视图的数据渲染。
Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API;Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。
vue两大特点:响应式编程、组件化
vue的优势:轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快
Vue特点(6个):
- 渐进式的设计理念(基于数据驱动的)
- 轻量级的框架-压缩版92kb
- 双向数据绑定(MVVM架构)
- 指令系统 v-xxx 搞定一切
- 单页面应用SPA 组件化 scoped
- 虚拟DOM 借鉴react的概念
2.mvvm框架是什么?它和其他框架 (jQuery) 的区别是什么?哪些场景最适合?
- M: model 指的就是数据
- V:view 视图
- VM: view-model
View和Model之间没有直接的联系,而是通过ViewModel进行交互,Model和ViewModel之间的数据交互是双向的;ViewModel保证视图和数据的一致性; 轻量高效的开发。
vue数据驱动,通过数据来显示视图层而不是节点操作。
场景:数据操作比较多的场景,更加便捷
3.vue等单页应用及其优缺点?
优点
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统。
数据驱动
组件化
轻量
简洁
高效
模块友好
页面切换快
缺点
不支持低版本的浏览器,最低只支持到IE9;
不利于SEO的优化(如果要支持SEO,建议通过服务端来进行渲染组件);
首屏加载耗时相对长一些,会有短暂的白屏现象;
不可以使用浏览器的导航按钮需要自行实现前进、后退。
4. 说出至少4种 vue 当中的指令和它的用法?
v-text、v-html:用来展示文本数据,展示包含HTML结构的数据;
v-if:根据if条件的布尔值,决定是否展示DOM元素;
v-else-if:多重if条件嵌套选择;
v-show:判断条件 元素的display 控制 元素是否显示;
v-for(列表渲染)
v-on(绑定事件)
v-bind 动态属性:
5.v-if 和 v-show区别。
答:1、v-if是动态地向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制元素的显示或隐藏;
2、v-if是真实的条件渲染;v-show只是简单的基于css切换;
3、v-if有更高的切换消耗,是惰性;v-show有更高的初始渲染消耗。
6. 说说vue 的双向绑定函数的原理。
view视图通过与viewModle层进行数据交互,将数据更改到model层中,然后将model层的数据通过viewModel来渲染到view层视图上展示;
7. 常用的修饰符有哪些?分别说明它的作用。
1.表单修饰
1. .number绑定值强制转换为 number 类型;
2. .trim去除前后部分空格修饰符;
3. .lazy赋值触发事件(oninput) 变成为 onchange
2.事件修饰符
1. .stop: 阻止事件冒泡;相当于ev.stopPropagation()
2. .prevent: 阻止默认事件, 默认表单提交事件;相当于ev.preventDefault();
3. .capture : 捕获阶段触发;
4. .self:只响应 事件源为自己的事件;
5. .once:只触发 一次;
3.键盘修饰符
1. 键盘的别名:按下对应的键名触发;
2. 键盘的键值:按下对应的数字键值时触发;
4.鼠标修饰符
1. .left:鼠标左键;
2. .right:鼠标右键;
3. .middle:鼠标中间滚轮;
8. 什么是 vue 的生命周期?
生命周期:Vue实例在被创建之前都要有一个初始化过程,有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染、更新、卸载等一系列过程,被称为Vue的生命周期。
9. 解析vue 生命周期中各个钩子函数在什么场景下执行。
创建期: 一个周期执行一次
beforeCreate:创建之前 el,data,methods都为undefined
created:创建完成,data,methods初始化完成,el为undefined,数据添加完毕,还没有编译模板挂载beforeMount:挂载之前,el为挂载标签,但是{{}}还在
mounted:挂载完成,页面完成,数据请求,操作DOM
更新期: 数据变化 就会重新渲染DOM
beforeUpdate:更新之前
updated:更新完成
销毁期:中止数据请求,关闭定时器
beforeDestroy:销毁之前
destroyed:销毁完成
10.说明 watch 和 computed 的作用和区别。
相同点:都是以Vue的依赖机制为基础的,都是希望在依赖数据发生变化时候,被依赖的数据根据预先定义好的函数,发生“自动”的变化更新;
不同点:watch擅长处理的场景:一个数据影响多个数据; computed擅长处理的场景:一个数据受多个数据影响;
虽然计算属性在大多数情况下更适合,但有时也需要一个自定义的侦听器,当需要数据变化时候执行异步或开销大的操作时候,通过侦听器最好;
总结:
当在模板中使用了复杂逻辑的表达式时候,应当使用计算属性;
虽然methods中定义的方法也能实现同样的效果,但是因为计算属性可以基于它们依赖进行缓存,所以选择计算属性会比方法methods更加高效;
当需要在数据变化时执行异步或者开销大的操作时,可以使用watch;
11. 说明 watch 和 method 的作用和区别。
methods里面定义的函数,是需要主动调用的,而watch相关的函数,会自动调用,完成我们希望完成的作用;methods里面定义的是函数,你显然需要像"fuc()"这样去调用它(假设函数为fuc);watch:类似于监听机制+事件机制:
12. vue中过滤器如何定义和使用?
过滤器的作用: 对数据进行一些加工处理,比如 数字保留几位小数 。
局部定义的过滤器:filter**s**:{过滤器名称 : function(参数){... return 返回处理结果; }} 对象的形式
全局注册过滤器:Vue.**filter**('过滤器名称',funciton(参数){... return 处理结果}); 参数的形式
new Vue({
el:"#introduce",
data:{
msg:"hello"
},
// 局部注册的过滤,只在当前实例起作用
filters:{
// 属性的名称就是过滤器的名称
// 函数 :调用过滤器时执行的函数
// txt : 被过滤的数据
// ind : 过滤器接受的参数
UpFilter(txt,ind){
// console.log(txt,ind)
// return 就是 过滤后的数据
return txt.slice(0,ind)+txt.charAt(ind).toUpperCase()+txt.slice(ind+1);
}
}
});
// ====================================
// 全局注册的 过滤器,所有实例都可以使用
Vue.filter("UpFilter", function (txt, ind) {
// console.log(txt,ind)
// return 就是 过滤后的数据
return txt.slice(0, ind) + txt.charAt(ind).toUpperCase() + txt.slice(ind + 1);
})
new Vue({
el: "#introduce",
data: {
msg: "hello"
},
});
// 使用
{{数据|调用的过滤器函数名称}}
13. 使用计算属性实现日期的格式化,只显示年月日。
<div id="app">
<p>{{date}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
},
computed: {
date() {
// 获取年月日
let date = new Date();
let month = date.getMonth() + 1;
date = date.getFullYear() + '年' + month + '月' + date.getDate() + '日';
return date;
}
}
})
</script>
14. 过渡动画在什么场景下使用?有哪几个内置的类名。
1. 条件渲染 (使用 v-if)
2. 条件展示 (使用 v-show)
3. 动态组件 (is来切换显示)
4. 组件根节点
6个:
1)v-enter 定义进入过渡的开始状态
2)v-enter-active 定义进入过渡生效时的状态
3)v-enter-to 2.1.8版及以上 定义进入过渡的结束状态
4)v-leave 定义离开过渡的开始状态
5)v-leave-active 定义离开过渡生效时的状态
6)v-leave-to 2.1.8版及以上 定义离开过渡的结束状态
15. 列举出在vue 中组件的定义方式有哪几种?
两种方式:
1.全局注册:
Vue.component("组件名",{配置项});
2.局部注册:
components:{"组件名",{配置项}}
配置项:{template:`html标签内容`/ template标签的id名称}
16. 组件中的 data 为什么必须是函数?
如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。
周考测试答案:to
组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。
17. Vue.cli 中怎样定义和使用组件?
定义:
<template>
...
</template>
<script>
export default {
};
</script>
</style>
使用:
<TodoList>
</TodoList>
引入:import TodoList from "./components/TodoList";
注册:
export default {
components: {
TodoList,
},
}
18. 请说出vue.cli 项目中src 目录每个文件夹和文件的用法?
src 文件夹:我们将要写的代码放在这里面,打包上线时会进行编译、压缩等
- assets 文件夹:资源目录
- components 文件夹:组件目录
- App.vue 文件:根组件
- main.js 文件:页面入口JS文件
19. Vue 中组件之间如何传值,有哪几种方式?
子组件通过props属性来接收父组件传递的值;
父组件使用子组件的值,通过自定义事件来传递函数,在子组件中通过$emit();函数来触发执行;
通过一个公共的空Vue实例的载体js文件来传递两者之间的数据$emit()发送数据触发函数,$on()接收数据函数;
1.父组件向子组件传值
2.子向父组件传值
3.非父子组件(兄弟)之间传值
20. Vue中的ref 是什么?如何使用ref ?
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是DOM元素;如果用在子组件上,引用就指向组件实例。
- ref加在普通的元素上,用this.$refs.自定义名称,获取到的是DOM元素;
- 利用 v-for 和 ref 获取一组数组或者DOM节点;
- ref加在子组件上,用this.$refs.自定义名称,获取到的是组件实例,可以获取或使用组件的所有数据和方法;
21. Vue中如何使用jQuery?
三种方式:
1.通过外部链接引用jQuery文件或本地下载的jQuery文件;
2.使用npm安装依赖包,然后在组件中引入jQuery包; import $ from 'jquery';
3.将jquery包放入vue实例上,然后全局引用; 项目中 可以在main.js文件中绑定; Vue.prototype.$=$;
22. 说说你对slot的理解有多少?Slot使用场景有哪些?
匿名插槽 ———
具名插槽 ———
作用域插槽 ———
slot 用于决定将所携带的内容,插入到指定的某个位置,从而是模块分块,具有模块化的特质和更大的重用性;
23. Vue的is 这个属性你有用过吗?主要使用在哪些方面。
1.改变默认标签约束:众所周知,有些HTML元素,诸如 <ul>、<ol>、<table>和<select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>、<tr> 和 <option>,只能出现在其它某些特定的元素内部,正是因为html模板的限制,于是就诞生了is。
2.动态组件:如果要在Vue中展示不同组件的内容,在没有学到路由的时候,我们可以通过is特性来实现组件的动态切换。
<!-- 动态组件 ,is 指明渲染的组件的名称-->
<div :is="com"></div>
24. Vue-router是什么?有哪些组件?
router-link router-view
router-link是路由导航组件,会生成a标签,需要设置to属性;
router-view是路由出口,会根据浏览器地址进行匹配路由规则,并将匹配到的路由规则对应的组件展示在router-view处。
25. Active-class是哪个组件的属性?它的作用是什么?
active-class是vue-router模块的router-link组件中的属性,它作用于点击切换组件显示的样式;
26. 怎么定义 vue-router 的动态路由?怎么获取传过来的值。
配置路由格式:/router/:id
可以通过$route.query.参数名 获取你说传递的值
27. Vue-router 有哪几种导航钩子。
导航钩子:
beforeEach,beforeResolve,afterEach,
beforeEnter,
beforeRouterEnter,beforeRouterLeave,beforeRouterUpdate,
导航过程:
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。
28. $route 和 $router 的区别是什么。
$route路由信息; $router用来做路由跳转
route是当前跳转路由的局部对象,包含了当前 URL 解析得到的信息。获取到相对应的name,param,path,query。路由信息对象,可读。
router是VueRouter的一个实例,是一个全局的路由对象,有很多对象和属性。路由操作对象,可写。
29. Vuex是什么?怎么使用?那种功能场景使用它。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
[每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。]
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
});
只用来读取的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中; getters相当于store的计算属性;
场景有:开发大型单页应用,单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车
30. Vuex的store 有几个属性值。
5个。分别是State , Getter , Mutation , Action , Module。
state
[Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例,但单一状态树和模块化并不冲突。]state是存放的数据状态,不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据, 即修改state的值。this.$store.commit('函数名',...)来触发事件;
getters
类似vue的计算属性,主要用来过滤一些数据。
action
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。
modules
项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
vue的优点是什么?
1.低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
2.可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
3.独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
4.可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。
vue中如何同时获取事件传入的参数和事件对象?
<button @click="show(11,$events)"></button>
methods:{
show(x,ev){
// x就是参数
// ev就是事件对象
}
}
组件之间如何通信
父组件向子组件通信:
在子组件的标签上定义一个变量,:变量=‘传的值’,在子级中使用props接收变量
子组件向父组件通信:
在子组件中写一个事件,事件中使用this.$emit(‘自定义事件名’,’数据’);在父级中的子标签上使用@自定义事件 = ‘父级事件’来接收
非父子,可以通过EventBus vuex 本地存储
v-model是什么?怎么使用?vue中标签怎么绑定事件?
可以实现表单元素的双向绑定,指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件:<input @click=doLog() />
vue中动态样式绑定class的方式都有哪些?
对象方法:
:class="{ 'active': isActive }"
:class="{'active':isActive==-1}"
或者
:class="{'active':isActive==index}"
绑定并判断多个
:class="{ 'active': isActive, 'sort': isSort }"
第二种(放在data里面)
:class="classObject"
data() {
return {
classObject:{ active: true, sort:false }
}
}
数组方法
:class="[isActive,isSort]"
data() {
return{
isActive:'active',
isSort:'sort'
}
}
:class="[isActive?'active':'']"
:class="[isActive==1?'active':'']"
请至少列出4个vue基本指令,并简要说明其作用。
v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model)
v-for 格式: v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index
v-show 显示内容 (同angular中的ng-show)
v-hide 隐藏内容(同angular中的ng-hide)
v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false)
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
v-bind 动态绑定 作用: 及时对页面的数据进行更改
v-on:click 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods里面
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"'
什么是vue的计算属性。
在模板中放入太多的逻辑会让模板过重且难以维护,在需要对数据进行复杂处理,且可能多次使用的情况下,尽量采取计算属性的方式。
好处:①使得数据处理结构清晰;②依赖于数据,数据更新,处理结果自动更新;③计算属性内部this指向vm实例;④在template调用时,直接写计算属性名即可;⑤常用的是getter方法,获取数据,也可以使用set方法改变数据;⑥相较于methods,不管依赖的数据变不变,methods都会重新计算,但是依赖数据不变的时候computed从缓存中获取,不会重新计算。
vue中组件的作用是什么,如何定义和使用组件。
组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用,那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。
定义组件有两种方式:
(1)全局方式
直接使用Vue.component()创建的组件,所有的Vue实例都可以使用。
(2)局部方式
三部曲1.创建这个组件;2.注册这个组件;3.使用这个组件;
vue实例有哪些常见的配置选项,分别用来干嘛。
el 挂载的节点
data 数据
methods 事件方法
computed 计算属性
watch 监听器
components 局部组件
filters 过滤器
directives 自定义指令
生命周期钩子函数
vue中key的作用
在v-for时使用,标识组件的唯一性,更好的区分组件,高效的更新虚拟DOM
谈谈你对vue生命周期的理解。以及每个阶段是什么?
Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,
称之为 Vue 的生命周期。生命周期有:beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed
Vue如何注册一个组件,需要注意哪些点?
全局注册 Vue.component('组件名',{配置对象})
局部注册:
components:{
组件名:{ 配置对象 }
}
注意点:
组件名注意驼峰命名小坑,不要取html有的标签名;
data是一个函数,且必须返回一个对象
template 模板 只可以有一个根标签,且 可以简化,通过 选择器绑定body里面的template模板
vue-router基本使用步骤。
// 第1步:引入vue.js 再引入vue-router.js、 vue-router需要引入在vue之后
<script src="vue.js"></script>
<script src="vue-router.js"></script>
// 第2步:设置路由组件
let 组件配置变量 ={
template:"#模板id",
data(){
return{}
}
...
}
// 第3步:建立映射关系
let routes = [
{
path:"/地址",
component:组件配置变量
},
{
path:"/地址/:id", // 动态路由
component:组件配置变量
},
{
path:"/地址",
components:{
default:组件配置变量 // <router-view name="default"/>
视图的名称:组件配置变量 // <router-view name="视图名称"/>
}
},
{
path:"/地址", // 访问地址的时候回去访问地址2
component:组件配置变量,
redirect:"/地址2"
},
{
path:"/地址",
component:组件配置变量A,
children:[
{
path:"地址2",
// 访问 /地址/地址2
//就渲染 组件配置变量 会渲染在组件配置变量A模板里面router-view里面
component:组件配置变量
}
]
}
]
// 第4步:实例化路由对象
let router = new VueRouter({
// routes:routes // routes 简写
routes,
linkActiveClass:"active",
mode:"hash/history"
})
// 第5步:挂载到Vue实例
new Vue({
el:"",
data:{},
// router:router // 简写
router
})
// 第6步:书写router-view 视图出口
<div id="app">
<router-view/>
</div>
// 第7步:使用router-link 进行跳转
<router-link to="/地址">
// 酌情给分
路由同组件跳转,组件将不会更新,如何解决这个问题。
- 方法1: 利用watch监听$route的变化
- 方法2: 利用路由局部钩子 beforeRouteUpdate 只要路由更新就调用
请写出vue-router中的组件,并说明他们的作用。
router-link router-view
router-link是路由导航组件,会生成a标签,需要设置to属性;
router-view是路由出口,会根据浏览器地址进行匹配路由规则,并将匹配到的路由规则对应的组件展示在router-view处。
如何定义vue-router的动态路由,怎么获取传递过来的参数。
path:"/foodId/:id"
获取:this.$route.params.id
Vue的路由实现。hash模式和history模式的区别。
区别:
hash模式:
1.采用的是window.onhashchange事件实现。
2.可以实现前进 后退 刷新。
3.比如这个URL:http://www.abc.com/#/hello, hash 的值为#/hello。
它的特点在于:hash 虽然出现URL中,但不会被包含在HTTP请求中,
对后端完全没有影响,因此改变hash不会重新加载页面
history模式:
1.采用的是利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。
2.可以前进、后退,但是刷新有可能会出现404的报错
3.前端的url必须和实际向后端发起请求的url 一致,如http://www.abc.com/book/id 。
如果后端缺少对/book/id 的路由处理,将返回404错误。
如何实现路由懒加载
const Index = () => import('../components/index')
Vue有哪些守卫?
1.全局守卫
router.beforeEach((to,from,next)=>{})
router.afterEach((to,from)=>{})
2.路由独享守卫
beforeEnter(to,from,next){ }
3.组件内部守卫 movie.vue
beforeRouteEnter(to,from,next){
//不能使用this
},
beforeRouteUpdate(to,from,next){},
beforeRouteLeave(to,from,next){}
vuex有哪些模块,并说明它们的作用。
1. state:vuex的基本数据,用来存储变量
2. getter:从基本数据(state)派生的数据,相当于state的计算属性
3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
4. action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
vuex和本地储存的区别。
1.vuex数据刷新就没有了,本地存储还在
2.vuex中的数据可以实时渲染,本地存储不行
mutations和actions的区别。
mutations是同步的,直接修改state,仓库通过commit调用;
actions可以处理异步,不能修改state,仓库通过dispatch调用
Vue中哪些方式可以实现页面之间传参,且获取到值。
1、search传参
<router-link to="/地址?属性名=属性值"></router-link>
this.$route.query.属性名
2、动态路由
path:"/地址/变量名"
<router-link to="/地址/数据值"></router-link>
this.$route.params.变量名
3、本地存储
setItem() getItem()
组件中is可以做什么?
1.解决标签固定搭配问题;2.实现动态组件