vue常用指令、修饰符

vue常用指令、修饰符(面试题)

一、常用指令及作用

v-for 循环（配合key使用，v-for： v-for=“（item,index) in/of 数组json” 循环数组或json）
v-on 绑定事件（缩写@，给标签绑定函数，例如绑定一个点击函数函数必须写在methods里面）
v-model 双向数据绑定（多用于表单元素实现双向数据绑定）

拓展：
vue双向绑定原理(面试题)

通过数据劫持结合发布者-订阅者模式来实现的，首先是对数据进行监听，然后当监听的属性发生变化时则告诉订阅者是否要更新，若更新就会执行对应的更新函数从而更新视图。
或者这么说 ↓
采用数据劫持结合发布者-订阅者模式，通过Object.defineProperty()来劫持各个属性的setter、getter，数据发生变化时发送信息给订阅者，触发相应的监听回调。

v-text 渲染字符串（解析文本）
v-html 渲染html节点及字符串
v-if 判断（通过创建或删除DOM节点来实现元素的显示隐藏，v-else-if、v-else 必须和 v-if 连用）
v-show 显示/隐藏（通过display:none来控制显示/隐藏）

拓展：
v-if 和 v-show 区别 (面试题)

v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）；

v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多；

v-if 有更高的切换开销；v-show 切换开销小，适用于频繁切换；

v-if 有配套的 v-else-if 和 v-else，而 v-show 没有；

v-if 可以搭配 template 使用，而 v-show 不行；

v-hide 隐藏内容同上
v-bind 绑定属性（可以动态的绑定class，style样式。作用：及时对页面的数据进行更改）
v-once 进入页面时只渲染一次不在进行渲染
v-cloak 防止闪烁该属性需配合样式使用：[v-cloak]{display:none}
v-pre 把标签内部的元素原位输出

二、常用修饰符

@事件.stop 阻止事件冒泡（由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件）
@事件.prevent 阻止事件默认（例如：当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法）
@事件.capture 触发事件捕获（添加事件侦听器时使用事件捕获模式）
@事件.self 当事件在该元素本身触发回调
@once 只执行一次（绑定了事件以后只能触发一次，第二次就不会触发）
@事件.passive 告诉浏览器你不想阻止事件的默认行为（当我们在监听元素滚动事件的时候，会一直触发onscroll 事件，在pc 端是没啥问题的，但在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll 事件整了一个.lazy修饰符）
@事件.native 的作用就是把一个vue 组件转化为一个普通的HTML 标签（注意：使用.native 修饰符来操作普通HTML 标签是会令事件失效的）

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

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

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

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

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

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

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

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

三、v-model的修饰符

.lazy （取代 input 监听 change 事件）
默认情况下，v-model 同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。

<input v-model.lazy="msg">

.number（输入字符串转为数字）
自动将用户的输入值转化为数值类型

<input v-model.number="msg">

.trim（输入首尾空格过滤）
自动过滤用户输入的首尾空格

<input v-model.trim="msg">

四、键盘事件的修饰符

当vue项目中需要监听键盘事件时，用到的修饰符有：

<input v-on:keyup.13="submit">
等同于 ↓
<input @keyup.enter="submit">

常用键提供了按键别名，如下：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

修饰键：
.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。

<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear">
 
<!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other">

<!-- 按下Ctrl + enter时触发 -->
<input @keydown.ctrl.13="submit">

五、element 的修饰符(面试加分)

对于elementUI 的 input，需要在后面加上.native，因为elementUI 对 input进行了封装，原生的事件不起作用。

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">
<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>