Introduction aux méthodes et événements Vue.js

Le contenu de cet article est une introduction aux méthodes et événements de Vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Méthodes et événements

Le nom de la méthode appelée par @click n'a pas besoin d'être suivi de crochets () Si la méthode a des paramètres, l'événement d'objet événement natif. sera transmis par défaut.

Cette conception de surveillance des événements sur les éléments HTML semble coupler étroitement le DOM et le JavaScript, violant le principe de séparation, mais en fait c'est tout le contraire. Parce que vous pouvez savoir quelle méthode est appelée via HTML, cela dissocie la logique du DOM et facilite la maintenance.

La chose la plus importante est que lorsque le viewModel est détruit, tous les gestionnaires d'événements seront détruits automatiquement, pas besoin de le gérer vous-même.

Vue fournit une variable spéciale $event pour accéder aux événements DOM natifs.

<div id="app">
    <a href="https://www.apple.com/" @click="handleClick(&#39;禁止打开&#39;,$event)">打开链接</a>
</div>

Modificateurs

Vue prend en charge les modificateurs suivants :

.stop

.prevent

.capture

.self.once

L'utilisation spécifique est la suivante :

修饰符功能	使用示例
阻止单击事件冒泡	<a @click.stop="handle"></a>
提交事件不再重载页面	<form @submit.prevent="handle"></form>
修饰符可以串联	<a @click.stop.prevent="handle"></a>
只有修饰符	<form @submit.prevent></form>
添加事件侦听器时使用事件捕获模式	<p @click.capture="handle">...</p>
只当事件在该元素本身（不是子元素）触发时执行回调	<p @click.self="handle">...</p>
只触发一次，组件同样适用	<p @click.once="handle">...</p>

Lorsque vous écoutez des événements de clavier sur des éléments de formulaire, vous pouvez également utiliser des modificateurs de touches.

修饰符功能	使用示例
只有在keyCode是13时调用vm.submit()	<input @keyup.13="submit">

En plus d'un keyCode spécifique, Vue fournit également quelques noms de raccourcis :

.enter

.tab

.delete ( Restock " touches "supprimer" et "retour arrière")

.esc

.space

.up

.down

.left

.right

Ces modificateurs de touches peuvent également être utilisés en combinaison, ou avec la souris :

.ctrl

.alt

. shift

.meta

Cet article est par ici Pour plus de cours sur vue.js, vous pouvez faire attention à JavaScript sur le site Web php chinois Tutoriel vidéo colonne ! ! !

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!