简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Un article pour parler des instructions intégrées couramment utilisées dans Vue [Encyclopédie]

Un article pour parler des instructions intégrées couramment utilisées dans Vue [Encyclopédie]

青灯夜游
青灯夜游avant
2022-09-06 19:53:082243parcourir

Cet article passe en revue et résume toutes les instructions intégrées de Vue Certaines instructions courantes seront expliquées en premier, et les instructions les moins couramment utilisées seront placées à la fin.

Un article pour parler des instructions intégrées couramment utilisées dans Vue [Encyclopédie]

0. Expression d'interpolation

Description  : L'expression d'interpolation est également appelée syntaxe Mustache (c'est-à-dire doubles accolades), l'étiquette des doubles accolades sera remplacée par l'instance de composant correspondante La valeur de l'attribut msg. En même temps, il sera également mis à jour de manière synchrone à chaque fois que l'attribut msg change. [Recommandations associées : tutoriel vidéo vuejsmsg 属性的值。同时每次 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+

用途：

Abréviation : @

Paramètres : event (facultatif lors de l'utilisation de la syntaxe d'objet)

🎜🎜Modificateur : 🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html xss if for select class 值类型 Attribute Property Event number 对象 作用域 事件 default dom innerHTML display input
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Analyse approfondie « Analyse des dépendances » de Vite LearningArticle suivant：Analyse approfondie « Analyse des dépendances » de Vite Learning

Articles Liés

Voir plus