Vue前端面试2021-013

1、什么是Vue？为什么要使用Vue？

Vue是一个基于JavaScript的渐进式的前端开发框架
主要的目的是为了提高前端项目的开发效率的运行性能

2、什么是插值表达式？插值表达式都有哪些功能？

插值表达式是Vue中一种特殊的语法，用于输出表达式运算的结果数据
插值表达式可以直接输出变量数据、可以完成简单运算符的运算操作、可以调用系统函数、可以调用自定义函数、可以使用三元表达式运算

3、如果要在页面中渲染变量message中的数据，有几种操作方式？

插值表达式：{{ message }}
指令渲染：v-text、v-html、v-once(结合插值表达式进行一次性渲染)

4、简述v-show和v-if指令的区别和联系

v-show、v-if指令，都可以根据条件判断，完成一个目标数据的显示或者隐藏
v-show是通过display完成显示隐藏效果，如果一个元素需要频繁的显示隐藏的切换，可以使用v-show，如选项卡
v-if是通过DOM节点是否加载完成显示隐藏效果，如果一个元素很少进行显示隐藏的切换，可以使用v-if指令，如登录用户信息展示

5、通过class属性给指定元素添加样式，数组方式和对象方式分别怎么实现？

Vue中可以直接绑定元素的class属性，完成样式的动态赋值和控制
① 数组方式

<div :class="[hasBg?bg:'', hasFont?font:'', ...]">...</div>

② 对象方式

<div :class="{bg:hasBg, font:hasFont, ...}">...</div>

6、简述你在项目中使用过的Vue指令以及它们的含义

v-text：用于渲染展示文本数据
v-html：用于渲染展示文本数据，并在渲染的同时解释执行标签语法
v-once：用于和展示数据的操作语法配合使用，在页面中完成一次性数据加载

v-show：用于根据条件控制元素显示/隐藏
v-if：用于根据条件控制元素显示/隐藏，同时支持程序流程控制
v-for：用于支持程序流程控制，循环渲染输出数据

v-bind：用于动态绑定目标元素的属性，将属性值进行动态数据控制
v-on：用于给目标节点添加事件控制的指令
…