suchen

Heim  >  Artikel  >  Web-Frontend  >  Ein Artikel über die häufig verwendeten integrierten Anweisungen in Vue [Enzyklopädie]

Ein Artikel über die häufig verwendeten integrierten Anweisungen in Vue [Enzyklopädie]

青灯夜游
青灯夜游nach vorne
2022-09-06 19:53:082355Durchsuche

In diesem Artikel werden alle integrierten Anweisungen von Vue besprochen und zusammengefasst. Einige häufig verwendete Anweisungen werden zuerst erläutert, und die weniger häufig verwendeten Anweisungen werden hinten aufgeführt.

Ein Artikel über die häufig verwendeten integrierten Anweisungen in Vue [Enzyklopädie]

0. Interpolationsausdruck

Beschreibung : Der Interpolationsausdruck wird auch als Mustache-Syntax (d. h. doppelte geschweifte Klammern) bezeichnet. Die Bezeichnung mit doppelten geschweiften Klammern wird durch den entsprechenden Komponenteninstanz--Wert ersetzt des msg-Attributs. Gleichzeitig wird es bei jeder Änderung des msg-Attributs synchron aktualisiert. [Verwandte Empfehlungen: vuejs-Video-Tutorialmsg 属性的值。同时每次 msg 属性更改时它也会同步更新。【相关推荐：vuejs视频教程】

  b2afd68918e546cb374a1c24691a872e
    9ef6101249767d81d4698769b8f602fb
    c1a436a314ed609750bd7c7d319db4da{{message}} - {{message}}2e9b454fa8428549ca2e64dfac4625cd
    
    2606cfc876c4f7b95f34dead360db33a
    c1a436a314ed609750bd7c7d319db4da{{counter * 10}}2e9b454fa8428549ca2e64dfac4625cd
    c1a436a314ed609750bd7c7d319db4da{{ message.split(" ").reverse().join(" ") }}2e9b454fa8428549ca2e64dfac4625cd
    
    ed385a16220899853edae7594c73287b
    872d9b32c8da191b77f57bee34da1d47
    c1a436a314ed609750bd7c7d319db4da{{getReverseMessage()}}2e9b454fa8428549ca2e64dfac4625cd
    
    a9eef1710a66a568c2ef3239283949bc
    c1a436a314ed609750bd7c7d319db4da{{ isShow ? "哈哈哈": "" }}2e9b454fa8428549ca2e64dfac4625cd
    6159835a68da9af36b165079f357645e切换65281c5ac262bf6d81768915a4a77ac0

    67ac0dbf43588ec2e5eb6f29e5b49789
    4904c3e070de047a8967787da241ac97 赋值语句 -->
    <!-- c1a436a314ed609750bd7c7d319db4da{{var name = "abc"}}2e9b454fa8428549ca2e64dfac4625cd
    c1a436a314ed609750bd7c7d319db4da{{ if(isShow) {  return "哈哈哈" } }}2e9b454fa8428549ca2e64dfac4625cd -->
  21c97d3a051048b8e55e3c8f199a54b2

1. v-on

说明： 给元素绑定事件监听器。

缩写：@

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

修饰符：

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

详细描述：事件类型由参数来指定。表达式可以是一个方法名，一个内联声明，如果有修饰符则可省略。

  • 当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。
  • 当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。
  • v-on 还支持绑定不带参数的事件/监听器对的对象。请注意，当使用对象语法时，不支持任何修饰符。
<!-- 方法处理函数 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 内联声明 -->
<button v-on:click="doThat(&#39;hello&#39;, $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 使用缩写的动态事件 -->
<button @[event]="doThis"></button>

<!-- 停止传播 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认事件 -->
<button @click.prevent="doThis"></button>

<!-- 不带表达式地阻止默认事件 -->
<form @submit.prevent></form>

<!-- 链式调用修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 按键用于 keyAlias 修饰符-->
<input @keyup.enter="onEnter" />

<!-- 点击事件将最多触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

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

缩写： : 或者 . (当使用 .prop 修饰符)

修饰符：

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

用途：

Abkürzung: @

Parameter: event (optional bei Verwendung der Objektsyntax)

🎜🎜Modifikator: 🎜🎜

Das obige ist der detaillierte Inhalt vonEin Artikel über die häufig verwendeten integrierten Anweisungen in Vue [Enzyklopädie]. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html xss if for select class 值类型 Attribute Property Event number 对象 作用域 事件 default dom innerHTML display input
Stellungnahme：
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Vite Learnings Tiefenanalyse „Dependency Scanning“Nächster Artikel：Vite Learnings Tiefenanalyse „Dependency Scanning“

In Verbindung stehende Artikel

Mehr sehen