vue常用指令用法及其面试题
1.v-on:
事件监听器(如:v-on:click点击事件)
2.v-if和v-show
1.v-show跟v-if都是做条件隐藏跟显示用的,
2.v-show是针对display的css属性进行操作,v-if是操作dom元素节点
建议高频情况下使用v-show,其他用v-if
3.v-bind:
用于绑定标签里面的属性值
4.v-model:
实现表单输入和应用状态之间的双向绑定
5.v-for:
循环指令
6.v-text和v-html
1.v-text v-text是用于操作纯文本
2.v-html 用于输出html
v-text仅渲染标签,不能解析 HTML 代码
axios可用于发送请求
有关vue的面试题:
1.vue优点?
轻量级框架
简单易学
双向数据绑定
组件化
视图,数据,结构分离
虚拟DOM
运行速度更快
2.v-show和v-if指令的共同点和不同点
共同点:都能控制元素的显示和隐藏;
不同点:v-show本质就是通过控制css中的display设置为none,v-if是动态的向DOM树内添加或者删除DOM元素
3.Vue中双向数据绑定是如何实现的?
vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()
来实现对属性的劫持,那么在设置或者获取的时候我们就可以在get或者set方法里假如其他的触发函数,达到监听数据变动的目的
4.vue和jQuery的区别
jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:$("lable").val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。
5.谈谈你对MVVM开发模式的理解
MVVM分为Model、View、ViewModel三者。
-
Model:代表数据模型,数据和业务逻辑都在Model层中定义;
-
View:代表UI视图,负责数据的展示;
-
ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;
Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。
这种模式实现了Model和View的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作dom。
5.vue 中怎么重置 data?
Object.assign(this.$data, this.$options.data(this))