VUE on

2022-01-22

v-on: 이벤트명: “함수 호출문” ===
선택자.이벤트명 = 함수 호출문() (X)
선택자.이벤트명 = 함수 호출문 (O)

1	<button onclick="함수 호출문();"></button>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06_vue_on</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!--
        v-on: 이벤트명: "함수 호출문" ===
        선택자.이벤트명 = 함수 호출문() (X)
        선택자.이벤트명 = 함수 호출문 (O)

        <button onclick="함수 호출문();"></button>
    -->

    <div id="app">
        <h2>{{resultMessage}}</h2>
        <button v-on:click="funcChange1">클릭</button>
        <!-- 마우스 오버시 h2 태그에 마우스가 올라갔어요 / 마우스 아웃시 h2 태그에 마우스가 나갔어요 -->
        <button v-on:mouseover="funcChange2" v-on:mouseout="funcChange3">커서를 올려보세요</button>
    </div>
    <script>
        new Vue({
            el : "#app", // 객체의 키값으로 인정 안함
            data : { // 객체의 키값으로 인정 안함
                resultMessage : "아래 버튼의 이벤트를 발생시키세요"
            },
            methods : { // 기존 자바스크립트에서 function의 역할을 담당
                funcChange1(){
                    console.log(this); // Vue를 구성한 인스턴스 객체
                    console.log(this.$el);
                    console.log(this.data); // 객체의 키값으로 인정 안함
                    console.log(this._data);
                    console.log(this._data.resultMessage); // 아래 버튼의 이벤트를 발생시키세요
                    console.log(this.resultMessage); // 아래 버튼의 이벤트를 발생시키세요
                    this.resultMessage = "마우스가 버튼을 클릭한 상태입니다.";
                },
                funcChange2() {
                    this.resultMessage = "마우스가 올라갔어요";
                },
                funcChange3() {
                    this.resultMessage = "마우스가 나갔어요";

                }
            }
        })
    </script>
</body>
</html>

REFERENCE
뷰(Vue.js) 프로그래밍 과정 _ 하이미디어 아카데미