Vue.js의 .native 수정자 사용에 대한 자세한 설명

이번에는 Vue.js에서 .native 수정자를 사용하는 방법에 대해 자세히 설명하겠습니다. 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 중국어 웹사이트!

추천 자료:

WeChat 애플릿의 이미지를 모델 높이에 맞게 조정하는 방법

jQuery를 사용하여 사용자 정의 선택기를 만드는 단계에 대한 자세한 설명

Url에서 Get 매개변수를 얻는 방법

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