vuejs 이벤트 모니터링을 구현하는 방법

vuejs에서는 "v-on" 명령어를 사용하여 이벤트 모니터링을 구현할 수 있습니다. 이 명령어는 이벤트 리스너를 바인딩하는 데 사용됩니다. 레이블 템플릿. JavaScript를 사용하여 트리거될 때 실행되어야 하는 코드를 설정합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

템플릿 렌더링이 완료된 후 이벤트 바인딩 및 모니터링을 수행할 수 있습니다. v-on 지시문은 DOM 이벤트를 모니터링하는 데 사용되며 일반적으로 템플릿 내에서 직접 사용됩니다.

<button v-on:click="say">Say</button>

메소드 및 인라인 명령문 프로세서

이벤트 핸들러인 v-on을 통해 강도 옵션 속성 메소드의 메소드를 바인딩합니다. v-on: post-매개변수는 모든 기본 이벤트 이름을 허용합니다.

    <button v-on:click = "say">Say</button>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"hello vue.js"
        },
        methods:{
            say:function(){
                alert(this.msg);
            }
        }
    })

v-on 약어: @. @click="say"

v-on은 인라인 JavaScript 문을 지원하지만 문은 하나만 지원합니다.

    <button v-on:click = "sayFrom(&#39;from param&#39;)">Say</button>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"hello vue.js"
        },
        methods:{
            sayFrom:function(from){
                alert(this.msg + &#39;&#39; + from);
            }
        }
    })

메소드 함수와 인라인 JavaScript를 룸과 직접 바인딩할 경우 네이티브 DOM 이벤트 객체를 얻어야 할 수도 있습니다

   <button v-on:click = "showEvent">Event</button> 
   <button v-on:click = "showEvent($event)">event</button>
   <button v-on:click = "showEvent()">Say</button>  //这样写获取不到event
    var vm = new Vue({
        el: "#app",
        methods:{
            showEvent:function(event){
                console.log(event);
            }
        }
    })

v-on을 통해 여러 개의 동일한 이벤트 함수를 동일한 요소에 바인딩할 수 있으며 실행 순서는 순차적 실행입니다. .

이벤트 수정자

1. .stop: event.stopPropagation()을 호출합니다.

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

2. .prevent: event.preventDefault()를 호출합니다.

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>

3. 경청자.

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

4. .self: 콜백은 청취 요소 자체에서 이벤트가 트리거될 때만 트리거됩니다.

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

5.once:

 <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>

수정자를 사용할 때 해당 코드는 동일한 순서로 생성됩니다. 따라서 @click.prevent.self를 사용하면 모든 클릭이 방지되고, @click.self.prevent는 해당 요소에 대한 클릭만 방지됩니다.

   //例子
    var vm = new Vue({
        el: '#app',
        methods:{
            saySelf(msg) {
                alert(msg);
            }
        }
    });
    //HTML代码
    <div v-on:click="say(&#39;click from inner&#39;)" v-on:click.self="saySelf(&#39;click from self&#39;)">
        <button v-on:click="saySelf(&#39;button click&#39;)">button</button>
        <button v-on:click.stop="saySelf(&#39;just button click&#39;)">button</button>
    </div>

키 값 수정자

키보드 이벤트를 들을 때 공통 키 값을 모니터링해야 합니다.

    <input v-on:keyup.13 = "submit" />  //监听input的输入，当输入回车时触发submit函数。

모든 keyCide를 기억하기 어렵기 때문에 Vue는 가장 일반적으로 사용되는 키에 대한 별칭을 제공합니다.

    <!-- 同上 -->
    <input v-on:keyup.enter="submit">
    <!-- 缩写语法 -->
    <input @keyup.enter="submit">

.enter
.tab
.delete("삭제" 및 "백스페이스" 키 캡처)
.esc
.space
.up
.down
.left
.right
글로벌 구성을 통해 액세스할 수 있습니다. keyCodes 객체 사용자 정의 키 값 수정자 별칭:

    // 可以使用 v-on:keyup.f1
    Vue.config.keyCodes.f1 = 112

기존 이벤트 바인딩과의 차이점

1. 수동으로 이벤트를 관리할 필요가 없습니다. ViewModel이 삭제되면 모든 이벤트 핸들러가 자동으로 삭제되어 DOM 바인딩 이벤트를 가져오고 특정 상황에서 바인딩을 해제할 필요가 없습니다.

2. ViewModel 코드는 순전히 논리적 코드이며 DOM과 관련이 없습니다. 이는 자동화된 테스트 사례를 작성하는 데 도움이 됩니다.

vue.extend()

하위 구성요소를 재사용하기 위해 vue.js는 기본 Vue 생성자의 "하위 클래스", 매개변수 옵션 객체를 생성하고 직접 선언하는 Vue.extend(options) 메서드를 제공합니다. Vue 인스턴스 매개변수 객체는 기본적으로 동일합니다.

    var Child = Vue.extend({
        teplate:'#child', //不同的是，el和data选项需要通过函数返回值赋值，避免多个组件实例共用一个数据
        data:function(){
            return {
                ...
            }
        },
        ...
    })
    Vue.component('child',child)  //全局注册子组件
    <child ...></child>  //子组件在其他组件内的调用方式

관련 추천: "vue.js tutorial"

위 내용은 vuejs 이벤트 모니터링을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!