[Vue] 이벤트 연결

v-on

- 버튼을 클릭하거나 키를 입력 하여 이벤트가 발생 할 때 Vue 메소드를 실행시키는 이벤트 핸들러

- v-on은 자주 사용되는 디렉티브이므로 v-on 대신 @을 사용할 수있다.

- HTML : <태그명 v-on:이벤트="메소드명"> or <태그명 @:이벤트="메소드명">

- JS : new Vue({ el:"#ID명", data:{프로퍼티명:값}, methods:{메소드명 : function( ){실행내용} }})

※ Vue 옵션

- el 옵션 : 어떤 HTML요소에 연결할지

- data 옵션 : 어떤 데이터를 연결할지

- methods옵션 : 어떤 함수를 연결할지

---

버튼을 클릭했을 때

- 버튼 클릭시 Vue 인스턴스의 메소드를 실행하는 처리를 만들 수 있다.

- 메소드를 실행한 후 버튼의 상태를 비활성화가 되도록 할 수 있다.

- <button v-on:click="메소드명">

<div id="app">
  <h2>클릭하면 값을 변경하는 예제</h2>
  <p>{{ count }}</p>
  <button v-on:click="countUp">1씩증가</button>

  <h2>클릭하면 비활성화되는 예제</h2>
  <button value="disable" v-bind:disabled="isClick" v-on:click="oneClick">
    비활성화하기
  </button>
</div>

<script>
  function dis() {
    alert("비활성 되었습니다.");
  }
  new Vue({
    el: "#app",
    data: {
      count: 0,
      isClick: false,
    },
    methods: {
      countUp: function () {
        this.count++;
      },
      oneClick: function () {
        this.isClick = true;
        dis();
      },
    },
  });
</script>

 

파라미터를 전달하여 메소드 실행하기

- methods: 에 작성할 메소드에 파리미터를 전달할 수 있다.

- <button v-on:click="메소드명(파라미터)">

<h2>클릭하면 지정된 값만큼 증가 시키는 예제</h2>
<div id="app">
    <p>{{ count }}</p> 
    <button v-on:click="countUp(3)">3증가</button>
    <button v-on:click="countUp(10)">10증가</button>
    <button v-on:click="countUp(100)">100증가</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            count:0
        },
        methods: {
            countUp: function(value) {
                this.count += value;
            }
        }
    })
</script>

 

키입력

- 키가 입력될 때 Vue 인스턴스의 메소드를 실행하는 처리를 만들 수 있다.

- 키 수식자를 지정하지 않으면 아무 키나 입력해도 메소드가 실행되므로 특정키를 입력했을 때만 반응하도록 하기 위해서는 반드시 키 수식자를 지정해야 한다.

- 이벤트에 시스템 수식자 키를 추가하면 시스템 키를 누르며 동시에 다른 키를 눌렀을 때(또는 클릭했을 때)만 메소드를 호출할 수 있다.

- <input v-on:keyup.키수식자="메소드명">

- <input v-on:keyup.키수식자.키수식자="메소드명">

※ 키 수식자

.enter	.space	.left	.right
.delete	.tab	.48~.57(0~9)	.65~.90(A~Z)
.down	.up.	.esc

※ 시스템 수식자 키

.ctrl

.alt

.shift

.meta(Windows : Winodw키, macOS: command키)

<div id="app">
    <h2>[Enter] 키를 누르면 얼럿을 표시하는 예제</h2>
    <input v-on:keyup.enter="showAlert" v-model="myText">
    <p>{{ myText }}</p>
    
    <h2>[Shift] + [Enter] 키를 누르면 얼럿을 표시하는 예제</h2>
    <input v-on:keyup.enter.shift="showAlert2" v-model="myText2">
    <p>{{ myText2 }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            myText: '',
            myText2: ''
        },
        methods: {
            showAlert: function() {
                alert("Enter 를 눌렀습니다.\n" + this.myText);
            },
            showAlert2: function() {
            	alert("Shift + Enter 를 눌렀습니다.\n" + this.myText2);
            }
        }
    })
</script>