Vue.js에서 .native 수정자를 사용하는 방법

php中世界最好的语言
풀어 주다: 2018-06-02 10:41:48
원래의
1401명이 탐색했습니다.

이번에는 Vue.js에서 .native 수식어를 사용하는 방법과 Vue.js에서 .native 수식어를 사용할 때 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

.native modifier

.native modifier에 대한 공식적인 설명은 다음과 같습니다.

때로는 구성 요소의 루트 요소에서 기본 event을 듣고 싶을 수도 있습니다. v-on 수정자 .native 를 사용할 수 있습니다. 예:

<my-component v-on:click.native="doTheThing"></my-component>
로그인 후 복사

간단히 이해하면 다음과 같습니다.

일반 HTML 태그에 대한 이벤트를 듣고 .native 수정자를 추가하면 작동하지 않습니다. 예:

HTML code

<p id="app">
  <a href="#" rel="external nofollow" v-on:click.native="clickFun">click me</a>
</p>
로그인 후 복사

JavaScriptcode

new Vue({
  el: '#app',
  methods: {
    clickFun: function(){
      console.log("message: success")
    }
  }
})
로그인 후 복사

Result

구성 요소의 루트 요소에서 이벤트를 수신한 다음 .native 수정자를 추가하면 작동합니다. 예:

HTML code

<p id="app">
  <my-component v-on:click.native="clickFun"></my-component>
</p>
로그인 후 복사

JavaScript code

Vue.component('my-component', {
  template: `click me`
})
new Vue({
  el: '#app',
  methods: {
    clickFun: function(){
      console.log("message: success")
    }
  }
})
로그인 후 복사

Result

이 기사의 사례를 읽으신 후 방법을 숙지하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다음 페이지에 있는 다른 관련 기사에 주목하세요. PHP 중국어 웹사이트!

추천 자료:

Vue를 사용하여 SMS 확인 성능을 최적화하는 방법

Vue 프로젝트에서 vue-i18n 및 element-ui 국제 개발을 구현하는 방법

위 내용은 Vue.js에서 .native 수정자를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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