Vue 메서드 및 이벤트 처리 관련 문제

메서드 및 이벤트 핸들러

메서드 핸들러

v-on 지시문을 사용하여 DOM 이벤트를 수신할 수 있습니다. v-on 指令监听 DOM 事件：

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

我们绑定了一个单击事件处理器到一个方法 greet。下面在 Vue 实例中定义这个方法：

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!'

内联语句处理器

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

<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)
    }
  }
}

类似于内联表达式，事件处理器限制为一个语句。

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：

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

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

事件修饰符

在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。尽管我们在方法内可以轻松做到，不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。

为了解决这个问题，Vue.js 为 v-on 提供两个 事件修饰符：.prevent 与 .stop。你是否还记得修饰符是点号打头的指令后缀？

<!-- 阻止单击事件冒泡 -->
<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 添加了两个额外的修饰符：

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

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

按键修饰符

在监听键盘事件时，我们经常需要检测 keyCode。Vue.js 允许为 v-on 添加按键修饰符：

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

记住所有的 keyCode 比较困难，Vue.js 为最常用的按键提供别名：

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

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

全部的按键别名：

enter
tab
delete
esc
space
up
down
left
right

1.0.8+： 支持单字母按键别名。

1.0.17+： 可以自定义按键别名：

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

为什么在 HTML 中监听事件?

你可能注意到这种事件监听的方式违背了传统理念 “separation of concern”。不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护困难。实际上，使用 v-onrrreee

클릭 이벤트 핸들러를 greet 메서드에 바인딩합니다. 코드>. 아래 Vue 인스턴스에서 이 메소드를 정의하세요. <ol class=" list-paddingleft-2">rrreee<li>인라인 문 프로세서<p></p>메서드에 직접 바인딩하는 것 외에도 인라인 JavaScript 문을 사용할 수도 있습니다. </li>rrreee<li>인라인 표현식과 유사하게 이벤트 핸들러는 문으로 제한됩니다. <p></p>인라인 문 핸들러에서 기본 DOM 이벤트에 액세스해야 하는 경우도 있습니다. 특수 변수 <code>$event를 사용하여 이를 메소드에 전달할 수 있습니다: rrreeerrreee

Event modifier

이벤트 핸들러에서는 event.preventDefault()를 호출해야 하는 경우가 많습니다. 또는 event.stopPropagation(). 메서드 내에서 이 작업을 쉽게 수행할 수 있지만 메서드가 순수한 데이터 논리이고 DOM 이벤트 세부 정보를 처리하지 않는 것이 더 좋습니다.

이 문제를 해결하기 위해 Vue.js는 v-on에 대해 두 가지 이벤트 수정자(.prevent 및 .stop)를 제공합니다. 수정자는 마침표로 시작하는 명령 접미사라는 것을 아직도 기억하시나요? 🎜rrreee🎜1.0.16에는 두 개의 추가 수정자가 추가되었습니다. 🎜rrreee🎜Key 수정자🎜🎜키보드 이벤트를 수신할 때 keyCode를 감지해야 하는 경우가 많습니다. Vue.js에서는 v-on에 키 수정자를 추가할 수 있습니다. 🎜rrreee🎜모든 keyCode를 기억하기는 어렵습니다. Vue.js는 가장 일반적으로 사용되는 키에 대한 별칭을 제공합니다: 🎜rrreee

모든 버튼 별칭: 🎜rrreee🎜1.0.8+: 단일 문자 버튼 별칭을 지원합니다. 🎜🎜1.0.17+: 키 별칭을 사용자 정의할 수 있습니다: 🎜rrreee🎜왜 HTML에서 이벤트를 수신해야 할까요?🎜🎜 이러한 이벤트 모니터링 방식은 "관심사 분리"라는 전통적인 개념에 어긋난다는 것을 알 수 있습니다. 걱정하지 마십시오. 모든 Vue.js 이벤트 핸들러와 표현식은 현재 뷰의 ViewModel에 엄격하게 바인딩되어 있으므로 유지 관리에 어려움이 발생하지 않습니다. 실제로 v-on을 사용하면 여러 가지 장점이 있습니다. 🎜🎜🎜🎜HTML 템플릿을 스캔하면 JavaScript 코드에서 해당 메서드를 쉽게 찾을 수 있습니다. 🎜🎜🎜🎜JavaScript에서 이벤트를 수동으로 바인딩할 필요가 없기 때문에 ViewModel 코드는 DOM에서 완전히 분리되고 테스트하기 더 쉬운 매우 순수한 논리가 될 수 있습니다. 🎜🎜🎜🎜ViewModel이 삭제되면 모든 이벤트 핸들러가 자동으로 삭제됩니다. 직접 청소하는 것에 대해 걱정할 필요가 없습니다. 🎜🎜🎜

위 내용은 Vue 메서드 및 이벤트 처리 관련 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!