Vue의 이벤트 모니터링 명령어 v-on에 대해 이야기해보겠습니다.

프론트엔드 개발에서는 사용자와 자주 상호 작용해야 합니다. 이때 클릭, 드래그, 키보드 이벤트 등과 같은 사용자 이벤트를 모니터링해야 합니다. Vue에서 이벤트를 모니터링하는 방법은 무엇입니까? v-on 지시어를 사용하세요. 다음 기사에서는 Vue의 이벤트 모니터링 명령 v-on을 안내합니다. 도움이 되길 바랍니다! v-on指令。下面本篇文章就来带大家了解一下Vue的事件监听指令v-on，希望对大家有所帮助！

v-on指令介绍

• 作用：绑定事件监听器

• 缩写：@

• 预期：Function (方法) | Inline Statement(内部表达式) | Object(对象)

• 参数： event

在Vue中绑定事件监听器，事件类型由参数指定；表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。（学习视频分享：vue视频教程）

从v2.4.0开始v-on同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

用在普通元素上时，只能监听 原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生DOM事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个$event属性：v-on:click="handle('ok', $event)"。

先来看一个简单的示例

<!-- Template -->
<div id="app">
    <h1 id="点击我">点击我</h1>   
</div>

// JavaScript
var app = new Vue({
    el: &#39;#app&#39;,
    methods: {
        clickMe: function() {
            alert("点击我，我就出来了!(^_^)")
        }
    },
    data: {
    }
})

看到的效果如下：

在Vue的模板中，我们使用了v-on，并且绑定了一个click事件（v-on:click），然后给这个click事件绑定了一个事件clickMe。而这个clickMe在Vue中，我们一般是放在methods: {}中，也就是说clickMe这个函数写在methods中。

看到v-on:click="clickMe"，是不是非常像HTML中的onclock="clickMe"。从外表现象看，他们写法不一样，但是起到的结果是一致的。在Vue中，我们还可以使用@click来替代v-on:click。那么他们起到的作用是一样的。

在Vue中，对于v-on的使用方式，除了上面的示例展示之外，还有下面这些使用方式：

<!-- 方法处理器 -->
<button v-on:click="clickMe"></button>

<!-- 对象语法 （v2.4.0版本以上才支持） -->
<button v-on="{ mousedown: doThis, mouseup: doThat}"></button>

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

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

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

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

<!-- 阻止默认行为， 没有表达式 -->
<form @submit.prevent></form>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符， 键别名 -->
<input @keyup.13="onEnter" />

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

在子组件上监听自定义事件（当子组件触发my-event时将调用事件处理器）：

<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

从上面的简单示例中，可以看出Vue在事件处理的过程中自带了一些修饰符：

• .stop：调用event.stopPropagation()

• .prevent：调用event.preventDefault()

• .capture：添加事件侦听器时使用capture模式

• .self：只当事件是从侦听器绑定的元素本身触发时才触发回调

• .{keyCode | keyAlias}：只当事件是从特定键触发时才触发回调

• .native：监听组件根元素的原生事件

• .once：只触发一次回调

• .left：只当点击鼠标左键时触发，（v2.2.0+ 才具有）

• .right：只当点击鼠标右键时触发，（v2.2.0+ 才具有）

• .middle：只当点击鼠标中键时触发，（v2.2.0+ 才具有）

• .passive：以{passive: true}模式添加侦听器，（v2.3.0+ 才具有）

Vue的官网对事件的处理和组件的自定义的事件都有详细的介绍。如果感兴趣的话，可以查看相应的内容：

• 事件处理器

• 组件自定义事件

v-on示例

我们来做一个简单的效果，就是一个计数器，效果如下：

这个效果很简单，点击+数字往下加，点击-

🎜v-on 명령 소개

• 🎜기능: 바인딩 이벤트 리스너🎜
• 🎜약어: @🎜< /li >
• 🎜예상: 함수(메서드) | 인라인 문(내부 표현식) | 객체(객체)🎜
• 🎜매개변수: event🎜

🎜in Vue 이벤트 리스너 in, 이벤트 유형은 매개변수로 지정됩니다. 표현식은 메소드 이름 또는 인라인 문일 수 있으며 수정자가 없으면 생략할 수 있습니다. (학습 영상 공유: vue 영상 튜토리얼) 🎜 🎜v2.4.0부터 v-on은 매개변수 없이 이벤트/리스너 키-값 쌍 객체 바인딩도 지원합니다. 객체 구문을 사용할 때는 수정자가 지원되지 않습니다. 🎜🎜일반 요소에 사용하면 기본 DOM 이벤트만 수신할 수 있습니다. 사용자 정의 요소 구성 요소에 사용하면 하위 구성 요소에 의해 트리거되는 사용자 정의 이벤트를 들을 수도 있습니다. 🎜🎜네이티브 DOM 이벤트를 수신할 때 메서드는 이벤트를 유일한 매개변수로 사용합니다. 인라인 문을 사용하는 경우 문은 $event 속성(v-on:click="handle('ok', $event)")에 액세스할 수 있습니다. 🎜🎜먼저 간단한 예를 살펴보겠습니다🎜

<div id="app">
    <button v-on:click="increase">+</button>
    <span>{{ count }}</span>
    <button v-on:click="reduce">-</button>
</div>

🎜보이는 효과는 다음과 같습니다.🎜🎜🎜🎜Vue 템플릿에서는 v-on을 사용하고 click 이벤트를 바인딩합니다. (v-on:click) 그런 다음 clickMe 이벤트를 이 click 이벤트에 바인딩합니다. Vue에서 이 clickMe는 일반적으로 메서드: {}에 배치됩니다. 이는 clickMe 함수가 메소드. 🎜🎜v-on:click="clickMe"를 보세요. HTML의 onclock="clickMe"와 매우 비슷합니까? 겉모습으로 보면 글쓰기 방식은 다르지만 결과는 같다. Vue에서는 v-on:click 대신 @click을 사용할 수도 있습니다. 그러면 그들은 같은 역할을 합니다. 🎜🎜Vue에는 위의 예 외에도 v-on을 사용하는 다음과 같은 방법도 있습니다. 🎜

let app = new Vue({
    el: '#app',
    methods: {
        increase: function() {
            this.count++
        },
        reduce: function() {
            this.count--
        }
    },
    data: {
        count: 0
    }
})

🎜하위 구성 요소에서 사용자 정의 이벤트를 수신합니다(하위 구성 요소가 구성 요소가 my-event를 트리거할 때 호출됨): 🎜

<button v-on:click="count += 1">+</button>

🎜위의 간단한 예에서 Vue가 이벤트 처리 프로세스에 몇 가지 수정자와 함께 제공되는 것을 볼 수 있습니다. 🎜

• 🎜.stop: event.stopPropagation() 호출🎜
• 🎜.prevent</code >: event.preventDefault 호출 ()🎜</li><li>🎜<code>.capture: 이벤트 리스너를 추가할 때 캡처 모드를 사용하세요🎜
• 🎜.self : 콜백은 다음과 같습니다. 리스너가 바인딩된 요소 자체에서 이벤트가 트리거될 때만 트리거됩니다.🎜
• 🎜.{keyCode | keyAlias}: 이벤트가 다음과 같은 경우에만 콜백이 트리거됩니다. 특정 키🎜
• 🎜.native에서 트리거될 때: 구성 요소 루트 요소🎜의 기본 이벤트를 수신합니다.
• 🎜.once< /code> code>: 콜백을 한 번만 트리거합니다🎜</li><li>🎜<code>.left: 마우스 왼쪽 버튼을 클릭할 때만 트리거합니다. (v2.2.0+에서만 사용 가능)🎜
• 🎜.right: 마우스 오른쪽 버튼을 클릭했을 때만 실행됩니다. (v2.2.0+에서만 사용 가능)🎜
• 🎜.middle: 마우스 오른쪽 버튼을 클릭할 때만 트리거됩니다. 마우스 가운데 버튼을 클릭할 때만 트리거됩니다. (v2.2.0+에서만 사용 가능) 🎜
• 🎜. Passive: {passive: true} 모드 장치에 리스너를 추가합니다. (v2.3.0+에서만 사용 가능) 🎜

🎜Vue 공식 웹사이트에 자세한 소개가 있습니다. 이벤트 처리 및 구성 요소 사용자 정의 이벤트. 관심이 있으시면 해당 콘텐츠를 확인하실 수 있습니다: 🎜

• 🎜이벤트 핸들러🎜
• 🎜구성요소 맞춤 이벤트🎜

🎜v-on 예시

🎜간단한 효과를 만들어 보겠습니다. 카운터의 효과는 다음과 같습니다: 🎜🎜🎜🎜이 효과는 매우 간단합니다. 숫자를 낮추려면 +를 클릭하고 숫자를 낮추려면 -를 클릭하세요. 🎜🎜Vue의 템플릿에는 세 개의 요소, 두 개의 버튼, 그리고 숫자를 표시하는 컨테이너가 있습니다. 첫 번째 버튼은 덧셈 계산을 수행하고 두 번째 버튼은 뺄셈 계산을 수행합니다. 간단한 구조는 다음과 같습니다: 🎜

<div id="app">
    <button v-on:click="increase">+</button>
    <span>{{ count }}</span>
    <button v-on:click="reduce">-</button>
</div>

两个按钮上都绑定了一个click事件，点击按钮分别触发increase和reduce两个函数，前者做加法，后者做减法。另外一个元素中我们有一个值{{ count }}。每次点击按钮这个{{ count }}都会做相应的变化。

模板有了之后，需要添加对应的功能。

let app = new Vue({
    el: '#app',
    methods: {
        increase: function() {
            this.count++
        },
        reduce: function() {
            this.count--
        }
    },
    data: {
        count: 0
    }
})

在Vue中，我们在methods中声明了两个函数，分别是increase（加法）和reduce（减法）。另外需要在数据源中声明count。

演示demo地址：https://codepen.io/airen/pen/PJbKNg

对于这么简单的效果，我们也可以直接在v-on中处理完：

<button v-on:click="count += 1">+</button>

比如我们前面的示例，修改下：

  <button v-on:click="count += 1">+</button>
  {{ count }}
  -


// JavaScript
let app = new Vue({
  el: '#app',
  data: {
    count: 0
  }
})

效果一样：

演示demo地址：https://codepen.io/airen/pen/veyeLY

（学习视频分享：web前端开发、编程基础视频）

위 내용은 Vue의 이벤트 모니터링 명령어 v-on에 대해 이야기해보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!