Written by 최태열
on January 21, 2021

Vue directive

v-bind

1. element의 속성에 binding을 위한 속성

2. 이미지 tag의 속성 + input tag의 속성에 적용

3. 함축 표현식 - v-bind 생략해도 동일한 binding 적용

<div id="app">
    <img :src="imgSrc"> <br>
    <input type="text" v-bind:value="message"><br>
    <input type="text" :value="message"><br>

    <a :href="link" target="_blank">구글</a>
</div>

<script>
    let model = {
        message: "v-bind directive",
        imgSrc: "images/lion.png",
        link: "https://www.google.com/"
    }

    let vm = new Vue({
        el: "#app",
        data: model
    });
</script>

massage이 변경되면 v-bind된 element 의 값이 변경된다.

하지만 반대로 v-bind된 element의 value가 바뀌어도 message 값 자체는 변하지 않는다.

v-model

1. HTML 요소에서 양방향 바인딩 작업 가능

2. 이름을 입력하면 특정 div tag에 값이 출력

<div id="app2">
    <input type="text" v-model.lazy="name" placeholder="이름을 입력하세요."><br>
    이름 : <div v-text="name"></div>
</div>
<script>
    let name = {
        name: "최태열"
    }

    let vm2 = new Vue({
        el: "#app2",
        data: name
    })
</script>

name을 변경하면 element의 값도 변경된다.

또한, element의 값을 변경해도 name의 값이 변경된다.

<div id="app3">
    <label for="cars">Choose a car:</label>

    <select name="cars" id="cars" v-model="car">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
    <br>
    <span v-text="car"></span>
    <span v-html></span>
</div>

<script>
    let cars = {
        car: "volvo"
    }

    let vm3 = new Vue({
        el: "#app3",
        data: cars
    })
</script>

select된 값이 car에 들어간다.

v-text 는 car에 있는 텍스트 그 자체를 출력하고

v-html은 car에 있는 텍스트를 html로 번역하여 출력한다.

<div id="app4">
    <input type="checkbox" id="vehicle1" name="vehicle" value="Bike" v-model="vehicle">
    <label for="vehicle1"> I have a bike</label><br>
    <input type="checkbox" id="vehicle2" name="vehicle" value="Car" v-model="vehicle">
    <label for="vehicle2"> I have a car</label><br>
    <input type="checkbox" id="vehicle3" name="vehicle" value="Boat" v-model="vehicle">
    <label for="vehicle3"> I have a boat</label><br>

    <span></span>
</div>

<span id="app4View" v-text="vehicle"></span>

<script>
    let model4 = {
        vehicle: []
    }

    let vm4 = new Vue({
        el : "#app4",
        data : model4
    })

    let vm5 = new Vue({
        el : "#app4View",
        data : model4
    })
</script>

checkbox 같은 element에 다중으로 v-model을 걸고 상대값을 배열로 설정하면

선택한 값들이 모두 배열로 들어가게 된다.

Discussion and feedback

← → Top