$nextTick 的含义
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。
vue 组件中的data为什么必须是一个函数
data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝
assets 和static 目录的区别
一般在 static 里放一些类库的文件,绝对路径直接引用,assets 里放属于项目的资源文件。相对路径。会被 webpack 打包进代码
vue常用的修饰符含义
.stop:阻止事件冒泡
.prevent: 阻止默认事件
.capture: 触发事件捕获
.self:当事件在该元素本身触发回调
.once: 只执行一次
vue和jQuery的区别
jquery侧重样式操作,动画效果等
Vue的数据与视图分离,以数据驱动视图(只关心数据变化,DOM操作被封装
delete 和Vue.delete删除数组的区别
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete直接删除了数组 改变了数组的键值。
Vue-router跳转和location.href有什么区别
ue-router使用pushState进行路由更新,静态跳转,页面不会重新加载;location.href会触发浏览器,页面重新加载一次
vue slot的作用
Vue2.6 中把普通插槽和作用域插槽给合并了
插槽就是一个返回VNode的函数而已
v-show 和 v-if指令共同点和不同点
共同点:都是dom渲染
不同点:如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。v-if如果条件为假则不渲染dom元素
如何让css只在当前组件中起作用
将当前组件的<style>修改为<style scoped>
<keep-alive>的作用是什么?
keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗,
一般用应于 选项卡
如何获取dom
在html元素上设置ref属性
在js里面this.$refs
vue的指令以及含义
v-for:基于一个数组来渲染一个列表
v-html: 更新元素的 innerHTML
v-text: 更新元素的 textContent
v-on: 绑定事件监听器 语法糖@
v-bind:动态绑定一个或者多个attribute,或一个组件prop到表达式
v-pre: 不需要表达式 跳过这个元素和它的子元素的编译过程
v-cloak: 不需要表达式 可以隐藏未编译的 Mustache 标签直到实例准备完毕
//css
[v-cloak] {
display: none;
}
//html
<div v-cloak>
{{ message }}
</div>
v-once: 不需要表达式 只渲染元素和组件一次
为什么使用key
无:key属性时,状态默认绑定的是位置;有:key属性时,状态根据key的属性值绑定到了相应的数组元素
key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速
v-model是哪两个指令的语法糖
<input
v-bind:value="something"
v-on:input="something = $event.target.value">
分别简述computed和watch的使用场景
computed 是计算属性,有缓存 可以获取多个值输出一个
watch 是监听一个影响多个
v-on可以监听多个事件的写法
<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur}">//可以正常执行不同方法
<div v-on="{ mousedown:onInput,mouseup:onFocus,mouseenter:onBlur}" >盒子</div>
//可以正常执行不同方法
<div v-on="{click:onInput,click:onFocus,click:onBlur}">盒子</div>
//绑定多个相同事件,只执行最后一个方法
<div @click="{onInput,onFocus,onBlur}">盒子</div>
//这样绑定无效
params和query的区别
//query传参:
this.$router.push({
path:'/xxx',
query:{
id:id
}
})
//接收参数:
this.$route.query.id
//params传参:
this.$router.push({
name:'xxx',
params:{
id:id
}
})
//接收参数:
this.$route.params.id
params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined。
使用query传参的话,会在浏览器的url栏看到传的参数类似于get请求,使用params传参的话则不会,类似于post请求
vue初始化页面闪动问题,看到{{message}}的原因和处理
[v-cloak] {
display: none;
}
created 和mounted 的区别
created 阶段 可以获取到Vue中的data和methods中的数据
mounted 可以获取到dom元素进行操作
vue获取数据在那个周期函数
可以在钩子函数 created、beforeMount、mounted 中进行调用,
ssr 不支持 beforeMount 、mounted 钩子函数,所以放在 created 中有助于一致性
vue-router是什么? 有哪些组件
路由模块,主要来实现路由。常用的组件有router-link、router-view
active-class 是哪个组件的属性
active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换;
怎么定义vue-router 的动态路由,怎么获取传过来的值
可以通过query,param两种方式
区别:query通过url传参,刷新页面还在;params刷新页面不在
router 的区别
route相当于当前正在跳转的路由对象。可以从里面获取name,path,params,query
router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象
vue-router的两种模式
- hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器;
- history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式;
- abstract : 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式.
vuex是什么? 哪种场景使用他
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
vuex有哪几种属性
state getters mutations actions modules