Vue에서 v-on 지시어의 단순 이벤트 바인딩 속성 분석(코드 포함)
이 글은 Vue(코드 포함)에서 v-on 명령어의 간단한 이벤트 바인딩의 속성 분석을 소개합니다. 좋은 참고 가치가 있으며 도움이 필요한 친구들에게 도움이 되기를 바랍니다.
머리말
이전 글에서는 클릭 이벤트를 바인딩하는 v-on 명령어를 예로 들어 v-on 명령어의 사용법을 소개했습니다. 이 글에서는 v-on 바인딩 이벤트의 일부 속성을 사용하는 방법을 소개합니다.
v-on 바인딩 명령 속성
.stop 속성
클릭 이벤트가 계속 위쪽으로 전파되는 것을 방지합니다(간단히 말하면 상위 노드 및 상위 노드 위의 노드 이벤트가 트리거되는 것을 허용하지 않습니다). 이 예제 속성에 중지가 없으면 상위 노드 및 할아버지 노드 이벤트가 트리거되고 콘텐츠가 콘솔에 출력됩니다. 샘플 코드와 샘플 결과는 다음과 같습니다.
1 <template> 2 <div> 3 <p class="title1">{{title}}</p> 4 <div class="div1"> 5 <div v-on:click="clickme0"> 6 {{ msg1}} 7 <div v-on:click="clickme"> 8 {{msg2}}<br/> 9 <span v-on:click="clickthis">{{msg3}}</span> 10 </div> 11 </div> 12 </div> 13 </div> 14 15 </template> 16 17 <script> 18 export default { 19 name: 'v-on', 20 data() { 21 return { 22 msg1: '我是爷爷节点', 23 msg2: '我是父节点', 24 msg3: '测试click属性', 25 title: 'v-on指令学习' 26 } 27 }, 28 methods:{ 29 clickme0(){ 30 console.log("我是爷爷节点"); 31 }, 32 clickme(){ 33 console.log("我是父节点"); 34 }, 35 clickthis(){ 36 console.log("不打印父节点事件内容!") 37 } 38 } 39 } 40 </script> 41 42 <style scoped> 43 .title1 { 44 text-align: left; 45 } 46 .div1{ 47 float: left; 48 } 49 </style>
stop 속성을 추가하면 , 상위 노드 및 할아버지 노드 이벤트가 트리거되지 않습니다. 해당 이벤트 내용을 콘솔에 출력합니다. 샘플 코드 및 샘플 결과는 다음과 같습니다.
1 <template> 2 <div> 3 <p class="title1">{{title}}</p> 4 <div class="div1"> 5 <div v-on:click="clickme0"> 6 {{ msg1}} 7 <div v-on:click="clickme"> 8 {{msg2}}<br/> 9 <span v-on:click.stop="clickthis">{{msg3}}</span> 10 </div> 11 </div> 12 </div> 13 </div> 14 15 </template> 16 17 <script> 18 export default { 19 name: 'v-on', 20 data() { 21 return { 22 msg1: '我是爷爷节点', 23 msg2: '我是父节点', 24 msg3: '测试click属性', 25 title: 'v-on指令学习' 26 } 27 }, 28 methods:{ 29 clickme0(){ 30 console.log("我是爷爷节点"); 31 }, 32 clickme(){ 33 console.log("我是父节点"); 34 }, 35 clickthis(){ 36 console.log("不打印父节点事件内容!") 37 } 38 } 39 } 40 </script> 41 42 <style scoped> 43 .title1 { 44 text-align: left; 45 } 46 .div1{ 47 float: left; 48 } 49 </style>
.prevent 속성
웹 브라우저는 이벤트와 관련된 기본 동작을 수행하지 않습니다(해당 동작이 있는 경우). Event 개체의 취소 가능 속성이 fasle인 경우 기본 동작이 없거나 기본 동작을 방지할 수 없습니다. 두 경우 모두 이 속성을 호출해도 효과가 없습니다.
간단한 예는 다음과 같습니다. 페이지의 type 속성이 "submit"인 경우
prevent가 지정되지 않은 경우 클릭 이벤트가 자동으로 from form 작업을 트리거합니다. 지정된 웹 사이트로 이동하려면 예제 코드와 예제 결과는 다음과 같습니다.
<template> <div> <p class="title1">{{title}}</p> <div class="div1"> <form action="http://www.baidu.com" v-on:submit="clickme"> <button type="submit">{{msg}}</button> </form> <!--<a href="http://www.baidu.com" v-on:click.prevent="banclickme">点我去百度</a>--> </div> </div> </template> <script> export default { name: 'v-on', data() { return { title: 'v-on指令学习', msg: 'form表单默认点击打开百度' } }, methods:{ clickme(){ console.log("页面重新加载了"); } // banclickme(){ // console.log("去不了百度吧") // } } } </script> <style scoped> .title1 { text-align: left; } .div1{ float: left; } </style>
prevent가 지정된 경우 클릭 이벤트는 지정된 웹 사이트로 이동하는 양식 작업을 트리거하지 않습니다. 결과는 다음과 같습니다.
<template> <div> <p class="title1">{{title}}</p> <div class="div1"> <form action="http://www.baidu.com" v-on:submit.prevent="clickme"> <button type="submit">{{msg}}</button> </form> <!--<a href="http://www.baidu.com" v-on:click.prevent="banclickme">点我去百度</a>--> </div> </div> </template> <script> export default { name: 'v-on', data() { return { title: 'v-on指令学习', msg: 'form表单默认点击打开百度' } }, methods:{ clickme(){ console.log("去不了百度吧"); } // banclickme(){ // console.log("去不了百度吧") // } } } </script> <style scoped> .title1 { text-align: left; } .div1{ float: left; } </style>
.capture attribute
Add 이벤트 캡처 모드는 이벤트 리스너를 사용할 때 사용됩니다. 즉, 요소 자체에 의해 트리거된 이벤트가 여기에서 먼저 처리된 후 전달됩니다. 처리할 내부 요소입니다. 이벤트를 트리거하기 위해 하단 요소
를 클릭하면 리스너가 포함된 이벤트가 먼저 검색됩니다. 요소는 노드 우선순위에 따라 이 수정자가 있는 요소가 먼저 검색된 다음 해당 요소가 검색됩니다. 이벤트가 트리거되고 마지막으로 이벤트가 발생합니다.
이 예에서는 할아버지 노드의 인쇄가 먼저 트리거된 다음 상위 노드의 인쇄가 트리거된 다음 자체 노드의 인쇄가 트리거되고 마지막으로 . 증조부 노드의 인쇄를 트리거합니다. 샘플 코드와 결과는 다음과 같습니다.
<template> <div> <p class="title1">{{title}}</p> <div class="div1" v-on:click="click3"> {{msg3}}<br/> <div class="div1" v-on:click.capture="click2"> {{msg2}}<br/> <div class="div1" v-on:click.capture="click1"> {{msg1}}<br/> <div v-on:click="click0">{{msg}}</div> </div> </div> </div> </div> </template> <script> export default { name: 'v-on', data() { return { title: 'v-on指令学习', msg: '我是div内部子节点', msg1: '我是div父节点', msg2: '我是div爷爷节点', msg3: '我是div曾祖父节点' } }, methods:{ click0(){ console.log("打印子节点"); }, click1(){ console.log("打印父节点"); }, click2(){ console.log("打印爷爷节点"); }, click3(){ console.log("打印曾祖父节点"); } } } </script> <style scoped> .title1 { text-align: left; } .div1{ float: left; } </style>
.self attribute
는 event.target이 현재 요소 자체, 즉 이벤트인 경우에만 트리거됩니다. 내부 요소에서는 이벤트가 트리거되지 않습니다. 이벤트는 요소 자체를 클릭할 때만 트리거됩니다. 이벤트를 트리거하기 위해 상위 요소를 클릭하면 이벤트가 발생합니다.
이 예제는 상위 노드나 하위 노드를 클릭했을 때 해당 요소 자체의 이벤트를 출력하지 않습니다. 샘플 코드는 다음과 같습니다.
<template> <div> <p class="title1">{{title}}</p> <div class="div1" v-on:click="click3"> {{msg3}}<br/> <div class="div1" v-on:click.self="click2"> {{msg2}}<br/> <div class="div1" v-on:click="click1"> {{msg1}}<br/> <div v-on:click="click0">{{msg}}</div> </div> </div> </div> </div> </template> <script> export default { name: 'v-on', data() { return { title: 'v-on指令学习', msg: '我是div内部子节点', msg1: '我是div父节点', msg2: '我是div爷爷节点', msg3: '我是div曾祖父节点' } }, methods:{ click0(){ console.log("打印子节点"); }, click1(){ console.log("打印父节点"); }, click2(){ console.log("打印爷爷节点"); }, click3(){ console.log("打印曾祖父节点"); } } } </script> <style scoped> .title1 { text-align: left; } .div1{ float: left; } </style>
.once 속성
클릭 이벤트는 한 번만 실행됩니다. 요소 자체의 이벤트는 한 번만 사용할 수 있습니다. 요소를 두 번째로 클릭하면 이벤트가 실행되지 않습니다.
이 예에서는 처음 클릭하면 하위 노드가 인쇄되지만, 두 번째로 클릭하면 하위 노드가 인쇄되지 않습니다. 결과는 다음과 같습니다:
<template> <div> <p class="title1">{{title}}</p> <div class="div1" v-on:click="click3"> {{msg3}}<br/> <div class="div1" v-on:click="click2"> {{msg2}}<br/> <div class="div1" v-on:click="click1"> {{msg1}}<br/> <div v-on:click.once="click0">{{msg}}</div> </div> </div> </div> </div> </template> <script> export default { name: 'v-on', data() { return { title: 'v-on指令学习', msg: '我是div内部子节点', msg1: '我是div父节点', msg2: '我是div爷爷节点', msg3: '我是div曾祖父节点' } }, methods:{ click0(){ console.log("打印子节点"); }, click1(){ console.log("打印父节点"); }, click2(){ console.log("打印爷爷节点"); }, click3(){ console.log("打印曾祖父节点"); } } } </script> <style scoped> .title1 { text-align: left; } .div1{ float: left; } </style>
.passive 속성
스크롤 이벤트의 기본 동작(예: 스크롤 동작)은 onScroll이 완료될 때까지 기다리지 않고 즉시 실행됩니다. 여기에는 event.preventDefault의 경우가 포함됩니다. ()
관련 추천:
Vue v-on 명령어의 단순 이벤트 바인딩 분석(코드 포함)
위 내용은 Vue에서 v-on 지시어의 단순 이벤트 바인딩 속성 분석(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

이 튜토리얼은 사용자 정의 Google 검색 API를 블로그 또는 웹 사이트에 통합하는 방법을 보여 주며 표준 WordPress 테마 검색 기능보다보다 세련된 검색 경험을 제공합니다. 놀랍게도 쉽습니다! 검색을 Y로 제한 할 수 있습니다

이 기사 시리즈는 2017 년 중반에 최신 정보와 새로운 예제로 다시 작성되었습니다. 이 JSON 예에서는 JSON 형식을 사용하여 파일에 간단한 값을 저장하는 방법을 살펴 봅니다. 키 값 쌍 표기법을 사용하여 모든 종류를 저장할 수 있습니다.

코드 프레젠테이션 향상 : 개발자를위한 10 개의 구문 하이 라이터 웹 사이트 나 블로그에서 코드 스 니펫을 공유하는 것은 개발자에게 일반적인 관행입니다. 올바른 구문 형광펜을 선택하면 가독성과 시각적 매력을 크게 향상시킬 수 있습니다. 티

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

손쉬운 웹 페이지 레이아웃에 대한 jQuery 활용 : 8 에센셜 플러그인 jQuery는 웹 페이지 레이아웃을 크게 단순화합니다. 이 기사는 프로세스를 간소화하는 8 개의 강력한 JQuery 플러그인을 강조합니다. 특히 수동 웹 사이트 생성에 유용합니다.

핵심 포인트 JavaScript에서는 일반적으로 메소드를 "소유"하는 객체를 말하지만 함수가 호출되는 방식에 따라 다릅니다. 현재 객체가 없으면 글로벌 객체를 나타냅니다. 웹 브라우저에서는 창으로 표시됩니다. 함수를 호출 할 때 이것은 전역 객체를 유지하지만 객체 생성자 또는 그 메소드를 호출 할 때는 객체의 인스턴스를 나타냅니다. call (), apply () 및 bind ()와 같은 메소드를 사용 하여이 컨텍스트를 변경할 수 있습니다. 이 방법은 주어진이 값과 매개 변수를 사용하여 함수를 호출합니다. JavaScript는 훌륭한 프로그래밍 언어입니다. 몇 년 전,이 문장은있었습니다

이 기사는 JavaScript 및 JQuery Model-View-Controller (MVC) 프레임 워크에 대한 10 개가 넘는 튜토리얼을 선별 한 것으로 새해에 웹 개발 기술을 향상시키는 데 적합합니다. 이 튜토리얼은 Foundatio의 다양한 주제를 다룹니다
