使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

三、按键修饰符

===========

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

全部的按键别名：

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

可以通过全局 config.keyCodes`对象自定义按键修饰符别名:

// 可以使用 v-on:keyup.f1

Vue.config.keyCodes.f1 = 112

四、自动匹配按键修饰符

===============

你也可直接将 KeyboardEvent.key暴露的任意有效按键名转换为 kebab-case 来作为修饰符：

<input @keyup.page-down=“onPageDown”>

在上面的例子中，处理函数仅在 $event.key === ‘PageDown’ 时被调用。

五、系统修饰符

===========

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

.ctrl

.alt

.shift

.meta

例如：

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

######### .exact修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

六、鼠标按钮修饰符

=============

.left

.right

.middle

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

七、表单输入绑定

============

复选框

你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。

单个复选框，绑定到布尔值：

{{ checked }}

多个复选框，绑定到同一个数组：

Jack

John

Mike

Checked names: {{ checkedNames }}

new Vue({

el: ‘#example-3’,

data: {

checkedNames: []

}

})

这个地方很特殊，checkedNames如果这个是字符串或者对象都会得到不同的结果，至于为什么，我也不清楚。

八、修饰符

=========

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change事件进行同步：

.number

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

这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim

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

九、在组件上使用v-model

===================

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

等价于：

<input

v-bind:value=“searchText”

v-on:input=“searchText = $event.target.value”>

######## 解析 DOM 模板时的注意事项

有些 HTML 元素，诸如

• 、
  1. 、 和 ，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如
  2. 、
  3. 和 ，只能出现在其它某些特定的元素内部。

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux