VueJS day3

디렉티브(v-bind, v-model)

기본 디렉티브

디렉티브는 v- 접두어를 가진 attribute를 의미하며, 표현식에 직접 값을 넣거나 미리 정의해둔 뷰 인스턴스와 데이터 바인딩하여 반응적으로 표현식을 변경할 수 있다.

v-bind

뷰 인스턴스와 데이터나 이벤트를 바인딩하거나 하위 컴포넌트에 데이터를 전달 할 때 사용 가능하다.

<div id="app">
    <input v-bind:type="type" v-bind:value="inputData"><br>
    <a v-bind:href="getCoderLink('https://dict.')">네이버</a>
</div>

var app = new Vue({
    el:'#app',
    data: {
        type: 'number',
        inputData: '123',
        link:'naver.com'
    },
    methods: {
        getCoderLink(channel){
            return channel + this.link;
        }
    }
})

v-bind: 는 : 로 축약도 가능하다.

<input :type="type" :value="inputData"><br>
<a :href="getCoderLink('https://dict.')">네이버</a>

데이터의 이동 형태를 보면, 데이터에서 뷰로 이동하는 모습으로 이를 단방향 바인딩이라고 한다.

v-model

v-model은 데이터가 뷰로 이동할 뿐만 아니라 뷰에서도 데이터로 이동할 수 있는 모습으로 양방향 바인딩을 가능하게 해주는 디렉티브이다. 뷰 인스턴스와 양방향으로 바인딩해서 뷰 인스턴스의 data 또는 Input 태그를 통해 바인딩한 값을 수정할 수 있다.

<div id="app-6">
    <p></p>
    <input v-model="message">
</div>

var app6 = new Vue({
    el: '#app-6',
    data: {
        message: '안녕하세요 Vue!'
    }
})

이런 식으로 input에 입력하는 값(value)를 실시간으로 messgae가 받아와서 다시 p태크 내 에 전달해준다.