Probleme mit Vue-Methoden und Ereignisbehandlung

Methoden und Event-Handler

Methoden-Handler

können die v-on-Direktive verwenden, um DOM-Ereignisse zu überwachen:

<p id="example">
  <button v-on:click="greet">Greet</button>
</p>

Wir haben einen Click-Event-Handler an gebunden eine Methode greet. Definieren Sie diese Methode in der Vue-Instanz unten:

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // 方法内 `this` 指向 vm
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
})

// 也可以在 JavaScript 代码中调用方法
vm.greet() // -> 'Hello Vue.js!'

Inline-Anweisungsprozessor

Zusätzlich zur direkten Bindung an eine Methode können Sie auch Inline-JavaScript-Anweisungen verwenden:

<p id="example-2">
  <button v-on:click="say(&#39;hi&#39;)">Say Hi</button>
  <button v-on:click="say(&#39;what&#39;)">Say What</button>
</p>

new Vue({
  el: &#39;#example-2&#39;,
  methods: {
    say: function (msg) {
      alert(msg)
    }
  }
}

Ähnlich wie Inline-Ausdrücke sind Event-Handler auf eine Anweisung beschränkt.

Manchmal ist es auch notwendig, in einem Inline-Anweisungshandler auf native DOM-Ereignisse zuzugreifen. Sie können die spezielle Variable $event verwenden, um sie an die Methode zu übergeben:

<button v-on:click="say(&#39;hello!&#39;, $event)">Submit</button>

// ...
methods: {
  say: function (msg, event) {
    // 现在我们可以访问原生事件对象
    event.preventDefault()
  }
}

Der Ereignismodifikator

muss im Ereignis häufig event.preventDefault() oder event.stopPropagation() aufrufen Handler. Obwohl wir dies problemlos innerhalb einer Methode tun können, wäre es besser, wenn die Methode eine reine Datenlogik wäre und sich nicht mit DOM-Ereignisdetails befasst.

Um dieses Problem zu lösen, stellt Vue.js zwei Ereignismodifikatoren für v-on bereit: .prevent und .stop. Erinnern Sie sich noch daran, dass Modifikatoren Befehlssuffixe sind, die mit einem Punkt beginnen?

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

1.0.16 fügt zwei zusätzliche Modifikatoren hinzu:

<!-- 添加事件侦听器时使用 capture 模式 -->
<p v-on:click.capture="doThis">...</p>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<p v-on:click.self="doThat">...</p>

Tastenmodifikatoren

Beim Lauschen auf Tastaturereignisse müssen wir oft keyCode erkennen. Vue.js ermöglicht das Hinzufügen von Schlüsselmodifikatoren zu v-on:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

Es ist schwierig, sich alle Schlüsselcodes zu merken. Vue.js bietet Aliase für die am häufigsten verwendeten Schlüssel:

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

Alle Schlüsselaliase:

enter
tab
delete
esc
space
up
down
left
right

1.0.8+: Unterstützt Schlüsselaliase mit einem Buchstaben.

1.0.17+: Sie können Schlüsselaliase anpassen:

// 可以使用 @keyup.f1
Vue.directive('on').keyCodes.f1 = 112

Warum auf Ereignisse in HTML warten?

Möglicherweise stellen Sie fest, dass diese Art der Ereignisüberwachung gegen The verstößt Das traditionelle Konzept der „Separation of Concern“ wird eingeführt. Machen Sie sich keine Sorgen, da alle Event-Handler und Ausdrücke von Vue.js strikt an das ViewModel der aktuellen Ansicht gebunden sind, wird dies keine Wartungsschwierigkeiten verursachen. Tatsächlich hat die Verwendung von v-on mehrere Vorteile:

1. Sie können die entsprechende Methode leicht im JavaScript-Code finden, indem Sie die HTML-Vorlage scannen.

2. Da Sie Ereignisse in JavaScript nicht manuell binden müssen, kann Ihr ViewModel-Code eine sehr reine Logik sein, vollständig vom DOM entkoppelt und einfacher zu testen.

3. Wenn ein ViewModel zerstört wird, werden alle Event-Handler automatisch gelöscht. Sie müssen sich nicht selbst um die Reinigung kümmern.

Das obige ist der detaillierte Inhalt vonProbleme mit Vue-Methoden und Ereignisbehandlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!