Vue高频面试题

Vue基础知识点

1. Vue 特性

轻量

Vue.js 库的体积非常小的，并且不依赖其他基础库。

数据绑定

对于一些富交互、状态机类似的前端 UI 界面，数据绑定非常简单、方便。

指令

内置指令统一为 (v—*) ，也可以自定义指令，通过对应表达值的变化就可以修改对应的 DOM 。

插件化

Vue.js 核心不包含 Router 、 AJAX 、表单验证等功能，但是可以非常方便地根据需要加载对应插件。

组件化

组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构

建大型应用

2. Vue 项目结构介绍

build 文件夹：用于存放 webpack 相关配置和脚本。

config 文件夹：主要存放配置文件，比如配置开发环境的端口号、开启热加载或开启 gzip 压缩等。

dist 文件夹：默认命令打包生成的静态资源文件。

node_modules ：存放 npm 命令下载的开发环境和生产环境的依赖包。

src: 存放项目源码及需要引用的资源文件。

src 下 assets ：存放项目中需要用到的资源文件， css 、 js 、 images 等。

src 下 componets ：存放 vue 开发中一些公共组件。

src 下 emit ：自己配置的 vue 集中式事件管理机制。

src 下 router ： vue-router vue 路由的配置文件。

src 下 service ：自己配置的 vue 请求后台接口方法。

src 下 page ：存在 vue 页面组件的文件夹。

src 下 util ：存放 vue 开发过程中一些公共的 js 方法。

src 下 vuex ：存放 vuex 为 vue 专门开发的状态管理器。

src 下 app.vue ：整个工程的 vue 根组件。

src 下 main.js ：工程的入口文件。

index.html ：设置项目的一些 meta 头信息和提供 html 元素节点，用于挂载 vue 。

package.json ：对项目的描述以及对项目部署和启动、打包的 npm 命令管理。

3. Vue 常用指令

v-model 多用于表单元素实现双向数据绑定（同 angular 中的 ng-model ）

v-for 格式： v-for=" 字段名 in(of) 数组 json" 循环数组或 json( 同 angular 中的 ng-repeat), 需要注意

从 vue2 开始取消了 $index

v-show 显示内容 （同 angular 中的 ng-show ）

v-hide 隐藏内容（同 angular 中的 ng-hide ）

v-if 显示与隐藏 （ dom 元素的删除添加 同 angular 中的 ng-if 默认值为 false ）

v-else-if 必须和 v-if 连用

v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误

v-bind 动态绑定 作用： 及时对页面的数据进行更改

v-on:click 给标签绑定函数，可以缩写为 @ ，例如绑定一个点击函数 函数必须写在 methods 里面

v-text 解析文本

v-html 解析 html 标签

v-bind:class 三种绑定方法 1 、对象型 '{red:isred}' 2 、三元型 'isred?"red":"blue"' 3 、数组型

'[{red:"isred"},{blue:"isblue"}]'

v-once 进入页面时 只渲染一次 不在进行渲染

v-cloak 防止闪烁

v-pre 把标签内部的元素原位输出

 

4. Vue 常用的修饰符

a 、 按键修饰符

如： .delete （捕获 “ 删除 ” 和 ” 退格 “ 键） 用法上和事件修饰符一样，挂载在 v-on: 后面，

语法

v-on:keyup.xxx=’yyy’ ``<inputclass = 'aaa' v-model="inputValue" @keyup.delete="onKey"/>

b 、 系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

(1) .ctrl

(2) .alt

(3) .shift

(4) .meta

 

c 、 鼠标按钮修饰符

(1) .left

(2) .right

(3) .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

如： <button @click.middle ="onClick">A</button> 鼠标滚轮单击触发

Click 默认是鼠标左键单击

 

d 、 其他修饰符

(1) .lazy

在默认情况下， v-model 在每次 input 事件触发后将输入框的值与数据进行同步 ，我们可以添

加 lazy 修饰符，从而转变为使用 change 事件进行同步

<inputv-model.lazy="msg" >

(2) .number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 .number 修饰符：

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type="number" 时， HTML 输入元素的值也总会返回字符串。如果这个值

无法被 parseFloat() 解析，则会返回原始的值。

 

(3) .trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<inputv-model.trim="msg">

同样前面都有空格加上.trim后 将前后空格都去掉了。

5. 条件渲染

v-if ：条件指令

<input type="checkbox" v-model="ok">同意许可协议 <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 --> <h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1> <h1 v-else>no</h1>

v-show ：条件指令

使用 v-show 完成和上面相同的功能

<!-- v:show 条件指令 初始渲染开销大 --> <h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1> <h1 v-show="!ok">no</h1>

v-if 是 “ 真正 ” 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销

毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做 —— 直到条件第一次变为真时，才会

开始渲染条件块。

相比之下， v-show 就简单得多 —— 不管初始条件是什么，元素总是会被渲染，并且只是简单地基

于 CSS 进行切换。

一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁

地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

 

6. 列表渲染

v-for ：列表循环指令

简单的列表渲染

<!-- 1、简单的列表渲染 --> <ul><li v-for="n in 10">{{ n }} </li> </ul> <ul><!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 --> <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li> </ul>

遍历数据列表

data: { userList: [ { id: 1, username: 'helen', age: 18 }, { id: 2, username: 'peter', age: 28 }, { id: 3, username: 'andy', age: 38 } ] }

<!-- 2、遍历数据列表 --> <table border="1"> <!-- <tr v-for="item in userList"></tr> --> <tr v-for="(item, index) in userList"> <td>{{index}}</td> <td>{{item.id}}</td> <td>{{item.username}}</td> <td>{{item.age}}</td> </tr> </table>

VUE 面试内容太多..,想要更详细的面试资料

加我 vx:lyang4250   vue 和 react 和 js 面试技巧都有....