1,vue使用的是什么模式?请具体介绍一下这种模式
渐进式开发,采用mvvm的模式
model (模型层) axios data vuex(state)
view (视图层) template < template>< /template>
viewmodel(传递者)是双向绑定实现的机制
延伸问题:什么是渐进式?Vue渐进式-先使用Vue的核心库,再根据你的需要的功能再去逐渐增加加相应的插件。
2,数据渲染 有几种方式 有什么区别?
{{}} == 等价于v-text
v-html:只有v-html可以渲染HTML代码
v-text
区别:v-html 可以识别标签 v-text 不可以识别标签
3,v-if和v-show有什么区别,切换时组件触发那些生命周期钩子函数?
v-if控制的是dom的销毁和创建
v-show只是控制dom的css中 display属性
触发的生命周期 v-if 显示:创建 挂载 隐藏:销毁
v-show显示隐藏不触发生命周期钩子函数
4,v-if和v-for为什么不建议混合使用
被渲染的dom会重复一个创建和销毁的过程 v-for的优先级比v-if高,
哪怕我们只是渲染一小部分用户的元素,也要每次重复渲染的时候遍历整个列表性能,所以我们可以把他改成计算属性:
computed:{
activeClass:function(){
this.users.filter(function(user)){
return user.isActive
}
}
}
5,vue中如何自定义指令(全局和局部)
全局的:参数一:指令调用的dom对象,参数二:指令对象,获取相应的传值信息
Vue.directive('color',function(ele,obj){
if(obj.value%2==0){
ele.style.backgroundColor='red';
}else{
ele.style.backgroundColor='blue';
}
})
局部的:
directive:{
color:function(ele,obj){
ele.style.backgroundColor='red';
}
}
问题延伸:自定义指令的钩子函数
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
<div id="app">
<p v-color="msg">{{msg}}</p>
<p>
<input type="text" v-model = "msg" name="">
</p>
<button @click='gai'>改值</button>
</div>
<script type="text/javascript">
let vm = new Vue({
el : '#app',
data : {
msg : "hello"
},
methods: {
gai(){
this.msg='gaia'
console.log(99)
}
},
directives:{
color:{
bind: function (ele) {
console.log('sfref')
ele.style.backgroundColor='red';
},
inserted: function (el) {
console.log('insetr')
},
update: function (el) {
console.log('update')
console.log(el.innerHTML)
},
unbind: function (el) {
console.log('unbind,销毁')
}
}
},
});
</script>
6,vue中常用的指令有哪些
V-text:主要用来更新textContent,可以等同于JS的text属性
V-html:双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v-html指令。它等同于JS的innerHtml属性。
V-show:也是用于根据条件展示元素。和v-if不同的是,如果v-if的值是false,则这个元素被销毁,不在dom中。但是v-show的元素会始终被渲染并保存在dom中,它只是简单的切换css的dispaly属性。
V-if:可以实现条件渲染,Vue会根据表达式的值的真假条件来渲染元素。
V-else-if:充当v-if的else-if块,可以链式的使用多次。可以更加方便的实现switch语句。
V-else:是搭配v-if使用的,它必须紧跟在v-if或者v-else-if后面,否则不起作用。
V-on:主要用来监听dom事件,以便执行一些代码块。表达式可以是一个方法名。@
V-bind:用来动态的绑定一个或者多个特性。没有参数时,可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
v-for:用v-for指令根据遍历数组来进行渲染
V-model:这个指令用于在表单上创建双向数据绑定
V-slot 插槽
.三个不常用的
V-pre:主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
V-cloak:这个指令是用来保持在元素上直到关联实例结束时进行编译。
V-once:v-once关联的实例,只会渲染一次。之后的重新渲染,实例极其所有的子节点将被视为静态内容跳过,这可以用于优化更新性能。
v-pre:
//跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑
<span v-pre>{{ this will not be compiled }}</span>显示的是{{ this will not be compiled }}
<span v-pre>{{msg}}</span> 即使data里面定义了msg这里仍然是显示的{{msg}}
v-cloak:
//当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。
//我们可以使用 v-cloak 指令来解决这一问题。(解决屏幕闪动问题)
<div id="app" v-cloak>
{{context}}
</div>
v-once:
<div id="app">
<p v-once>{{msg}}</p> //msg不会改变,只会在页面加载的时候,加载,不会被更新
<p>{{msg}}</p>
<p>
<input type="text" v-model = "msg" name="">
</p>
<button v-on:click="cha">Greet</button>
</div>
<script type="text/javascript">
let vm = new Vue({
el : '#app',
data : {
msg : "hello"
},
methods:{
cha(){
this.msg='asfsdfs'
}
}
});
</script>
7,计算属性和实例方法有什么区别?
计算属性有缓存,实例方法没有缓存
计算属性调用时 total 不可以传参 实例方法调用时 total()可以传参
computed/methods
8,如何声明一个过滤器(全局的和局部的)
//过滤器,就是将数据被渲染到视图之前进行格式化处理,而不会修改作用域中原有的数据
//原则是:左值右量(变量也可以不写)
vue.filter(‘gettime’,function(date){
Var time=new date(date)
Return time.getFullyear()+’/’+time.getMonth()+1’/’+getDate()
})
filters:{
Gettime(date){
Var time=new date(date)
Return time.getFullyear()+’/’+time.getMonth()+1’/’+getDate()
}
}
9,你用过那些v-model修饰符?
.lazy文本框失去焦点后在更新数据
.trim清除前后空格的
.number从字符中获取数字
10,你知道那些事件修饰符
.stop阻止事件冒泡
.once只执行一次,一次性事件
.self阻止事件冒泡和事件捕获
.captrue事件捕获阶段触发
.prevent阻止浏览器默认行为
.native 触发原生事件
11,怎样声明全局组件,怎样使用全局组件
Vue.component(‘myHeader’,{
Template:` <div>全局组件</div>`
})
<my-header></my-header>
12,怎样声明局部组件,怎样使用局部组件
声明成 ***.vue文件中模板在<template></template>中。
Js模块化导出<script></script>
css<style scoped></style>
定义 import引入 注册components 调用
13,父子组件怎样实现通讯?
父传子:父组件:<mydiv :list='list'> </mydiv>
子组件:props[‘list’]
子传父:子组件:this.$emit(‘子组件事件名’,参数)//打电话
父组件:<mydiv @子组件事件名=‘父组件事件名’></mydiv>
14,非父子组件之间如何传递参数?
bus总线
兄弟组件可以父传子 子传父 pass
Vuex也可以实现数据共享(官方推荐使用vuex)
sessionStorgey,
15,怎样使用props限定传递的数据,有哪些属性?
type //限定传递的数据类型
Required:true false //是否必传
Default:false //指定默认值
// 自定义验证函数
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
16,解释VUE中单向数据流的概念
子组件不可以直接修改父组件传过来的参数,如果直接修改会报错,只能声明成自己的才可以修改
注:this.$parent.title,可以修改父组件传过来的值
17,vue有哪些插槽,如何使用
默认插槽:能够接受组件外部传给组件大段的HTML代码 <slot></slot>
具名插槽:具有name属性的插槽 可以结合template标签的slot属性,定向给插槽传递内容
作用域插槽:插槽可以控制html模板的显示与不显示。作用域插槽其实就是带数据的插槽。
原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。
slot-scope就相当于是一个对象,这个对象里面的数据就是子组件插槽绑定传上来了。
18,vue中怎样实现组件之间的嵌套
组件之间的嵌套使用,可以借助插槽,让插槽接受子组件中的内容
19,vue中怎样操作dom
ref=’name’
This.$refs.name
this.$refs
document.getbyid()
20,vue怎样监听数据的变化,怎样监听一个对象属性的变化
watch,深度监听,deep:true
21,vue中生命周期钩子函数有哪些,请写出语法
创建前beforeCreate 创建后created(请求axios)
挂载前beforeMount 挂载后mounted(也可以请求axios)
更新前beforeUpdate 更新后updated
销毁前beforeDestroy 销毁后destroyed
注:默认加载组件时候,会执行哪几个
22,挂载和创建之间的区别
创建之后只可以访问数据不可以操作dom
挂载之后可以访问数据可以操作dom
23,keep-alive组件有什么作用?
缓存组件缓存页面,动态组件,router-view等
它提供了include与exclude两个属性,允许组件有条件地进行缓存。
例如:
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
属性使用:
只缓存组件别名name为a的组件
<keep-alive include="a">
<component></component>
</keep-alive>
除了name为a的组件,其他都缓存下来
<keep-alive exclude="a">
<component></component>
</keep-alive>
24,vue.nextTick方法有什么用?
数据更新是一个 异步操作异步dom更新后使用vue.nextTick可以立即得到更新后的 数据
简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,
注意:Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。 $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM,
Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。
2、当项目中你想在改变DOM元素的数据后基于新的dom做点什么,对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中;通俗的理解是:更改数据后当你想立即使用js操作新的视图的时候需要使用它
例如:
created(){
let that=this;
that.$nextTick(function(){ //不使用this.$nextTick()方法会报错
that.$refs.aa.innerHTML="created中更改了按钮内容"; //写入到DOM元素
});
},
25,vue实现双向数据绑定的原理是什么?
当一个vue实例创建后vue会便利data选项的属性,用object.defineProperty将他转化为getter或者setter,并且内部追踪相关依赖,在属性访问和修改时通知变化
每一个组件实例化都有相应的watcher程序实例,他会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时会通知watcher重新计算,从而使得它相关的组件的以更新
举例说明:
<body>
<p id='p1'></p>
<input type='text' id='input1' name='input1'>
</body>
<script>
var p1 = document.getElementById('p1');
var inpu1 = document.getElementById('input1');
var obj = {
name:'数据'
}
p1.innerHTML=obj.name
inpu1.value=obj.name
Object.defineProperty(obj,'name',{
set:function(newdata){
p1.innerHTML=newdata
console.log('设置name')
},
get:function(newdata){
console.log('获取name')
}
})
input1.onchange=function(){
obj.name=inpu1.value
}
</script>
26,什么是vue全局事件解绑?
在vue中,写在methods里面的方法,在页面切换时一般就自动销毁了,
但是写在window上的事件,需要我们手动解绑,也是为了提高代码执行效率,
使用生命周期函数Destroy,在页面离开时执行解绑,
或者有定时器,也需要在 bofordestroy销毁事件中销毁,清除
27,$set 方法有什么用? 有什么特点?
$set是用于设置对象属性的。对于没有声明的属性,直接用赋值的方法,this.xxx= yyy,视图是不会 更新的
使用$set ,视图才会更新
this.list.num = 888; //不生效
this.$set(this.list,'num','888')//
forEach(){
obj['sex'] = 'NAN'
}
28,路由显示区域和路由跳转分别是哪个组件?
显示:router-view 跳转 router-link <=> a tag=“span”? to=“path” active-class
29,路由中怎样传递和接收参数(单个 多个参数)*window.localtion.href=""
//动态路由
to='/detail/100'
路由配置 path:detail/:id
接收:console.log(this.$route.params);
todetail:function(){
this.#router.push({path:'/detail',query:{id:100}});
}
30,active-class的作用
active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换;
31,vue-router有哪几种导航钩子 分别是什么?
全局
前置router. beforeEach
后置router. afterEach
路由独享的
前置beforeEnter
组件内
beforeRouteEnter(to, from, next){
//在渲染该组件的对应路由被confirm 前调用
beforeRouteUpdate(to, from, next) {
//在当前路由改变,但是依然渲染该组件是调用
},
beforeRouteLeave(to, from ,next) {
//导航离开该组件的对应路由时被调用
}
32,路由懒加载怎么实现,有什么意义
let Addclass = resolve =>require([' @/views/Addclass' ] ,resolve )
33,Vue项目性能优化?
代码减少对服务器请求次数** **减小对服务器** **请求代码的体积
v-if 和 v-show选择调用
为item设置唯一key值
减少watch的数据
全局事件解绑函数节流函数防抖
Keep- alive缓存
css精灵图字体图标
spa单页应用图片(数据)懒加载<!--使用前需先安装配置vue-lazyload-->
路由懒加载
Webpack打包压缩代码
34,vue路由模式有哪几种,怎样切换有什么区别
hash,history
(1 )在url显示: hash有# ; history 无#对seo比较友好
(2)回车刷新: hash可以加载到hash值对应页面; history 一般就是404掉了
(3 )支持版本: hash支持低版本浏览器和IE浏览器 ; history,HTML5新推出的API不支持ie低版本
35,vue组件中的data为什么必须是一个函数
如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。
36,$route和$router有什么区别
$route是路由信息对象”,包括path, params, hash, query, matched, name 等路由信息参数。
而$router是“路由实例"对象包括了路由的跳转方法,钩子函数等
37,vue如何兼容ie
插件 最低兼容得到ie9 babel-polyfill
https://blog.csdn.net/XuM222222/article/details/81561890
38,V-on 是都可以监听多个方法 怎样 实现?
可以绑定一个或多个事件 写在对象中即可
<button v-on="{mouseenter:onEnter,mouseleave:onLeave}">鼠标进来 1</button>
<button @mouseenter="onEnter" @mouseleave="onLeave">鼠标进来 2</button>
一个事件绑定多个函数,按顺序执行,这里分隔函数可以用逗号也可以用分号
<button @click="a(),b()">点我 ab</button>
<button @click="one()">点我 onetwothree</button>
39,开发环境与生产环境的区分
//process.env.NODE_ENV
if` `(process.env.NODE_ENV === ``"development"``) {
``alert(``"开发环境"``);
baseurl = "https://www.baidu.com"
}``else` `{
``alert(``"生产环境"``);
baseurl = "https://www.test.com"
}
40,什么情况会使用到vuex vuex有哪些核心的属性?
state => 基本数据
getters => 从基本数据派生的数据 (Getter相当于vue中的computed计算属性)
mutations => 提交更改数据的方法,同步! (commit)
actions => 像一个装饰器,包裹mutations,使之可以异步。 (dispath)
modules => 模块化Vuex
如果我们不喜欢这种在页面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”这种很长的写法,那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了;
1, dataScrSetupFlag: true, //总数据总览总设置开关(设置一些开关等,到达一些样式变化的效果)
2,项目的产品的一些配置信息
3,userName: '', // 重置密码之后的 用户名密码 跳转登陆的时候填入
4,api接口路径:http://baidu.com
5,用户信息的存储(token),购物车数据的存储等
vuex的缺点:
vuex没有持久化存储的手段,每次刷新都会重置所有的数据
41,vue中key的作用
diff算法,使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
所以一句话,**key的作用主要是为了高效的更新虚拟DOM**。
另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,
否则vue只会替换其内部属性而不会触发过渡效果。
42,axios
axios,是基于Promise的http库,用来实现浏览器请求服务器的工具
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
自动转换 JSON 数据
客户端支持防御 XSRF
#### axios 的语法
get,请求的方式,如果表单请求,请使用post
url,请求的文件地址
then,请求成功时的回调函数
catch,请求失败时的回调函数
44,axios 数据请求
post请求,需要qs序列化
当axios请求为post,表单提交时,header需要设置content-type为application/x-www-form-urlencoded,
放在body体的参数格式为
requestbody
{
name:xxx,
age:xxx
},
后台就接收不到参数
这时就需要将参数序列化,用qs序列化参数(qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.),qs.stringify(parmas),转完之后的格式为:formdata
name:xxx,
age:xxx