Vue.js 템플릿 문법

정리/Vue.js

Vue.js 템플릿 문법

알렉스 페레이라 2023. 9. 22. 09:42

Vue.js의 템플릿 문법이란 Vue.js로 화면을 조작하는 방법을 의미한다.

템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.

데이터바인딩

데이터 바인딩은 Vue.js 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다. 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag) {{}}.

//Vue.js 3버전
Vue.createApp({
  data() {
    return {
      message: 'Hello Vue.js'
    }
  }
})

div 태그에 콧수염 괄호를 이용해 뷰 인스턴스의 message 속성을 연결했다. 코드를 실행하면 화면에 Hello Vue.js라는 코드가 출력됨.

Computed

'계산된'이라는 뜻으로 데이터바인딩시 데이터를 가공하고자 할 때 사용하는 속성이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{num}}</p>
        <p>{{doubleNum}}</p>
    </div>

    <script src="https://unpkg.com/vue@3"></script>
    <script>
        var vm = Vue.createApp({
            data(){
                return{
                    num:10
                }
            },
            computed:{
                doubleNum: function(){
                    return this.num * 2;
                }
            }
        });
        vm.mount('#app');
    </script>
</body>
</html>

디렉티브

디렉티브는 Vue.js로 화면의 요소를 더 쉽게 조작하기 위한 문법이다. 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있는데, 예를 들어 아래와 같이 특정 속성 값에 따라 화면의 영역을 표시하거나 표시하지 않을 수 있음.

예시1 : v-if

<div>
  Hello <span v-if="show">Vue.js</span>
</div>

Vue.createApp({
  data() {
    return {
      show: false
    }
  }
})

위의 코드는show라는 데이터 속성 값에 따라 Vue.js 텍스트가 출력되거나 되지 않는 코드이다.

예시2 : v-for

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

Vue.createApp({
  data() {
    return {
      items: ['shirts', 'jeans', 'hats']
    }
  }
})

v-for 디렉티브를 활용하면 데이터 속성의 개수만큼 화면의 요소를 반복하여 출력할 수 있는데, 목록을 표시해야 할 때 유용하게 사용할 수 있는 기능.

예시3 : v-bind

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

var vm = Vue.createApp({
    data(){
        return{
            num:10,
            uuid: 'abc1234'
        }
    },
    computed:{
        doubleNum: function(){
            return this.num * 2;
        }
    }
});
vm.mount('#app');

예시4 : v-show

    <div id="app">
        <p v-bind:id="uuid" v-bind:class="className">{{num}}</p>
        <p>{{doubleNum}}</p>
        <button v-on:click="login()">login</button>
        <div v-if="loading">
            Loading...
        </div>
        <div v-else>
            test user has been logged in
        </div>
        <div v-show="loading">
            Loading...
        </div>
    </div>

v-if를 사용한다면 값이 거짓일때 해당태그를 그리지 않지만,

v-show속성을 사용한다면 값이 거짓이어도 해당 태그를 그리고 스타일에 display:none을 부여한다.

이외에도 자주 사용되는 디렉티브는 다음과 같다.

v-on
v-model

모르는 문법이 나왔을때

1.Vue.js 공식사이트에 접속한다.

https://vuejs.org/

Vue.js - The Progressive JavaScript Framework | Vue.js

Versatile A rich, incrementally adoptable ecosystem that scales between a library and a full-featured framework.

vuejs.org

2.원하는 내용을 검색. 나같은 경우에는 input태그에 입력된값을 p태그에 바로 반영하는 기능을 만드려 한다.

3.상세한 설명과 함께 실제로 사용해볼 수 있는 예시도 작성되어있다

4.코드를 작성한다.

<input type="text" v-model="text">
<p>{{text}}</p>

var vm = Vue.createApp({
    data(){
        return{
            num:10,
            uuid: 'abc1234',
            className: 'text-blue',
            loading:true,
            text:''
        }
    },
    computed:{
        doubleNum: function(){
            return this.num * 2;
        }
    }
});

5.성공!

Vue.js는 나온지 얼마되지 않은기술이라 그런지 문서화가 상당히 깔끔하게 되어있다.

저작자표시

'정리 > Vue.js' 카테고리의 다른 글

Vue Cli란? (0)	2023.09.25
Vue.js 템플릿 문법 - watch (0)	2023.09.22
Vue.js에서 ajax사용하기 / axios란? (0)	2023.09.21
Vue.js 2와 Vue.js3의 차이 (0)	2023.09.21
Vue.js 라우터란? (0)	2023.09.20

현재글Vue.js 템플릿 문법

알렉스 페레이라의 격투 블로그