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

青灯夜游
풀어 주다: 2023-01-11 09:22:32
원래의
3429명이 탐색했습니다.

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

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

이 튜토리얼의 운영 환경: 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: &#39;#app&#39;,
        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:&#39;#child&#39;, //不同的是,el和data选项需要通过函数返回值赋值,避免多个组件实例共用一个数据
        data:function(){
            return {
                ...
            }
        },
        ...
    })
    Vue.component(&#39;child&#39;,child)  //全局注册子组件
    <child ...></child>  //子组件在其他组件内的调用方式
로그인 후 복사

관련 추천: "vue.js tutorial"

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿