이 글에서는 Vue(코드 포함)에서 v-on 명령의 간단한 이벤트 바인딩 분석을 소개합니다. 참고할 만한 가치가 있고 도움이 필요한 친구들에게 도움이 되기를 바랍니다.
JavaScript에서 모든 DOM 요소에는 자체 이벤트 객체가 있습니다. 이벤트 객체는 이벤트와 같은 이벤트 상태를 나타냅니다. 키보드 키 상태, 마우스 위치, 마우스 버튼 상태 등이 발생했습니다. 이벤트는 이벤트가 발생할 때까지 실행되지 않는 함수와 함께 사용되는 경우가 많습니다. JavaScript의 일반적인 이벤트 핸들러(이벤트 처리기)에는 주로 다음이 포함됩니다.
속성 이름 | 설명(이벤트가 발생한 시점에 해당... ) |
onabort | 이미지 로딩이 중단되었습니다 |
onchange# 🎜 🎜# | 필드 내용이 변경됨|
사용자가 개체를 두 번 클릭하면 호출되는 이벤트 핸들러 에디토리얼 🎜🎜# 키보드 키를 눌렀다가 뗐다 | |
페이지나 이미지가 로드됩니다 🎜# | #🎜🎜 #onmousemove |
onreset | |
onselect | 텍스트가 선택됨 |
onunload | 사용자 종료 페이지 |
onblur | 요소가 포커스를 잃음 |
onclick#🎜 🎜# | 사용자가 객체를 클릭할 때 이벤트 핸들러는|
문서를 로드하는 동안 오류가 발생했습니다. image | |
특정 키보드 키를 눌렀습니다 | |
특정 키보드 키를 눌렀습니다. Release | |
마우스 버튼을 눌렀습니다 | #🎜 🎜#onmouseout# 🎜🎜# |
onmouseup | #🎜 🎜#마우스버튼이 눌렸습니다|
onsubmit | 제출버튼이 눌렸습니다 |
window 또는 프레임 크기가 조정되었습니다 | |
# 🎜 🎜# | |
🎜🎜# | |
v-on directive | Function: DOM 이벤트를 수신하고 트리거될 때 트리거합니다. 일부 JavaScript 코드를 실행합니다. |
<template> <div> <p class="title1">{{title}}</p> <div class="div1"> <button v-on:click="clickme" >{{msg}}</button> </div> </div> </template> <script> export default { name: 'v-on', data() { return { msg: '点击我', title: 'v-on指令学习' } }, methods:{ clickme:function(){ alert("hello"); } } } </script> <style scoped> .title1 { text-align: left; } .div1{ float: left; } </style>
약식 코드 :
<template> <div> <p class="title1">{{title}}</p> <div class="div1"> <button @click="clickme" >{{msg}}</button> </div> </div> </template> <script> export default { name: 'v-on', data() { return { msg: '点击我', title: 'v-on指令学习' } }, methods:{ clickme(){ alert("hello"); } } } </script> <style scoped> .title1 { text-align: left; } .div1{ float: left; } </style>
예제 결과는 다음과 같습니다. 실제 상황에 따라 매개변수의 수와 형식을 전달할 수 있습니다. 간단한 코드 예는 다음과 같습니다. :
<template> <div> <p class="title1">{{title}}</p> <div class="div1"> <button @click="clickme('我是中文参数','woshiyingwencanshu',$event)" >{{msg}}</button> </div> </div> </template> <script> export default { name: 'v-on', data() { return { msg: '点击我', title: 'v-on指令学习' } }, methods:{ clickme(msg1,msg2,event){ console.log(msg1); console.log(msg2); console.log(event); } } } </script> <style scoped> .title1 { text-align: left; } .div1{ float: left; } </style>예제 결과는 다음과 같습니다 # 🎜🎜#요약: v-on은 많은 자바스크립트 이벤트를 바인딩할 수 있습니다. . 이 문서에서는 클릭 이벤트만 예로 들어 보겠습니다. 관련 권장 사항:
Vue의 조건부 렌더링 분석(코드 포함)
# 🎜🎜#
Vue의 v-model 지시어 분석(코드 포함)위 내용은 Vue에서 v-on 지시문의 단순 이벤트 바인딩 분석(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!