Vue에서 v-on 지시어의 단순 이벤트 바인딩 속성 분석(코드 포함)
- 不言원래의
- 2018-07-27 13:31:341911검색
이 글은 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인 경우 기본 동작이 없거나 기본 동작을 방지할 수 없습니다. 두 경우 모두 이 속성을 호출해도 효과가 없습니다.
간단한 예는 다음과 같습니다. 페이지의 82cd9559ae4c8ac46486487a78349926 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 이벤트 캡처 모드는 이벤트 리스너를 사용할 때 사용됩니다. 즉, 요소 자체에 의해 트리거된 이벤트가 여기에서 먼저 처리된 후 전달됩니다. 처리할 내부 요소입니다. 이벤트를 트리거하기 위해 하단 요소 e388a4556c0f65e1904146cc1a846bee를 클릭하면 리스너가 포함된 이벤트가 먼저 검색됩니다. 요소는 노드 우선순위에 따라 이 수정자가 있는 요소가 먼저 검색된 다음 해당 요소가 검색됩니다. 이벤트가 트리거되고 마지막으로 이벤트가 발생합니다.
이 예에서는 할아버지 노드의 인쇄가 먼저 트리거된 다음 상위 노드의 인쇄가 트리거된 다음 자체 노드의 인쇄가 트리거되고 마지막으로 . 증조부 노드의 인쇄를 트리거합니다. 샘플 코드와 결과는 다음과 같습니다.
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!