1. vue slot
答:简单来说,假如父组件需要在子组件内放一些
DOM
,那么这些
DOM
是显示、不显示、
在哪个地方显示、如何显示,就是
slot
分发负责的活。
2.
你们
vue
项目是打包了一个
js
文件,一个
css
文件,还是有多个文件?
答:根据
vue-cli
脚手架规范,一个
js
文件,一个
CSS
文件。
3.Vue
里面
router-link
在电脑上有用,在安卓上没反应怎么解决?
答:
Vue
路由在
Android
机上有问题,
babel
问题,安装
babel polypill
插件解决。
4.Vue2
中注册在
router-link
上事件无效解决方法
答:使用
@click.native
。原因:
router-link
会阻止
click
事件,
.native
指直接监听一
个原生事件。
5.RouterLink
在
IE
和
Firefox
中不起作用(路由不跳转)的问题
答
:
方法一:只用
a
标签,不适用
button
标签;方法二:使用
button
标签和
Router.navigate
方法
6.axios
的特点有哪些
答:
从浏览器中创建
XMLHttpRequests
;
node.js
创建
http
请求;
支持
Promise API
;
拦截请求和响应;
转换请求数据和响应数据;
取消请求;
自动换成
json
。
axios
中的发送字段的参数是
data
跟
params
两个,两者的区别在于
params
是跟请求地址
一起发送的,
data
的作为一个请求体进行发送
params
一般适用于
get
请求,
data
一般适用于
post put
请求。
7.
请说下封装
vue
组件的过程?
答:
1.
建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑。
(os
:思考
1
小时,
码码
10
分钟,程序猿的准则。
)
2.
准备好组件的数据输入。即分析好逻辑,定好
props
里面的数据、类型。
3.
准备好组件的数据输出。即根据组件逻辑,做好要暴露出来的方法。
4.
封装完毕了,直接调用即可
8.params
和
query
的区别
答:用法:
query
要用
path
来引入,
params
要用
name
来引入,接收参数都是类似的,分
别是
this.$route.query.name
和
this.$route.params.name
。
url
地址显示:
query
更加类似于我们
ajax
中
get
传参,
params
则类似于
post
,说的再简单一点,前者在
浏览器地址栏中显示参数,后者则不显示
注意点:
query
刷新不会丢失
query
里面的数据
params
刷新 会 丢失
params
里面的数据。
9.vue
初始化页面闪动问题
答:使用
vue
开发时,在
vue
初始化之前,由于
div
是不归
vue
管的,所以我们写的代
码在还没有解析的情况下会容易出现花屏现象,看到类似于
{{message}}
的字样,虽然
一般情况下这个时间很短暂,但是我们还是有必要让解决这个问题的。首先:在
css
里加上
[v-cloak] { display: none; }
。如果没有彻底解决问题,则在根元素加上
style="display: none;" :style="{display: block }"
10.vue
更新数组时触发视图更新的方法
答
:push()
;
pop()
;
shift()
;
unshift()
;
splice()
;
sort()
;
reverse()
11.vue
常用的
UI
组件库
答:
Mint UI
,
element
,
VUX
12.vue
修改打包后静态资源路径的修改
答:
cli2
版本:将
config/index.js
里的
assetsPublicPath
的值改为
./
。
build
:
{
// ...
assetsPublicPath
:
.
/
,
// ...
}
复制
cli3
版本:在根目录下新建
vue.config.js
文件,然后加上以下内容:(如果已经有此文件
就直接修改)
module.exports
=
{
publicPath
:
,
//
相对于
HTML
页面(目录相同)
}
复制
生命周期函数面试题篇
### 42.
什么是
vue
生命周期?有什么作用?
答:每个
Vue
实例在被创建时都要经过一系列的初始化过程
——
例如,需要设置数据监听、
编译模板、将实例挂载到
DOM
并在数据变化时更新
DOM
等。同时在这个过程中也会运
行一些叫做 生命周期钩子 的函数,这给了用户在不同阶段添加自己的代码的机会。(
ps
:
生命周期钩子就是生命周期函数)例如,如果要通过某些插件操作
DOM
节点,如想在页面
渲染完后弹出广告窗, 那我们最早可在
mounted
中进行。
13.
第一次页面加载会触发哪几个钩子?
答:
beforeCreate
,
created
,
beforeMount
,
mounted
14.
简述每个周期具体适合哪些场景
答:
beforeCreate
:
在
new
一个
vue
实例后,只有一些默认的生命周期钩子和默认事件,其
他的东西都还没创建。在
beforeCreate
生命周期执行的时候,
data
和
methods
中的数据都
还没有初始化。不能在这个阶段使用
data
中的数据和
methods
中的方法
create
:
data
和
methods
都已经被初始化好了,如果要调用
methods
中的方法,或者
操作
data
中的数据,最早可以在这个阶段中操作
beforeMount
:
执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载
到页面中,此时,页面还是旧的
mounted
:
执行到这个钩子的时候,就表示
Vue
实例已经初始化完成了。此时组件脱离了
创建阶段,进入到了运行阶段。如果我们想要通过插件操作页面上的
DOM
节点,最早可以
在和这个阶段中进行
beforeUpdate
:
当执行这个钩子时,页面中的显示的数据还是旧的,
data
中的数据是更
新后的, 页面还没有和最新的数据保持同步
updated
:
页面显示的数据和
data
中的数据已经保持同步了,都是最新的
beforeDestory
:
Vue
实例从运行阶段进入到了销毁阶段,这个时候上所有的
data
和
methods
, 指令, 过滤器
……
都是处于可用状态。还没有真正被销毁
destroyed
:
这个时候上所有的
data
和
methods
, 指令, 过滤器
……
都是处于不可
用状态。组件已经被销毁了。
15.created
和
mounted
的区别
答:
created:
在模板渲染成
html
前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:
在模板渲染成
html
后调用,通常是初始化页面完成后,再对
html
的
dom
节点进
行一些需要的操作。
16.vue
获取数据在哪个周期函数
答:一般
created/beforeMount/mounted
皆可
.
比如如果你要操作
DOM ,
那肯定
mounted
时候才能操作
.
17.
请详细说下你对
vue
生命周期的理解?
答:总共分为
8
个阶段创建前
/
后,载入前
/
后,更新前
/
后,销毁前
/
后。
创建前
/
后:
在
beforeCreated
阶段,
vue
实例的挂载元素
$el
和
数据对象
data
都为
undefined
,还未初始化。在
created
阶段,
vue
实例的数据对象
data
有了,
$el
还没有。
载入前
/
后:
在
beforeMount
阶段,
vue
实例的
$el
和
data
都初始化了,但还是挂载之
前为虚拟的
dom
节点,
data.message
还未替换。在
mounted
阶段,
vue
实例挂载完成,
data.message
成功渲染。
更新前
/
后:
当
data
变化时,会触发
beforeUpdate
和
updated
方法。
销毁前
/
后:
在执行
destroy
方法后,对
data
的改变不会再触发周期函数,说明此时
vue
实例已经解除了事件监听以及和
dom
的绑定,但是
dom
结构依然存在。
vue
路由面试题篇
18.mvvm
框架是什么?
答:
vue
是实现了双向数据绑定的
mvvm
框架,当视图改变更新模型层,当模型层改变更新
视图层。在
vue
中,使用了双向绑定技术,就是
View
的变化能实时让
Model
发生变化,而
Model
的变化也能实时更新到
View
。
19.vue-router
是什么
?
它有哪些组件
答:
vue
用来写路由一个插件。
router-link
、
router-view
20.active-class
是哪个组件的属性?
答:
vue-router
模块的
router-link
组件。
children
数组来定义子路由
21.
怎么定义
vue-router
的动态路由
?
怎么获取传过来的值?
答:在
router
目录下的
index.js
文件中,对
path
属性加上
/:id
。使用
router
对象的
params.id
。
22.vue-router
有哪几种导航钩子
?
答:三种,
第一种:
是全局导航钩子:
router.beforeEach(to,from,next)
,作用:跳转前进行判断拦截。
第二种:
组件内的钩子
第三种:
单独路由独享组件
23. `$route`
和
`$router`
的区别
答:
$router
是
VueRouter
的实例,在
script
标签中想要导航到不同的
URL,
使用
$router.push
方法。返回上一个历史
history
用
$router.to(-1)
$route
为当前
router
跳转对象。里面可以获取当前路由的
name,path,query,parmas
等。
24.vue-router
的两种模式
答
:
hash
模式:
即地址栏
URL
中的
#
符号;
history
模式:
window.history
对象打印出来可以看到里边提供的方法和记录长度。利用了
HTML5 History Interface
中新增的
pushState()
和
replaceState()
方法。(需要特定浏览
器支持)。
25.vue-router
实现路由懒加载( 动态加载路由 )
答
:
三种方式
第一种:
vue
异步组件技术
====
异步加载,
vue-router
配置路由
,
使用
vue
的异步组件
技术
,
可以实现按需加载
.
但是
,
这种情况下一个组件生成一个
js
文件。
第二种:
路由懒加载
(
使用
import)
。
第三种:
webpack
提供的
require.ensure()
,
vue-router
配置路由,使用
webpack
的
require.ensure
技术,也可以实现按需加载。这种情况下,多个路由指定相同的
chunkName
,
会合并打包成一个
js
文件。
vuex
常见面试题篇
26.vuex
是什么?怎么使用?哪种功能场景使用它?
答:
vue
框架中状态管理。在
main.js
引入
store
,注入。
新建了一个目录
store.js
,
….. export
。
场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车
27.vuex
有哪几种属性?
答:有五种,分别是
State
、
Getter
、
Mutation
、
Action
、
Module
state =>
基本数据
(
数据源存放地
)
getters =>
从基本数据派生出来的数据
mutations =>
提交更改数据的方法,同步!
actions =>
像一个装饰器,包裹
mutations
,使之可以异步。
modules =>
模块化
Vuex
28.Vue.js
中
ajax
请求代码应该写在组件的
methods
中还是
vuex
的
actions
中?
答:如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入
vuex
的
state
里。
如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入
action
里,方
便复用。
# 29. **说⼀下数组新增的⽅法有哪些**?**这些⽅法分别是什么意思**?(**必问**)
## Array.from⽅法 将类数组转化为真正的数组
## Array.of⽅法 将数值转化为数组
## copyWithin() **⽅法是将指定位置的成员复制到其他位置(会覆盖原有成员)**
## find⽅法和findindex⽅法 查找符合条件的元素。 查找符合条件元素的下表
## includes⽅法可以查看表个数组是否包含给定的值
## flat⽅法将多维数组转化为1维数组或者指定维度的数组
## 遍历的数组的⽅法:
## forEach 类似于for循环,主要是⽤来遍历数组
## map⽅法 主要作⽤是映射⼀个新的数组,可以对数组进⾏遍历
## filter⽅法 主要作⽤返回⼀个符合条件新的数据,同样也有遍历数组的作⽤
# **30.说⼀下**map**⽅法、**forEach**⽅法、**filter**⽅法的作⽤以及他们之间的区别**?(90%)
## forEach() **⽅法**: **循环原来的数组**
## map() **⽅法: 循环原数组并映射⼀个新数组出来**
## filter() **⽅法: 过滤不需要的数组元素**
# 31. **说⼀下**for in **与**for of**的区别**?(80%)
## For in可以遍历对象 ⽽ for of遍历对象会报错
## for in 遍历数组得到的数组的下表 ⽽for of遍历得到的时候数组⾥⾯的每⼀个元素
# 32. **说⼀下数组去重的⽅法有哪些**?es6**如何实现数组去重**?(90%)
## indexof
## 双层for循环
## set⽅法
# 33. **如何将多个数组合并成为⼀个数组**?(70%)
## es5 :
## concat
## for循环
## Es6:
## 扩展运算符
## map⽅法
# **36.说⼀下**forEach**、**map**、**filter**、**reduce**、**some**、**every**等⽅法的作⽤**?(50%)
## reduce 遍历数据求和。
## some 遍历数组每⼀项,有⼀项返回true,则停⽌遍历,结果返回true。不改变原数组
## 遍历数组每⼀项,每⼀项返回true,则最终结果为true。当任何⼀项返回false时,停⽌遍历,返回false。不改变原数组
## forEach() **⽅法**: **循环原来的数组**
## map() **⽅法: 循环原数组并映射⼀个新数组出来**
## filter() **⽅法: 过滤不需要的数组元素**
# 37. **实现数组去重**?**最少写出三种⽅法**?(70%)indexof
## set
## new Set(arr)
## 双层for循
# 38.**请说出实现冒泡排序的思路**?(40%)
## \39. ⽐较相邻的两个元素,如果前⼀个⽐后⼀个⼤,则交换位置。 2、⽐较完第⼀轮的时候,最后⼀个元素是最⼤的元素。 3、这时候最后⼀个元素是最⼤的,所以最后⼀个元素就不需要参与⽐较⼤⼩。
## \40. 双层for循环
## \41. 外层 条件判断使⽤数组⻓度 - 1
## \42. 内层是 - 1 - i
## \43. 相邻元素进⾏⽐较 ,然后再进⾏两两交换
# **44.判断数据类型的⽅式有哪些**?**每⼀个都有什么不同**?(50%)
## typeof 检测基本数据类型
## instanceof 检测引⽤数据类型,但是⽆法确定哪⼀个引⽤数据的实例
## Object.prototype.toString.call 检测引⽤数据类型
## isArray 检测是不是⼀个数组
# **45.如何改变函数内部的**this**指针的指向**?(60%)
## call apply bind
## 区别?
## call和apply改变了函数的this上下⽂后便执⾏该函数,⽽bind则是返回改变了上下⽂后的⼀个函数。
## 他们俩之间的差别在于参数的区别,call和apply的第⼀个参数都是要改变上下⽂的对象,⽽call从第⼆个参数开始以参数列表
## 的形式展现,apply则是把除了改变上下⽂对象的参数放在⼀个数组⾥⾯作为它的第⼆个参数。
# **46.说⼀下数组常⽤的⽅法有哪些**?(80%)
## push
## pop
## shi!
## unshi!
## splice
## concat
## sort
## substring
## substr
## slice
## reserve
# 47. js**的数据类型有哪些**?(30%)6中 分别基本数据类型 和 引⽤数据类型
## 基本数据类型: number string boolean undefined null
## 引⽤数据类型: object object 和 array function
## 用css画一个三角形
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/* css3绘制三角形 */
.triangle{
width: 0px; /*设置宽高为0,所以div的内容为空,从才能形成三角形尖角*/
height: 0px;
border-bottom: 200px solid #00a3af;
border-left: 200px solid transparent; /*transparent 表示透明*/
border-right: 200px solid transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>