Develop/Vue

Vue 템플릿

김니은　 2020. 1. 26. 21:33
반응형

뷰 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성입니다.

사용자가 볼 수 없지만, 라이브러리 내부적으로 Template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환합니다.

​

​

​

 

데이터 바인딩

 

HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미합니다.

 

 

{{ }} 방식

 

이전 글에서 자주 봤던 방식입니다.

{{ message }} 를 이용하여 script 내의 data와 연결하여 사용했습니다.

message 값을 바꾸면 Vue 반응성에 의해 화면이 자동적으로 갱신됩니다.

​

​

만약 Vue 데이터가 변경 되어도 값을 바꾸고 싶지 않으면 v-once 속성을 사용하시면 됩니다.

ex) <div id = "app" v-once> {{ message }} </div>

​

​

 

 

v-bind 방식

아이디, 클래스, 스타일 등의 HTML 속성 값에 Vue 데이터 값을 연결할 때 사용하는 데이터 연결 방식입니다.

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name ="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      <p v-bind:id="ID">ID Binding</p>
      <p v-bind:class="LEVEL">Level Binding</p>
      <p v-bind:style="COLOR">Color Binding</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          ID: 'container',
          LEVEL: 5,
          COLOR: 'color: blue'
        }
      });
    </script>
  </body>
</html>

 

 

id와 class, style의 앞에 v-bind를 붙여 Vue 인스턴스에 정의한 속성과 연결하여 화면에 표시합니다.

​

​

데이터 속성의 값들이 화면 요소에 연결되어 나타난 것을 확인할 수 있습니다.

※ v-bind: 문법을 :로 간소화할 수 있습니다.

​

​

​

 

Vue 디렉티브

 

HTML 태그 안에 v- 접두사를 가진 모든 속성을 의미합니다.

화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능입니다.

Vue의 데이터 값이 변경되었을 때 화면의 요소들이 Reactive하게 반응하여 변경된 데이터 값에 따라 갱신됩니다.

v-if

지정한 Vue 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 하지 않습니다.

v-for

지정한 뷰 데이터 개수만큼 해당 HTML 태그를 반복 출력합니다.

v-show

데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않습니다.

v-bind

HTML 태그의 기본 속성과 Vue 데이터 속성을 연결합니다.

v-on

화면 요소의 이벤트를 감지하여 처리할 때 사용합니다.

v-model

Form에 입력한 값을 Vue 인스턴스 데이터와 즉시 동기화합니다.

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name ="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      <a v-if="flag">True Vue.js</a>
      <ul>
        <li v-for="num in IOS">{{ num }}</li>
      </ul>
      <p v-show="flag">check</p>
      <h4 v-bind:id="check_id">Test vue</h4>
      <button v-on:click="Alert">Alert</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          flag: true,
          IOS: ['Macbook', 'AppleWatch', 'Iphone'],
          check_id: 10
        },
        methods: {
          Alert: function() {
            return alert('check alert');
          }
        }
      });
    </script>
  </body>
</html>

 

· v-if : flag 값이 true이기에 표시됩니다.

· v-for : Vue 데이터 IOS 값 모두 출력합니다.

· v-show : flag 값이 true이기에 표시됩니다.

· v-bind : check_id 속성을 연결합니다.

· v-on : 경고 창을 출력합니다.

​

​

 

해당 코드 실행 결과 화면입니다.

​

​

경고 창을 좀 더 자세히 알아봅시다.

 

...
  <body>
    <div id="app">
      <button v-on:click="Alert(5)">Alert</button>
    </div>
...
    <script>
      new Vue({
        el: '#app',
        methods: {
          Alert: function(num) {
            return alert('check alert ' + num);
          }
        }
      });
...

 

 

이와 같이 인자를 받아 경고 창 메세지를 생성할 수 있습니다.

​

​

 

​

고급 Template 기법

실재 애플리케이션을 개발할 때 유용한 속성입니다.

​

computed 속성

복잡한 데이터 연산들을 정의하는 영역입니다.

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name ="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      <p> {{ reverse_message }} </p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello! Kimn!'
        },
        computed: {
          reverse_message: function() {
            return this.message.split('').reverse().join('');
          }
        }
      });
    </script>
  </body>
</html>

위와 같이 해당 함수를 computed 속성에 정의하면 HTML 코드를 잘 정돈되어 작성할 수 있습니다.

​

​

watch 속성

데이터 변화를 감지하영 자동으로 특정 로직을 수행합니다.

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name ="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      <p> <input v-model="message"> </p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello! Kimn!'
        },
        watch: {
          message: function(data) {
            console.log("Change message : ", data);
          }
        }
      });
    </script>
  </body>
</html>

 

Input Box의 입력 값을 v-model 디렉티브로 연결하여 입력 값이 변화가 있을 때 console에 값을 출력합니다.

반응형
저작자표시