LittleDeveloper

2. Vue.js 기초 (3) 본문

vue.js

2. Vue.js 기초 (3)

lemonjelly 2021. 12. 29. 17:11

2.4 기타 디렉티브

주요 디렉티브들은 모두 다루었으니 나머지 디렉티브들을 알아보자.

1) v-pre

: HTML 요소에 대한 컴파일을 수행하지 않는다.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="simple">
        <h2 v-pre>{{message}}</h2>
    </div>
    <script type="text/javascript">
        var model = {
            message: "첫 번째 Vue.js 앱입니다.",
        };

        var simple = new Vue({
            el: "#simple",
            data: model,
        });
    </script>
</body>

</html>

v-pre 디렉티브를 사용하지 않았다면 콧수염 표현식을 사용해 message 속성의 값이 화면에 바인딩되어 나타나겠지만 v-pre 디렉티브로 인해 Vue 객체는 컴파일하지 않고 {{message}} 문자열이 그대로 출력된다. 이렇게 템플릿 문자열을 컴파일하지 않고 그대로 내보내기 위해 v-pre를 사용한다!

 

v-pre를 사용한 결과

 

2) v-once

: HTML 요소를 단 한 번만 렌더링한다. 

    <div id="simple">
        <h2 v-once>{{message}}</h2>
    </div>
    <script type="text/javascript">
        var model = {
            message: "첫 번째 Vue.js 앱입니다.",
        };

        var simple = new Vue({
            el: "#simple",
            data: model,
        });
    </script>

v-once를 사용한 결과

 

콘솔 창에서 message를 수정해도 화면에 수정사항이 출력되지 않는다. 즉, v-once 디렉티브는 처음 한 번만 렌더링을 수행하므로 Vue 인스턴스의 데이터를 변경하더라도 다시 렌더링을 수행하지 않는다.

=> 초기값이 주어지면 변경되지 않는 UI를 만들 때 사용할 수 있다.

 

 

 

2.5 계산형 속성

앞에서 v-bind 디렉티브를 이용한 간단한 데이터 바인딩을 살펴보았다. 하지만 연산 로직이 필요한 경우, 이 방법만으로 해결하기 쉽지 않았다. 

Vue.js 의 계산형 속성(Computed Property) 은 이러한 문제를 해결하는 방법 중의 하나이다. Vue 객체를 만들 때 computed라는 속성과 함께 함수를 등록해주면 마치 속성처럼 이용할 수 있다. 

 

    <!--예제 2-13-->
    <div id="example">
        <input type="text" v-model="num" /> <br />1부터 입력된 수까지의 합:
        <span>{{sum}}</span>
    </div>
    <script type="text/javascript">
        var vmSum = new Vue({
            el: "#example",
            data: {
                num: 0,
            },
            computed: {
                sum: function() {
                    var n = Number(this.num);
                    if (Number.isNaN < n || n < 1) return 0;
                    return ((1 + n) * n) / 2;
                },
            },
        });
    </script>

 

예제 2-13 실행 결과

예제 2-13 에서 주의사항이 2가지 있다.

1. 함수 내부에서의 this 값에 대한 것이다. 함수 안에서 this는 Vue 객체 자신을 참조한다. 그런데 함수 내부에서 다른 콜백 함수를 실행하면, this가 다른 값으로 연결될 수 있으므로 주의해야 한다. 이 점에 대해서는 예제 02-15에서 다시 한번 살펴보자.

 

2. 데이터 타입: num 값이 number 타입이라 생각하기 쉽지만 HTML 요소 내부에서는 모두 문자열로 다루어진다. 따라서 Number() 함수나 parseInt() 함수를 이용해 명시적으로 숫자 값으로 변환해줘야 한다.

 

 

이제 지금까지 배운 내용을 토대로 추가 예제를 만들어보자.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>02-16</title>
    <style>
        #list {
            width: 400px;
            border: 1px solid black;
            border-collapse: collapse;
        }
        
        #list td,
        #list th {
            border: 1px solid black;
            text-align: center;
        }
        
        #list>thead>tr {
            color: yellow;
            background-color: purple;
        }
    </style>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>

<body>
    <div id="exmaple">
        <p>
            국가명 :
            <input type="text" v-model="countryname" placeholder="국가명" />
        </p>
        <table id="list">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>국가명</th>
                    <th>수도</th>
                    <th>지역</th>
                </tr>
            </thead>
            <tbody id="contacts">
                <tr v-for="c in filtered">
                    <td>{{c.no}}</td>
                    <td>{{c.name}}</td>
                    <td>{{c.capital}}</td>
                    <td>{{c.region}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        var model = {
            countryname: "",
            countries: [{
                no: 1,
                name: "미국",
                capital: "워싱턴DC",
                region: "america"
            }, {
                no: 2,
                name: "프랑스",
                capital: "파리",
                region: "europe"
            }, {
                no: 3,
                name: "영국",
                capital: "런던",
                region: "europe"
            }, {
                no: 4,
                name: "중국",
                capital: "베이징",
                region: "asia"
            }, {
                no: 5,
                name: "태국",
                capital: "방콕",
                region: "asia"
            }, {
                no: 6,
                name: "모로코",
                capital: "라바트",
                region: "africa"
            }, {
                no: 7,
                name: "라오스",
                capital: "비엔티안",
                region: "asia"
            }, {
                no: 8,
                name: "베트남",
                capital: "하노이",
                region: "asia"
            }, {
                no: 9,
                name: "피지",
                capital: "수바",
                region: "oceania"
            }, {
                no: 10,
                name: "솔로몬 제도",
                capital: "호니아라",
                region: "oceania",
            }, {
                no: 11,
                name: "자메이카",
                capital: "킹스턴",
                region: "america"
            }, {
                no: 12,
                name: "나미비아",
                capital: "빈트후크",
                region: "africa"
            }, {
                no: 13,
                name: "동티모르",
                capital: "딜리",
                region: "asia"
            }, {
                no: 14,
                name: "멕시코",
                capital: "멕시코시티",
                region: "america"
            }, {
                no: 15,
                name: "베네수엘라",
                capital: "카라카스",
                region: "america",
            }, {
                no: 16,
                name: "서사모아",
                capital: "아피아",
                region: "oceania"
            }, ],
        };

        var clist = new Vue({
            el: "#exmaple",
            data: model,
            computed: {
                filtered: function() {
                    var cname = this.countryname.trim();
                    return this.countries.filter(function(item, index) {
                        if (item.name.indexOf(cname) > -1) {
                            return true;
                        }
                    });
                },
            },
        });
    </script>
</body>

</html>

*배열 데이터와 Vue 객체를 작성한다.

*배열 데이터에 의해 반복할 <tr>요소를 v-for 디렉티브로 처리한다.

*국가명을 입력할 필드는 v-model 디렉티브를 이용해 양방향 바인딩한다. =>텍스트 필드에 입력한 값은 countryname에 즉시 반영되고 국가 정보 리스트는 filtered 계산형 속성에 의해 필터링된 데이터만 나타나게 된다.

 

*배열의 filter 메서드는 배열의 아이템 중 조건을 만족하는 아이템을 모아서 새로운 배열을 만들어 리턴하는 기능을 수행한다. filter 메서드는 함수를 인자로 전달하고 이 함수는 다시 2개의 인자를 전달받는데, 첫 번째 인자가 배열의 아이템(item), 두 번째 인자가 index 번호이다.  

 

 

**** indexOf 함수??

string.indexOf(searchvalue, position)
  • 문자열(string)에서 특정 문자열(searchvalue)을 찾고, 검색된 문자열이 '첫번째'로 나타나는 위치 index를 반환
  • 파라미터
    • searchvalue : 필수 입력값, 찾을 문자열
    • position : optional, 기본값은 0, string에서 searchvalue를 찾기 시작할 위치
  • 찾는 문자열이 없으면 -1을 리턴하며, 문자열을 찾을 때 대소문자를 구분함.

출처: https://hianna.tistory.com/379 [어제 오늘 내일]

 

 

예제 2-19 실행 결과

 

** 2장을 마무리하며...

1) Vue.js 는 기본적으로 data 에 주어진 값(속성)을 화면으로 바인딩할 수 있다.

2) 복잡한 로직이 필요하다면, 계산형 속성을 이용할 수 있다.

 

'vue.js' 카테고리의 다른 글

배열 데이터를 변경하는 경우  (0) 2021.12.29
2. Vue.js 기초 (2)  (0) 2021.12.29
2. Vue.js 기초 (1)  (0) 2021.12.28
1. Vue.js를 시작하며  (0) 2021.12.28
'vue.js' Related Articles more