内置指令

合集 - vue文档重点摘要(20)

1.vue基础（易遗漏点）2023-11-132.props2023-12-073.emit事件2023-12-074.组件v-model2023-12-115.vue透传 Attributes2023-06-276.依赖注入2023-12-117.异步组件与Suspense2023-12-118.组合式函数hook2023-12-259.自定义指令2023-12-2510.vue插件2023-12-2711.内置组件-Transition2023-12-2712.内置组件-TransitionGroup2023-12-2713.内置组件-Teleport2023-12-2714.vue服务端渲染2023-12-2815.render函数与h函数2023-12-2816.常用API2024-01-0217.生命周期钩子2024-01-07

18.内置指令2024-01-07

19.特殊元素2024-01-0720.defineExpose2024-01-07

收起

v-on​

给元素绑定事件监听器。

缩写：@

期望的绑定值类型：Function | Inline Statement | Object (不带参数)

参数：event (使用对象语法则为可选项)

修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 在捕获模式添加事件监听器。
.self - 只有事件从元素本身发出才触发处理函数。
.{keyAlias} - 只在某些按键下触发处理函数。
.once - 最多触发一次处理函数。
.left - 只在鼠标左键事件触发处理函数。
.right - 只在鼠标右键事件触发处理函数。
.middle - 只在鼠标中键事件触发处理函数。
.passive - 通过 { passive: true } 附加一个 DOM 事件。

v-bind

<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />

<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc" />

<!-- 缩写形式的动态 attribute 名 -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定对象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop 绑定。“prop” 必须在子组件中已声明。 -->
<MyComponent :prop="someThing" />

<!-- 传递子父组件共有的 prop -->
<MyComponent v-bind="$props" />

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

v-once​

仅渲染元素和组件一次，并跳过之后的更新。

无需传入

详细信息

在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 带有子元素的元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<MyComponent v-once :comment="msg" />
<!-- `v-for` 指令 -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>