开心小老虎
开心小老虎

Vue3_指令(内置和自定义)

目录

一、内置指令

1.v-text

2.v-html

3.v-show

4.v-if

5.v-else

6.v-else-if

7.v-for

8.v-on

9.v-bind

10.v-model

11.v-slot

12.v-pre

13.v-once

14.v-memo（3.2+）

15.v-cloak

二、自定义指令

1.规则

2.钩子

一、内置指令

1.v-text

更新元素的文本内容。



{{msg}}
2.v-html

更新元素的 innerHTML。在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值。这个指令基本不用。

3.v-show

基于表达式值的真假性，来改变元素的可见性。通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件改变时，也会触发过渡效果。

4.v-if

基于表达式值的真假性，来条件性地渲染元素或者模板片段。当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。

5.v-else

表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。上一个兄弟元素必须有 v-if 或 v-else-if。


  Now you see me




  Now you don't
6.v-else-if

表示 v-if 的“else if 块”。可以进行链式调用。上一个兄弟元素必须有 v-if 或 v-else-if。


  A




  B




  C




  Not A/B/C
7.v-for

基于原始数据多次渲染元素或模板块。for循环。

v-for 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：


  {{ item.text }}
8.v-on

缩写：@

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

修饰符：

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

监听子组件的自定义事件 (当子组件的“my-event”事件被触发，处理函数将被调用)：
9.v-bind

动态的绑定一个或多个 attribute，也可以是组件的 prop。

缩写：

  • : 或者 . (当使用 .prop 修饰符)
  • 值可以省略 (当 attribute 和绑定的值同名时) 

修饰符

  • .camel - 将短横线命名的 attribute 转变为驼峰式命名。
  • .prop - 强制绑定为 DOM property。
  • .attr - 强制绑定为 DOM attribute。

.prop 修饰符也有专门的缩写，.：

如果使用字符串模板或使用构建步骤预编译模板，则不需要 .camel。

10.v-model

在表单输入元素或组件上创建双向绑定。

仅限：