VUE3基本指令

VUE3-基本指令

1、Mustache双大括号语法

• Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript的表达式。

2、v-once指令

• v-once用于指定元素或者组件只渲染一次：

• 当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；

3、v-text指令

用于更新元素的 textContent（等价于{{}}）

4、v-html指令

• 默认情况下，如果展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析。

• 如果希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示；

5、 v-pre指令（不对{{}}内容进行解析）

• v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签：

  • 跳过不需要编译的节点，加快编译的速度；

6、v-cloak指令

• 这个指令保持在元素上直到关联组件实例结束编译。

7、v-bind指令

1、绑定基本属性

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值

2、绑定class对象语法

:class(v-bind:class的简写)一个对象，以动态地切换class。

3、绑定class数组语法

把一个数组传给:class，以应用一个class列表；

4、动态绑定属性

如果属性名称不是固定的，我们可以使用:[属性名]=“值”的格式来定义

5、绑定一个对象

如果我们希望将一个对象的所有属性，绑定到元素上的所有属性，我们可以直接使用v-bind绑定一个对象

8、v-on指令：

参数传递：

在template中获取事件对象e，传递多个参数时，可以通过$event传入事件。

v-on的修饰符

p.stop-调用event.stopPropagation()。

p.prevent-调用event.preventDefault()。

p.capture-添加事件侦听器时使用capture 模式。

p.self-只当事件是从侦听器绑定的元素本身触发时才触发回调。

p.{keyAlias}-仅当事件是从特定键触发时才触发回调。

p.once-只触发一次回调。

p.left-只当点击鼠标左键时触发。

p.right-只当点击鼠标右键时触发。

p.middle-只当点击鼠标中键时触发。

p.passive-{passive: true}模式添加侦听器

p.native-把组件变回原生DOM的一种方式，相当于给组件绑定原生事件

9、条件渲染

v-if、v-else、v-else-if用于根据条件来渲染某一块的内容

v-show和v-if的区别：

v-show时通过display属性来控制元素的显隐的

v-if会直接销毁该元素