vue指令知识点

模板和指令

模板语法有两种

a. 插值语法: {{x}}, 用于解析标签体内容, 其中 x 为vm(mvvm)实例对象上可以直接访问的属性, 这些数据通过数据代理的形式(_data)确保 vm 可以进行访问. 注意, 插值语法中可以 data 或者 methods 等等任何数据.
b. 指令语法: v-CMD, 例如 v-bind, v-on, v-html 等

注意, 插值语法作用于标签体, 而指令语法则在标签属性中生效.

v-bind 表示数据的单向绑定, 从 data --> 模板, 其缩写语法为: “:KEY”, 一旦使用 v-bind 指定某个值, 则表示当前标签上已经有某一个 KEY 属性了, 例如: <li :bamboo="3"></li>在渲染之后, li 标签上将有一个 bamboo 属性. 这一点非常重要, 这个非常有助于后续第三方组件或者自定义组件中的关键字段传值:

1	<component :key1="1" :key2="2" ...></component>

关于双向绑定指令, 见下章说明.

`v-model` 指令

v-model 表示数据的双向绑定, 其仅仅作用于已经默认存在”value”属性的标签, 故 v-model 一般用于 Form 表单中:

<input> 标签：用于文本输入、复选框、单选按钮等表单元素

a. 文本输入: <input type="text" v-model="username">
b. 密码输入: <input type="password" v-model="password">
c. 数字输入: <input type="number" v-model="number">
d. 单选按钮(radio):

1 2	<input type="radio" value="option1" v-model="selectedOption" /> <input type="radio" value="option2" v-model="selectedOption" />

e. 复选框(checkbox)

1 2	<input type="checkbox" value="option1" v-model="selectedOptions" /> <input type="checkbox" value="option2" v-model="selectedOptions" />

其中 selectOptions 值为 value 对应的值的时候会自动设置 checkbox 为 true.

<textarea> 标签：用于多行文本输入

1	<textarea v-model="message"></textarea>

<select> 标签：用于选择列表中的选项

<select v-model="selectedOption">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

除此之外, 还可以在存在”value”属性的自定义标签中使用双向绑定, 这点非常重要.

`v-on` 指令

v-on表示事件监听器, 用于响应用户的交互操作, 其缩写语法为: @EVENT.modifiers, 其中 EVENT 就是 JS 中常见的各种事件, modifers 表示各种事件修饰符.

各类常用事件

click: 鼠标点击事件示例: <button @click="handleClick">点击我</button>
keydown: 键盘按下事件示例: <input @keydown="handleKeyDown">
keyup: 键盘释放事件示例: <input @keyup="handleKeyUp">
keypress: 键盘按键事件示例: <input @keypress="handleKeyPress">
input: 输入事件示例: <input @input="handleInput">
change: 值变化事件示例: <input @change="handleChange">
mousemove: 鼠标移动事件示例: <div @mousemove="handleMouseMove">
mouseover: 鼠标悬停事件示例: <div @mouseover="handleMouseOver">
mouseout: 鼠标离开事件示例: <div @mouseout="handleMouseOut">
mousedown: 鼠标按下事件示例: <button @mousedown="handleMouseDown">按下我</button>
mouseup: 鼠标释放事件示例: <button @mouseup="handleMouseUp">释放我</button>
scroll: 滚动事件示例: <div @scroll="handleScroll">
dblclick: 双击事件示例: <button @dblclick="handleDoubleClick">双击我</button>
submit: 表单提交事件示例: <form @submit="handleSubmit">
load: 资源加载事件示例: <img src="image.jpg" @load="handleImageLoad">
error: 资源加载错误事件示例: <img src="image.jpg" @error="handleImageError">

事件修饰符

常用事件修饰符

stop: 阻止事件冒泡, 例如@click.stop="handleClick"
prevent: 阻止事件默认行为, 例如 form 表单提交后刷新页面, @submit.prevent="handleSubmit"
once: 仅仅执行一次事件处理, 例如@click.once="handleClick"
capture: 使用事件捕获模式(事件从顶层向下传播到目标)而不是冒泡模式(事件从目标向外传递), 例如@focus.capture="handleFocus"
self: 只在事件目标自身触发时才执行事件处理程序, 例如@click.self="handleClick"
passive: 指示事件处理程序不会调用event.preventDefault(), 无需等待回调程序执行完成
native: 监听组件根元素的原生事件, 例如@input.native="handleInput"

键盘和鼠标事件修饰符

keyCode: 只在特定按键被按下时才触发事件处理程序, 例如@keydown.enter="handleEnterKey"
exact: 要求事件的修饰键必须精确匹配, 例如@keydown.exact="handleExactMatch"
left,right, middle: 特定鼠标按钮被点击时触发事件处理程序, 例如@mousedown.left="handleLeftClick"

关于passive修饰符

这里需要作进一步的说明, 其主要用于优化滚动性能, 即addEventListener方法中的滚动事件. 首先, 默认情况下滚动事件处理程序中会调用 event.preventDefault() 方法来阻止默认的滚动行为, 这样可以达到如下目的: 在滚动过程中禁止页面的滚动或阻止某些元素的滚动, 但是这里有如下问题:

a. 滚动事件的监听是在主线程上执行
b. 阻止默认行为需要等待主线程的处理完成, 这里会有一定的延迟

为了提高流畅度, 通过passive来告知浏览器不会调用event.preventDefault() , 从而让浏览器做更多的优化以提高体验, 当然, 这一切的前提不会影响到需要阻止默认行为的滚动场景.

1	element.addEventListener('scroll', handleScroll, { passive: true });

键盘事件

常用按键说明

enter: 回车键，例如: <input @keydown.enter="handleEnterKey">
tab: Tab键，例如: <input @keydown.tab="handleTabKey">
delete: 删除键，例如: <input @keydown.delete="handleDeleteKey">
space: 空格键，例如: <button @keydown.space="handleSpaceKey">按下空格键</button>
esc: Esc键，例如: <div @keydown.esc="handleEscapeKey">按下Esc键</div>
up: 上箭头键，例如: <input @keydown.up="handleUpArrowKey">
down: 下箭头键，例如: <input @keydown.down="handleDownArrowKey">
left: 左箭头键，例如: <input @keydown.left="handleLeftArrowKey">
right: 右箭头键，例如: <input @keydown.right="handleRightArrowKey">
home: Home键，例如: <input @keydown.home="handleHomeKey">
end: End键，例如: <input @keydown.end="handleEndKey">
pageup: Page Up键，例如: <input @keydown.pageup="handlePageUpKey">
pagedown: Page Down键，例如: <input @keydown.pagedown="handlePageDownKey">
ctrl: Ctrl键，例如: <input @keydown.ctrl="handleCtrlKey">
alt: Alt键，例如: <input @keydown.alt="handleAltKey">
shift: Shift键，例如: <input @keydown.shift="handleShiftKey">
meta: Meta键 (通常是Command键或Windows键)，例如: <input @keydown.meta="handleMetaKey">

系统修饰键

.ctrl: Ctrl系统按键。示例: <input @keydown.ctrl.y="handleY">（当同时按下Ctrl键和字母”Y”时触发，常用于撤销操作）
.alt: Alt系统按键。示例: <input @keydown.alt.f4="handleAltF4">（当同时按下Alt键和F4键时触发，常用于关闭窗口）
.shift: Shift系统按键。示例: <input @keydown.shift.tab="handleShiftTab">（当同时按下Shift键和Tab键时触发，常用于向前切换焦点）
.meta: Meta系统按键（通常是Command键或Windows键）。示例: <input @keydown.meta.s="handleMetaS">（当同时按下Meta键和字母”S”时触发，常用于保存操作）

其他指令

常用但是容易记忆的指令

v-if: 条件渲染, 根据条件来渲染和销毁元素, 例如<div v-if="isVisible">Visible content</div>
v-for: 列表渲染, 例如<ul><li v-for="item in items">{{ item }}</li></ul>
v-show: 根据条件来显示或隐藏元素, 其原理是通过改变 display 来实现, 例如: <div v-show="isVisible">Visible content</div>
v-text: 更新元素的文本内容，将指定的数据值动态地渲染为文本, 例如: <span v-text="message"></span>, 注意, 其仅仅会将数据渲染为纯文本
v-html: 输出 HTML 片段到元素中，可以渲染 HTML 结构, 例如: <div v-html="htmlContent"></div>, 注意, 其会渲染 HTML 数据

不常用指令

v-cloak: 用于在 Vue 实例编译完成前隐藏未编译的模板内容，通常与 CSS 配合使用, 例如: <div v-cloak>{{ message }}</div>, 在编译完成前不渲染 message
v-pre: 用于跳过 Vue 实例编译过程中的指定元素，不进行数据绑定和编译, 例如: <pre v-pre>{{ message }}</pre>
v-once: 指令所在的元素和组件只渲染一次，不再响应数据的变化, 例如: <span v-once>{{ message }}</span>, 这个功能同时间修饰符.once类似