Vue에서 v-on 지시문의 단순 이벤트 바인딩 분석(코드 포함)

不言

풀어 주다： 2018-07-27 13:21:00

원래의

3431명이 탐색했습니다.

이 글에서는 Vue(코드 포함)에서 v-on 명령의 간단한 이벤트 바인딩 분석을 소개합니다. 참고할 만한 가치가 있고 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

Preface

JavaScript에서 모든 DOM 요소에는 자체 이벤트 객체가 있습니다. 이벤트 객체는 이벤트와 같은 이벤트 상태를 나타냅니다. 키보드 키 상태, 마우스 위치, 마우스 버튼 상태 등이 발생했습니다. 이벤트는 이벤트가 발생할 때까지 실행되지 않는 함수와 함께 사용되는 경우가 많습니다. JavaScript의 일반적인 이벤트 핸들러(이벤트 처리기)에는 주로 다음이 포함됩니다.

필드 내용이 변경됨ondblclick사용자가 개체를 두 번 클릭하면 호출되는 이벤트 핸들러 에디토리얼 🎜🎜# 키보드 키를 눌렀다가 뗐다onload페이지나 이미지가 로드됩니다 🎜#마우스가 특정 요소에서 움직였습니다재설정 버튼이 클릭되었습니다#🎜🎜 # onselect텍스트가 선택됨onunload 사용자 종료 페이지#🎜 🎜#사용자가 객체를 클릭할 때 이벤트 핸들러는 onerror문서를 로드하는 동안 오류가 발생했습니다. image onkeydown특정 키보드 키를 눌렀습니다onkeyup# 🎜🎜#onmousedown#🎜 🎜#onmouseout# 🎜🎜#마우스가 요소에서 멀어졌습니다#🎜 🎜#마우스버튼이 눌렸습니다# 🎜🎜## 🎜🎜#onresizewindow 또는 프레임 크기가 조정되었습니다#🎜 🎜# #🎜 🎜## 🎜 🎜# 🎜🎜# #🎜 🎜# # 🎜🎜#Usage: v-on에 바인딩된 이벤트 함수는 일반적으로 메소드 객체에 작성됩니다. 사용 단계는 다음과 같습니다: 1. 이벤트 바인딩, 2. 이벤트 구현, 3. 이벤트 트리거.

속성 이름	설명(이벤트가 발생한 시점에 해당... )
onabort	이미지 로딩이 중단되었습니다
onchange# 🎜 🎜#

	#🎜🎜 #onmousemove
	onreset


onblur	요소가 포커스를 잃음
onclick#🎜 🎜#


특정 키보드 키를 눌렀습니다. Release
마우스 버튼을 눌렀습니다
	onmouseup
onsubmit	제출버튼이 눌렸습니다





v-on directive	Function: DOM 이벤트를 수신하고 트리거될 때 트리거합니다. 일부 JavaScript 코드를 실행합니다.

v-on 명령 매개변수 없는 클릭 이벤트 바인딩:

전체 코드는 다음과 같습니다.

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  v-on:click="clickme" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
    export default {
        name: &#39;v-on&#39;,
      data() {
          return {
            msg: &#39;点击我&#39;,
            title: &#39;v-on指令学习&#39;
          }
      },
      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: &#39;v-on&#39;,
    data() {
      return {
        msg: &#39;点击我&#39;,
        title: &#39;v-on指令学习&#39;
      }
    },
    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(&#39;我是中文参数&#39;,&#39;woshiyingwencanshu&#39;,$event)" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
  export default {
    name: &#39;v-on&#39;,
    data() {
      return {
        msg: &#39;点击我&#39;,
        title: &#39;v-on指令学习&#39;
      }
    },
    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은 많은 자바스크립트 이벤트를 바인딩할 수 있습니다. . 이 문서에서는 클릭 이벤트만 예로 들어 보겠습니다.