송민준의 개발노트

뷰 템플릿 본문

웹/Vue

뷰 템플릿

송민준 2020. 2. 9. 16:33

뷰 템플릿?

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

 

템플릿 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환한다. 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 한다.

 

사용 안한 경우

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app">
      <h3>{{message}}</h3>
    </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>
      new Vue({
        el: '#app',
        data: {
          message : 'Hello Vue.js!'
        }
      })
    </script>
  </body>
</html>

 

사용한 경우

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app">
    </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>
      new Vue({
        el: '#app',
        data: {
          message : 'Hello Vue.js!'
        },
        template: '<h3>{{message}}</h3>'
      });
    </script>
  </body>
</html>

 

템플릿에서 사용하는 뷰의 속성과 문법

1. 데이터 바인딩

 데이터 바인딩은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다. 주요 문법으로는 {{}}문법과 v-bind 속성이 있다.

{{}} 은 위 예제에서 message가 바뀌면 반응성에 의해 화면이 자동으로 갱신되는데 갱신되는 것을 원하지 않으면 v-once 사용

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

v-bind

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app">
      <p v-bind:id="idA">아이디 바인딩</p>
      <!-- <p :id="idA">간소화 바인딩</p> -->
      <p v-bind:class="classA">클래스 바인딩</p>
      <p v-bind:style="styleA">스타일 바인딩</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          idA: 10,
          classA: 'container',
          styleA: 'color:blue'
        }
      });
    </script>
  </body>
</html>

2. 자바스크립트 표현식

주의점

1. 선언문과 분기 구문은 사용할 수 없음.

2. 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 결과만 표시해야 함.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <p>{{ message + "!!!"}}</p>
      <p>{{ message.split('').reverse().join('') }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js'
        }
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app">
      {{ var a = 10; }} <!-- 사용 X -->
      {{if(true) {return 100} }}  <!-- 사용 X -->
      {{ true ? 100 : 0 }} <!-- 사용 O -->
      {{ message.split('').reverse().join('') }} <!-- 권고 X -->
      {{ reversedMessage }} <!-- 권고 O -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js'
        },
        computed: {
        	reversedMessage: function() {
            	return this.message.split('').reverse().join('');
            }
        }
      });
    </script>
  </body>
</html>

 

위 코드 처럼 computed로 따로 빼내는 것이 UI구조를 쉽게 파악할 수 있고 반복적인 연산에 대해서는 미리 계산하여 저장해 놓고 필요할 때 바로 불러오는 캐싱 효과를 얻을 수 있다.

 

3. 디렉티브

 HTML 태그 안에 v- 접두사를 가지는 모든 속성들을 의미한다. 앞에서 배운 v-bind 속성도 디렉티브에 해당된다. 디렉티브의 형식은 다음과 같다.

<a v-if="flag">Vue.js</a>

a 태그는 뷰 인스턴스 데이터 속성에 정의된 flag 값에 따라 보이기도 하고 안 보이기도 한다. flag 값이 참이면 Vue.js 텍스트가 화면에 보일 것이고 값이 거짓이면 표시되지 않는다.

JSTL의 C:if와 비슷한듯~

디렉티브 이름 역할
v-if 지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시 하지 않습니다.
v-for 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력합니다.
v-show v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않습니다. 다만 v-if는 해당 태그를 완전히 삭제하지만 v-show는 css효과만 display:none으로 주어 실제 태그는 남아 있고 화면상으로만 보이지 않습니다.
v-bind HTML 태그의 기본 속성과 뷰 데이터 속성을 연결한다.
v-on 화면 요소의 이벤트를 감지하여 처리할 때 사용한다. 예를 들어, v-on:click은 해당 태그의 클릭 이벤트를 감지하여 특정 메서드를 실행할 수 있다.
v-model 폼에서 주로 사용되는 속성이다. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있따. input, select, textarea에만 사용할 수 있다.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app">
      <a v-if="flag">Vue.js</a>
      <ul>
        <li v-for="system in systems">{{system}}</li>
      </ul>
      <p v-show="flag">Vue.js</p>
      <h5 v-bind:id="uid">뷰 입문서</h5>
      <button v-on:click="popupAlert">경고 창 버튼</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          flag : true,
          systems: ['android', 'ios', 'window'],
          uid : 10
        },
        methods: {
          popupAlert: function() {
            return alert('경고 창 표시');
          }
        }
      });
    </script>
  </body>
</html>

 

4. 이벤트 처리

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app">
      <button v-on:click="clickBtn">클릭</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        methods: {
          clickBtn: function() {
            alert('clicked');
          }
        }
      })

    </script>
  </body>
</html>

 

* 이벤트처리 인자값 넘기기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app">
      <button v-on:click="clickBtn(10)">클릭</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        methods: {
          clickBtn: function(num) {
            alert('clicked'+num);
          }
        }
      })

    </script>
  </body>
</html>

* 이벤트 객체 활용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app">
      <button v-on:click="clickBtn">클릭</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        methods: {
          clickBtn: function(event) {
            console.log(event);
          }
        }
      })

    </script>
  </body>
</html>

5. 고급 템플릿 기법

1) computed 속성

 데이터를 가공하는 등의 복잡한 연산은 뷰 인스턴스 안에서 하고 최종적으로 HTML에는 데이터를 표현만 해야 한다. computed 속성은 이러한 연산을 정의하는 영역이다.

computed의 장점은 data의 변화에 따라 자동으로 다시 연산한다는 점과 캐싱이다.

 

2) methods 속성과 computed 속성의 차이점으로 methods는 호출될 때만 로직이 수행되고 computed는 데이터 변경에 따라 자동으로 수행된다는 점이다.(수동이냐 자동이냐)

 

3. watch 속성

 데이터 변화를 감지하여 자동 수행. computed는 간단한 연산 정도에 적합한 반면, watch는 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app">
      <input v-model="message">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        },
        watch: {
          message: function(data) {
            console.log("message의 값이 바뀝니다.", data);
          }
        }
      })

    </script>
  </body>
</html>

' > Vue' 카테고리의 다른 글

뷰 CLI  (0) 2020.02.12
싱글 파일 컴포넌트 체계  (0) 2020.02.12
뷰 리소스, 액시오스  (0) 2020.02.08
뷰 라우터  (0) 2020.02.02
컴포넌트 통신  (0) 2020.01.31