1,vue使用的是什么模式?请具体介绍一下这种模式 mvvm
model (模型层) axios data vuex(state)
view (视图层) template < template>< /template>
viewmodel(传递者)是双向绑定实现的机制
2,v-if和v-show有什么区别
v-if控制的是dom的销毁和创建
v-show只是控制dom的css中 display属性
触发的生命周期 v-if 显示:创建 挂载 隐藏:销毁
v-show显示隐藏不触发生命周期钩子函数
3,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关联的实例,只会渲染一次。之后的重新渲染,实例极其所有的子节点将被视为静态内容跳过,这可以用于优化更新性能。
4,计算属性和实例方法有什么区别?
计算属性有缓存,实例方法没有缓存
计算属性调用时 total 不可以传参 实例方法调用时 total()可以传参
computed/methods
5,事件你知道那些事件修饰符
答:.stop阻止事件冒泡 .once只执行一次,一次性事件 .self阻止事件冒泡和事件捕获 .captrue事件捕获阶段触发 .prevent阻止浏览器默认行为 .native 触发原生事件
6,父子组件怎样实现通讯?
答:父传子:props
父组件:<mydiv :list='list'> </mydiv>
子组件:props[‘list’]
子传父:$emit
子组件:this.$emit(‘子组件事件名’,参数)//打电话
父组件:<mydiv @子组件事件名=‘父组件事件名’></mydiv>
7,vue有哪些插槽,如何使用
默认插槽:能够接受组件外部传给组件大段的HTML代码 <slot></slot>
具名插槽:具有name属性的插槽 可以结合template标签的slot属性,定向给插槽传递内容
作用域插槽:插槽可以控制html模板的显示与不显示。作用域插槽其实就是带数据的插槽。
原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。
slot-scope就相当于是一个对象,这个对象里面的数据就是子组件插槽绑定传上来了。
8,vue中生命周期钩子函数有哪些,请写出语法
答: 创建前beforeCreate 创建后created(请求axios,但是没有dom可以操作)
挂载前beforeMount 挂载后mounted(也可以请求axios)
更新前beforeUpdate 更新后updated
销毁前beforeDestroy 销毁后destroyed
注:默认加载组件时候,会执行哪几个
9,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>
10,Vue项目性能优化?
代码减少对服务器请求次数** **减小对服务器** **请求代码的体积
v-if 和 v-show选择调用
为item设置唯一key值
减少watch的数据
全局事件解绑函数节流函数防抖
Keep- alive缓存
css精灵图字体图标
spa单页应用图片(数据)懒加载<!--使用前需先安装配置vue-lazyload-->
路由懒加载
Webpack打包压缩代码
11,什么情况会使用到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就不会这么麻烦了;