前端常见面试题（二）@郝晨光

Vue常用的指令

v-text 主要用来渲染纯文本内容，类似于原生JS的innerText

 <div v-text="msg"></div>
 // msg 的值为纯文本，不会解析标签

v-html 主要用来渲染带有html标签的文本内容，可以渲染原生HTML标签
```
 <div v-html="msg"></div>
 // msg 的值可以是HTML标签，会解析标签
```

v-if 主要用来实现条件渲染，会根据条件是否成立来决定是否渲染当前元素

 <div v-if="true">条件可以是布尔值和条件表达式</div>
 // v-if后边的条件可以是布尔值和条件表达式，当条件为true的时候渲染当前元素

v-else-if 必须配合 v-if 使用，当v-if的条件不成立的时候，继续执行判断，当条件成立的收渲染当前的元素

 <div v-if="5>5">条件可以是布尔值和条件表达式</div>
 <div v-else-if="5===5">
      v-if的条件不成立的时候，开始判断v-else-if，当v-else-if的条件成立的时候渲染
  </div>

v-else 必须配合 v-if 或者 v-else-if 使用，当v-if的条件不成立的时候，渲染 v-else 的元素

 <div v-if="type==='success'">成功</div>
 <div v-else-if="type==='error'">警告</div>
  <div v-else>当之前的所有条件都不成立的时候渲染当前元素</div>

v-show Vue的条件渲染的第二种方式，当条件成立的时候渲染当前元素，关于v-if和v-show的区别，请看上篇前端常见面试题（一）
```
  <div v-show="true">条件可以是布尔值和条件表达式</div>
```
v-for Vue的列表渲染，用来渲染一组数据，支持for in；for of 两种遍历方式，需要注意的是，每一次遍历的时候，我们都要给元素添加一个key值，这个key值在它的兄弟元素之前必须是独一无二的，我们一般都使用id来作为这个key值，这个key值我们使用了v-bind绑定，下一个指令我会讲
```
   <div v-for="item in list" :key="item.id">{{item.value}}</div>
  // list = [{id: 1, value: '第一个'}, {id: 2, value: '第二个'},{id: 3, value: '第三个'}]
```

v-bind Vue的属性绑定，将当前的属性绑定到Vue的实例上，使其可以使用js表达式或者js数据，**v-bind的简写为：**一个冒号；

 <div v-bind:class="['a','b']">这是v-bind的元素</div>
 <div :class="['a','b']">上下是等价的</div>

在v-bind中，我们还可以使用表达式

 <div v-bind:class="{active: 5>0}">这个元素会加上active类名</div>
 <div v-bind:class="{active: 5<0}">这个元素不会加上active类名</div>
 <div v-bind:class="['a','b',{active: 5>0}]">同时使用数组和对象也是可以的</div>
 <div v-bind:class="a>5?'success':'error'">也可以使用JS表达式</div>

当然，我们更能使用Vue中定义的数据

<div v-bind:class="divClass">使用变量</div>
// divClass = ['a','b',{active: 5>0}];

v-on Vue中的事件绑定方式，可以监听所有原生事件，以及Vue中的自定义事件（使用$emit发布的事件）；v-on 简写为 @ 符号，并且，在Vue中，还为我们提供了很多的事件修饰符，稍后我们一块看一看
```
<button v-on:click="clickBtn">按钮</button>
<button @click="clickBtn">上下是等价的</button>
// clickBtn是定义在Vue的methods属性中的方法，即触发事件之后触发的函数
```
v-model Vue提供的数据双向绑定，可以实现表单元素的数据双向绑定，高级用法可以实现组件的数据双向绑定，可以看本人的另一篇文章 Vue在组件(非表单控件)上使用v-model双向数据绑定
```
<input type="text" v-model="inputValue" />
// 此时inputValue就与我们的input实现了双向数据绑定，当input的值发生改变的时候，inputValue也会同步发生改变
// 反之，当inputValue发生改变的时候，input的值也会发生改变
```
在Vue中，v-model也支持一些修饰符，稍后我都会详细说

v-pre 跳过当前元素和其子元素的编译过程，直接显示原始的DOM标签及内容，跳过大量的没有指令的节点加速编译

<div>
     <span>{{message}}</span>
     <span v-pre>{{message}}</span>  <!-- 当前元素不执行编译，直接显示{{message}}的纯文本 -->
</div>

v-clock 防止页面加载时出现 vue 的变量名。提升用户体验感，避免用户看到编译之前的变量

v-once 被v-once绑定的元素只会被编译渲染一遍，之后的每次渲染，它和它的子元素都会被当成一个静态元素来跳过渲染和编译，用来更加优化性能

<div v-once>{{msg}}</div>
<div>{{msg}}</div>
<!--  第一次渲染的时候，会将msg的值渲染在两个div中，
      当msg的值发生改变的时候，再次进行渲染，此时，
      第一个div会被当做静态元素，不再执行渲染，只有第二个
      div的值会发生改变 -->

Vue常用修饰符

v-model修饰符
1. .lazy
  默认情况下，v-model会同步输入框的值和数据（input事件触发数据同步），可以通过.lazy修饰符，转变为在change发生时才触发数据同步
```
<input type="text" v-model.lazy="msg"/>
```
2. .number
  自动将input的数据转换为number类型的数据
```
<input type="text" v-model.number="msg"/>
```
3. .trim
  过滤input数据两边的空格，只能去除两边的空格，不能去除中间的，类似于string的trim方法
```
<input type="text" v-model.trim="msg"/>
```

v-on事件修饰符

.stop 阻止事件冒泡（阻止事件向上传递）
.prevent 阻止默认事件（阻止元素的默认事件，如form提交会重载页面等）
.captrue 使用事件捕获的方式触发事件（事件会向下传递）
.self 只有当事件时从元素本身触发的才会触发事件（当e.target为当前元素的时候）
.once 事件只会触发一次
.passive 告知浏览器不阻止事件的默认行为

   <!-- 阻止单击事件继续传播 -->
  <button @click.stop="clickThis"></button >

  <!-- 提交事件不再重载页面 -->
  <form @submit.prevent="onSubmit"></form>

  <!-- 修饰符可以串联 -->
  <button @click.stop.prevent="clickThis"></button >

  <!-- 只有修饰符 -->
  <form @submit.prevent></form>

  <!-- 添加事件监听器时使用事件捕获模式 -->
  <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
  <div @click.capture="clickThis">...</div>

  <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  <!-- 即事件不是从内部元素触发的 -->
  <div @click.self="clickThis">...</div>

  <!-- 点击事件将只会触发一次 -->
  <button @click.once="doThis"></button>

  <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
  <!-- 而不会等待 `onScroll` 完成  -->
  <!-- 这其中包含 `event.preventDefault()` 的情况 -->
  <div v-on:scroll.passive="onScroll">...</div>

按键修饰符当事件触发的 keyCode 是对应的 keyCode 时触发
1. .enter
2. .tab
3. .delete 捕获删除del和退格back
4. .esc
5. .space
6. .up
7. .down
8. .left
9. .right
10. 我们还可以通过Vue的全局配置来自定义按键修饰符
  vue.config.keyCodes.f1 = 112;
11. ```
  <input @keyup.enter="save" /> // 当按下enter键的时候触发save方法
```
系统按键修饰符 当事件触发的同时按下了系统按键时才会正确的触发事件
1. ctrl
2. .alt
3. .shift
4. .meta 在window键盘上对应的是win键，在mac系统上对应的是command
5. ```
<button @click.ctrl="clickThis">按钮</button> // 当按着ctrl键的同时触发click事件才可以触发clickThis方法
<input @keyup.alt.up="changeInput"/> // 当按下alt的同时使用 up 键触发input的keyup事件才会执行changeInput方法
```
6. 在系统按键修饰符中触发keyup事件的时候，并不需要将系统按键修饰符松开，你必须要保持一直按下对应的系统按键，只需要弹起常规按键即可

事件精准匹配修饰符

.exact 用来精准的控制当只有对应的系统修饰符按下的时候才会触发事件

 <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
 <button @click.ctrl="onClick">A</button>

 <!-- 有且只有 Ctrl 被按下的时候才触发 -->
 <button @click.ctrl.exact="onCtrlClick">A</button>

 <!-- 没有任何系统修饰符被按下的时候才触发 -->
 <button @click.exact="onClick">A</button>

鼠标按钮修饰符
1. .left 鼠标左键
2. .right 鼠标右键
3. .middle 鼠标中键

v-on可以监听多个方法吗？
v-on 是可以同时监听多个方法的，但是必须是监听不同的事件，当监听同样的事件的时候，只会触发第一次监听时候的方法

<div @click="clickThis" @mouseenter="enterThis" @mouseleave="leaveThis"></div>
// 这些事件都可以被触发
<div @click="firstClick" @click="secondClick"></div>
// 这个时候，vue会报错，因为不能使用v-on重复监听同一个事件

Vue中key值的作用
用于管理可复用的元素。因为Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做使 Vue 编译变得非常快

Vue会尽可能的复用当前页面上所有的元素，如果元素没有独立的key值的话，如果我们只修改了元素的属性，那Vue会重复使用页面上的元素，只是给它修改一个属性

在diff算法中，Vue使用 key 值来判断元素是否发生更改，以达到重复使用页面上所有可复用元素，特别是在列表渲染中，Vue通过key值来判断元素是否需要更新，如果元素只是更换位置的话，就不需要重新渲染，这也是为什么我们在列表渲染的时候为什么始终不建议使用元素的索引值来作为 key 值，因为索引值始终会发生改变，会增加Vue的渲染成本

Vue组件中的data为什么必须是函数
首先我们要明白，组件的创建就是为了可以重复使用

Vue的data的两种定义方式：object 和 function

object是引用数据类型,如果使用object定义组件的 data 的话，每次重复使用组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;

而function构成一个局部作用域，每次复用组件的时候，都会返回一个新的object，这个新的object与别的组件的data没有任何关联，是一个新的引用

达到每一个组件都独立维护自己的数据，而不是多个组件维护同一个数据

友情链接：前端经典css50道面试题

前端常见面试题（二）@郝晨光

结言

感谢您的查阅，有错误的地方望不吝赐教；菜鸟一枚，请多关照

猜你喜欢