vue의 일부 이벤트 예제 튜토리얼
- 零下一度원래의
- 2017-06-27 10:27:181298검색
vue 이벤트:
vue 이벤트 약어:
vue의 이벤트는 v-on:click='show()' 인데 너무 길어서 v-on:event 매번 작성하기가 싫습니다.
vue에 이벤트 약어가 있습니다 @click='show()' 이게 더 좋아질까요? 8b05045a5be5764f313ed5b9168a17e6
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<button v-on:click='show()'>按钮1</button><button @click='show()'>按钮2</button> //这俩种方法都可以执行点击的事件，当然所有事件都可以这样简写。
</div>
<script src='vue.js'></script>
<script>
new Vue({
el:'#box',
data:{},
methods:{
show:function(){
alert(1)
}
}
});
</script>
</body>
</html>
vue의 이벤트 개체:
vue에는 다음과 같은 이벤트 개체도 있습니다. @click='show($event )' 시간 함수에 $evevt 함수를 전달하여 이를 수신하면 이벤트 객체가 거기에 있게 됩니다.
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<button @click='show($event)'>按钮1</button>//传输事件对象
</div>
<script src='vue.js'></script>
<script>
new Vue({
el:'#box',
data:{},
methods:{
show:function(ev){ //接收事件对象
alert(ev.clientX)； //这个相信都知道
}
}
});
</script>
</body>
</html>
Vue의 이벤트 버블링: (모두가 네이티브에서 이벤트 버블링을 알고 있습니다. 물론 이런 일이 발생하면 차단할 필요가 없습니다).
방법 1: @click='show($event)' 이벤트 개체를 얻은 후 함수에서 기본 ev.cancelBubble=true를 사용할 수 있습니까?
방법 2: @ click.stop ='show()' 이벤트가 버블링되는 것을 방지하려면 이벤트 뒤에 .stop을 추가하기만 하면 됩니다.
vue의 차단 기본 이벤트: (요소에는 모두가 좋아하지 않거나 메서드가 필요하지 않은 일부 이벤트가 있습니다. )
방법 1: @click='show($event)' 이벤트 개체를 얻은 후 함수에서 기본 ev.preventDefault();
를 사용할 수 있습니까? ='show()' 기본 이벤트를 방지하려면 이벤트 뒤에 .prevent를 추가하면 됩니다.
vue의 키보드 이벤트:
@keydown='show()' 물론 $event를 전달하고 함수에서 ev.keyCode를 얻을 수도 있습니다.
제가 말씀드리고 싶은 것은 일반적으로 사용되는 키보드 이벤트의 키입니다.
@keydown.enter='show()' ccodie' ='show()' 실행하려면 왼쪽 버튼을 클릭하세요
@keydown.right='show()' 오른쪽 버튼을 클릭하면 실행
그리고 .. ...........
위 내용은 vue의 일부 이벤트 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!