vue.js 데이터 바인딩 기본 구조 예시 / vue.js v-model / @click

1. 양방향 입력이므로 사용자가 input 태그에 값을 수정할 경우 해당 값이 input1 변수의 값으로 할당 됨

<template>
    <div>
        <h1>Home {{ title1 }}</h1>
    </div>
    <input type="text" v-model="input1"> <!-- 양방향 입력 가능-->
    <button type="button" @click="getData">get</button> <!-- onclick 과 같은 효과 (vue.js)-->
    <button type="button" @click="setData">set</button> 
</template>

<script>
    export default{
        data(){
            return{
            title1 : "제목1",
            title2 : "제목2",
            input1 : "input1",
            }
        },
        method : { // 자바스크립트의 모든 함수는 이곳에 선언
            getDate(){
                alert(this.input1);
            },
            setDate(){
                this.input1 = "set";
            },
        }
    }
</script>