1.vue中v-if和v-show的区别
v-if和v-show都是用来控制元素的渲染
v-if是根据后面数据的真假,来判断DOM的添加删除等操作
v-show只是在修改元素的css样式(display属性值)
v-if如果初始渲染条件为真,就渲染,反之就不渲染
v-show不管初始条件是否为真,都会被渲染
v-if有更高的切换消耗,不适合做频繁的切换
v-show有更高的初始渲染消耗,适合做频繁的切换
2.v-if和v-for的优先级
答:当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-if和v-for同时使用。
如果v-if和v-for一起用的话,vue中的的会自动提示v-if应该放到外层去
3.vue的几种常用指令
v-if、v-show、v-for、v-on、v-bind、v-model、v-once
4.v-on可以绑定多个方法
5.vue中$mount与el区别
m
o
u
n
t
和
e
l
两
者
在
使
用
中
没
有
什
么
区
别
,
都
是
将
实
例
化
后
的
v
u
e
挂
载
到
指
定
的
D
O
M
元
素
中
如
果
在
实
例
化
v
u
e
时
指
定
e
l
,
则
该
v
u
e
将
会
渲
染
在
e
l
对
应
的
D
O
M
中
没
有
指
定
e
l
,
则
v
u
e
实
例
会
处
于
一
种
“
未
挂
载
”
的
状
态
,
此
时
通
过
mount和el两者在使用中没有什么区别,都是将实例化后的vue挂载到指定的DOM元素中 如果在实例化vue时指定el,则该vue将会渲染在el对应的DOM中 没有指定el,则vue实例会处于一种“未挂载”的状态,此时通过
mount和el两者在使用中没有什么区别,都是将实例化后的vue挂载到指定的DOM元素中如果在实例化vue时指定el,则该vue将会渲染在el对应的DOM中没有指定el,则vue实例会处于一种“未挂载”的状态,此时通过mount来手动执行挂载
6.vue中key值和is的作用
使用key,vue会基于key的变化重新排列元素顺序,并且移除key不存在的元素。可以做优化处理
is可以扩展原生html元素,也可以绑定动态组件
7.组件中data为什么是函数
因为组件是用来复用的,JS 里对象是引用关系,这样作用域没有隔离
而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题
解释:因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象。
组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。
8.Vue通信
第一种:props和
e
m
i
t
第
二
种
:
中
央
事
件
总
线
E
v
e
n
t
B
u
s
(
基
本
不
用
)
第
三
种
:
v
u
e
x
(
状
态
管
理
器
)
第
四
种
:
emit 第二种:中央事件总线 EventBus(基本不用) 第三种:vuex(状态管理器) 第四种:
emit第二种:中央事件总线EventBus(基本不用)第三种:vuex(状态管理器)第四种:parent 和 $children
当然还有其他办法,但是基本不常用
9.vue有哪些修饰符(不常见的)
事件修饰符:stop、prevent、self、once
键盘修饰符:enter、space、up、down
表单修饰符修饰符:number、trim、lazy
.stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡;
.prevent:等同于JavaScript中的event.preventDefault(),防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播);
.capture:与事件冒泡的方向相反,事件捕获由外到内;
.self:只会触发自己范围内的事件,不包含子元素;
.once:只会触发一次。
请分别说出vue修饰符trim、number、lazy的作用
trim:用来过滤前后的空格
number:将用户输入的数据绑定为number类型
lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步
10.说一下vue组件之间的传递
- 父级传递子级:
首先在子组件上加一个v-bind:自定义属性,等于父级的数据,子组件通过props方法接收数据 - 子级传递父级:
在子组件上绑定一个自定义事件,并且传入父级的“事件”处理函数
在子组件内部使用 e m i t 监 听 这 个 自 定 义 事 件 , t h i s . emit监听这个自定义事件,this. emit监听这个自定义事件,this.emit(‘自定义事件名’,参数)