Vue 메소드 및 이벤트 핸들러에 대한 자세한 설명

이 글의 예시에서는 참고용으로 Vue 메소드와 이벤트 핸들러의 사용을 공유합니다. 구체적인 내용은 다음과 같습니다

키 수정자

키보드 이벤트를 수신할 때, keyCode를 감지해야 하는 경우가 종종 있습니다. Vue.js에서는 v-on에 키 수정자를 추가할 수 있습니다:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

모든 keyCode를 기억하기는 어렵습니다. Vue.js는 가장 일반적으로 사용되는 키에 대한 별칭을 제공합니다:

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

모든 키 별칭: Enter, Tab, delete, esc, space, up, down, left, right.

예:

HTML은 다음과 같습니다.

<template>
<div class="home-body">
 <div class="project-all">
 <template v-for=&#39;project in projectData&#39;>
 <div class="name" v-on:click=&#39;successT($index)&#39; v-bind:class="{&#39;success&#39;:project.success}">{{project.projectName}}</div>
 </template>
 <div class="name" v-if=&#39;addp&#39; v-on:click=&#39;addproject&#39;>新增项目</div>
 <div class="name" v-if=&#39;!addp&#39;>
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;请填写项目名称&#39; v-on:keyup.enter=&#39;saveProjectFun&#39; v-el:addProject>
 </div>
 <div class="name">
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;esc&#39; v-on:keyup.esc=&#39;escFun&#39;>
 </div>
 <div class="name">
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;delete&#39; v-on:keyup.delete=&#39;deleteFun&#39;>
 </div>
 <div class="name">
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;space&#39; v-on:keyup.space=&#39;spaceFun&#39;>
 </div>
 <div class="name">
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;up&#39; v-on:keyup.up=&#39;upFun&#39;>
 </div>
 <div class="name">
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;down&#39; v-on:keyup.down=&#39;downFun&#39;>
 </div>
 <div class="name">
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;left&#39; v-on:keyup.left=&#39;leftFun&#39;>
 </div>
 <div class="name"> 
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;right&#39; v-on:keyup.right=&#39;rightFun&#39;>
 </div>
 </div>
</div>
</template>

JS 코드:

<script>
export default {
 components: {
 
 },
 ready: function() {
  
 },
 methods: {
 //当你选种某个项目时，将其success属性改为true，为其class添加 success 
 successT:function(index){
 this.projectData.forEach(function(item){
 item.success=false;
 });
 this.projectData[index].success=true;
 },
 //点击添加项目后让其不显示
 addproject:function(){
 this.addp=false;
 }, 
 //当用户按回车后，保存添加的项目
 saveProjectFun:function(){
 var obj={}
 obj.success=false;
 let name=this.$els.addproject.value;
 obj.projectName=name.replace(/\s+/g,""); 
 this.projectData.push(obj);
 this.addp=true;
 },
 escFun:function(){
 alert("esc");
 },
 deleteFun:function(){
 alert("delete");
 },
 spaceFun:function(){
 alert("space空格键");
 },
 upFun:function(){
 alert("up");
 },
 downFun:function(){
 alert("down");
 },
 leftFun:function(){
 alert("left");
 },
 rightFun:function(){
 alert("right");
 }
 },
 data() {
 return {
 addp:true,//是否显示添加项目
 projectData:[{
  success:false,
  projectName: &#39;人员管理系统&#39;
  }, { 
  success:false,
  projectName: &#39;管理系统&#39;
  },{
  success:false,
  projectName: &#39;假数据1&#39;
  },{
  success:false,
  projectName: &#39;假数据2&#39;
  }, {
  success:false,
  projectName: &#39;假数据3&#39;
  }
 ],
 }
 }
}
</script>

페이지 시작 부분:

새 항목 클릭 시:

텍스트 상자에 "Doudou"를 입력하고 Enter 키를 누르면 돌아갑니다. 페이지로

Enter 키를 누르면 keyup.enter 이벤트가 트리거되어 saveProjectFun 메소드를 호출하고 이 메소드에 데이터가 저장됩니다.