VueJS day8

이벤트

이벤트

v-on 디텍티브를 사용하면 DOM 이벤트를 듣고 반응할 수 있다.

<div id="app">
    <button v-on:click="alert">클릭</button>
</div>

var app = new Vue({
    el: '#app',
    data: {

    },
    methods: {
        alert(){
            alert('안녕');
        }
    }
})

<div id="app">
    
    <button v-on:click="plus">더하기</button>
    <button v-on:click="minus">빼기</button>
</div>

var app = new Vue({
    el: '#app',
    data: {
        year: 2022
    },
    methods: {
        plus(){
            this.year++;
        },
        minus(){
            this.year--;
        }
    }
})

연속적으로 year의 값이 최신화되는것이 확인 가능하다.

<div id="app">
    <p></p>
    <button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: '안녕하세요! Vue.js!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})