[Vue.js]02 - 디렉티브, 이벤트 핸들링

Home.vue

• v-model  : 쌍방향 데이터 바인딩. 폼(form)에서 주로 사용. <input>,<select>,<textarea> 태그에만 사용가능하다.  
• @click : 이벤트 핸들링 수행 -> onclick과 같음  methods를 호출해서 사용가능
• v-for : 배열 형식으로 표현할 때 사용, html 태그를 반복 출력
• watch : 데이터가 실시간으로  변경될 때 감지 
• beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed -> life cycle 
• console로 찍어볼 때 set을 누르는 경우  beforeUpdate, updated만 찍히는 걸 알 수 있음
• 데이터에 접근할 때 html코드 안에서 접근하는 경우 {{ }} 중괄호 두개로 표현하고 element 안에서 attribute 적용을 할 때는 : 세미콜론으로 표현
• v-model="region" : selectBox에서 default 값으로 설정할 수 있음.
• @change : 이벤트를 걸 때 사용. methods를 통해 값을 전환시킬 수 있음
• v-if: 조건이 만족하면 데이터 렌더링을 해줌 => 즉 tableShow : false 인 경우 테이블이 보이지 않음. 
• v-show: : v-if와 비슷하나 show는 데이터 렌더링이 다 됨. 다만 show&hide 처럼 보이거나 숨겨진다.

 

<template>
    <div>
        <h1>Welcome to {{title2}}!</h1>
        <input type="text" v-model="input1"/>
        <button type="button" @click="getData">Get</button>
        <button type="button" @click="setData">Set</button>

        <select class="form-control" v-model="region">
            <option :key="i" :value="d.v" v-for="(d,i) in options">{{d.t}}</option>
        </select>

    </div>
</template>
<script>
export default {
    data() {
     return {
        title:"오늘은 화요일",
        title2:"Seoul",
        input1:"abcdddddd",
        options: [
            {v:"S",t:"Seoul"},
            {v:"J",t:"Jeju"},
            {v:"B",t:"Busan"},
        ],
        region: "J"
     };    
    },
    watch: {
        input1() {
            console.log(this.input1);         
        }
    },

    methods: {
        getData() {
            alert(this.input1);
        },
        setData() {
            this.input1 = "12345";
        }
    },
    beforeCreate(){
        console.log("beforeCreate");
    },
    created(){
        console.log("created");
    },
    beforeMount(){
        console.log("beforeMount");
    },
    mounted(){
        console.log("mounted");
    },
    beforeUpdate(){
        console.log("beforeUpdate");
    },
    updated(){
        console.log("updated");
    },
    beforeDestroy(){
        console.log("beforeDestory");
    },
    destroyed(){
        console.log("destroyed");
    }
};
</script>