21. 뷰 디렉티브와 v-bind

freejia·2021년 10월 15일

vue.js

야금야금 Vue.js

목록 보기

20/29

캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다.
매일 20분 야금야금 Vue.js 화이팅.

IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools

v-bind로 DOM의 id를 관리해보자

div태그 에 id 를 app이라고 정했다.
p태그에도 내가 원하는 id를 abc123으로 넣어보자.

    <div id="app">
        <p id="abc123">{{ num }}</p>
    </div>

v-bind로 id를 관리하면 key:value 쌍으로 변수와 값을 할당할 수 있다.
즉, abc1234이라는 값에 uuid라는 이름을 붙여주는 것이다.

    <div id="app">
        <p v-bind:id="uuid">{{ num }}</p>
    </div>

뷰 인스턴스 data 속성에 uuid라는 변수의 값을 'abc1234'으로 정의하자.

        new Vue({
            el: '#app',
            data: {
                num: 10,
                uuid: 'abc1234'
            }
        })

개발자 도구 뷰 탭에서 v-bind 확인하기

uuid라는 키에 'abc1234'라는 값이 할당되어 있다.

개발자 도구 Elements 탭에서 v-bind 확인하기

html 코드로 변환된 id는 uuid의 값인 abc1234가 들어갔다.
아래의 두 p태그는 같은 의미다.

        <p v-bind:id="uuid">{{ num }}</p>
        
        <p id="abc1234"></p>

클래스 바인딩

v-bind:class="" 를 이용하여 클래스 바인딩이 가능하다.

뷰 인스턴스의 data속성에 name: 'text-blue' 를 추가하자.
name이라는 키를 클래스 바인딩할 수 있다.

<body>
    <div id="app">
        <p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num: 10,
                uuid: 'abc1234',
                name: 'text-blue'
            }
        })
    </script>
</body>

개발자 도구의 Elements 탭을 확인해보자.
아래와 같이 class="text-blue"로 만들어져있다.

v-if 와 v-else

보편적인 if/else문을 생각하자.

로딩중일 때, 로딩이 완료되었을 때 보여주는 텍스트를 다르게 만들어보자.
loading이 true일 때는 "Loading" 문자를 보여주고,
loading이 false일 때는 "test user has been logged in " 문자를 보여주자.

    <div id="app">
        <div v-if="loading">
            Loading...
        </div>
        <div v-else>
            test user has been logged in 
        </div>
    </div>

v-if에 넣을 loading 데이터를 true로 초기화 하자.

      <script>
        new Vue({
            el: '#app',
            data: {
                loading: true
            }
        })
    </script>

v-디렉티브가 붙으면, 뷰는 data 속성이나 computed 속성을 확인한다.

true/false 값을 가진 data 속성 바꿔보기

뷰 개발자 도구를 켜서 loading을 확인하면, true/false 값을 가지므로 체크박스로 제어할 수 있다.
체크 박스를 클릭하면 true <-> false가 바뀐다.

false로 바꾸면 v-else 쪽의 div가 보인다.

v-if 와 v-show

"Loading"이 안보이도록 loading의 값을 false 로 뒀다.

그리고 v-show를 추가하자.

    <div id="app">
        <div v-if="loading">
            Loading...
        </div>
        <div v-else>
            test user has been loagged in 
        </div>
        <div v-show="loading">
            Loading...
        </div>
    </div>

"Loading"은 false로 아예 HTML코드가 보이지 않지만,
v-show로 지정한 태그는 display: none 으로 DOM에 존재한다는 차이가 있다.

실습한 전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
        <p>{{ doubleNum }}</p>
        <div v-if="loading">
            Loading...
        </div>
        <div v-else>
            test user has been loagged in 
        </div>
        <div v-show="loading">
            Loading...
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num: 10,
                uuid: 'abc1234',
                name: 'text-blue',
                loading: true
            },
            computed: {
                doubleNum: function(){
                    return this.num * 2; 
                }
            }
        })
    </script>
</body>
</html>