[Vue] 뷰 템플릿, 디렉티브 본문

Web/Vue

[Vue] 뷰 템플릿, 디렉티브

미니모아 2022. 7. 13. 15:54
반응형

Do it! Vue.js 입문을 읽고 정리한 내용입니다.

뷰 템플릿

뷰 템플릿이란

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

라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환한다. 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 한다. 그리고 변환 과정에서 뷰의 반응성이 화면에 더해진다.

템플릿 속성을 사용하는 방법은 두 가지이다.

  • 뷰 인스턴스의 template 속성 활용
  • 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법

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

데이터 바인딩

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

{{}}

텍스트 데이터를 삽입할 때 사용한다. data 속성의 해당 값이 바뀌면 뷰 반응성에 의해 화면이 자동으로 갱신된다. 뷰 데이터가 변경되어도 값을 바꾸고 싶지 않다면 v-once 속성을 사용한다.

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

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

: 로 간소화하여 사용할 수 있다.

<!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>Vue Axios</title>
</head>
<body>
  <div id="app">
    <p v-bind:id="idA">아이디 바인딩</p>
    <p :class="classA">클래스 바인딩</p>
    <p :style="styleA">스타일 바인딩</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
  <script>
    new Vue({
        data: {
          idA: 10,
          classA: 'container',
          styleA: 'color: blue',
        }
    }).$mount('#app');
  </script>
</body>
</html>

자바스크립트 표현식

뷰 템플릿에서 자바스크립트 표현식을 사용하기위해서는 {{}} 안에 표현식을 넣으면 된다.

단 주의할 점이 있다.

  • 자바스크립트의 선언문과 분기 구문은 사용할 수 없다.
  • 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야한다.

복잡한 연산의 경우 자바스크립트 단에서 computed 속성을 이용하여 계산한 후 최종 결과 값만 표시한다. 화면단 코드의 가독성을 높일 수 있기 때문이다.

또한 반복적인 연산에 대해서는 미리 계산하여 저장해 놓고, 필요할 때 바로 불러오는 캐싱 효과를 얻을 수 있다.

<!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></title>
</head>
<body>
  <div id="app">
    <p>{{true ? 100: 0}}</p>
    <p>{{msg}}</p>
    <p>{{reversedMessage}}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
  <script>
    new Vue({
        data: {
          msg: 'Hello Vue.js!'
        },
        computed: {
          reversedMessage: function() {
            return this.msg.split('').reverse().join('');
          }
        }
    }).$mount('#app');
  </script>
</body>
</html>

디렉티브

뷰 디렉티브(derective)란 HTML 태그 안에 v-접두사를 가지는 모든 속성을 의미한다.

화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능으로 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터 값에 따라 갱신된다.

주요 디렉티브는 다음과 같다.

  • v-if : 지정한 뷰 데이터 값의 참, 거짓 여부에 따라 조건부 렌더링한다.
  • v-for : 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력한다.
  • v-show : v-if 와 같이 조건부 렌더링한다. 단 v-if 경우 해당 태그를 완전히 삭제하지만 v-show는 css 효과만 display:none으로 주어 태그는 남기되 화면 상으로만 보이지 않게 한다.
  • v-bind : HTML 태그의 기본 속성과 뷰 데이터 속성을 연결한다.
  • v-on : 화면 요소의 이벤트를 감지하여 처리할 때 사용한다.
  • v-model : 폼에서 주로 사용되며 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다.
<!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>Vue template - directive</title>
</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 @click="popupAlert">경고 창 버튼</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
  <script>
    new Vue({
        data: {
          flag : false,
          systems : ['android', 'ios', 'window'],
          uid: 10,
        },
        methods: {
          popupAlert: function() {
            return alert('경고창 표시!');
          }
        }
    }).$mount('#app');
  </script>
</body>
</html>

이벤트 처리

화면에서 발생한 이벤트를 처리하기 위해 v-on 디렉티브와 methods 속성을 활용한다.

<!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>Vue template - directive</title>
</head>
<body>
  <div id="app">
    <button @click="popupAlert(10)">경고 창 버튼</button><br/>
    <button @click="clickBtn">이벤트 객체 버튼</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
  <script>
    new Vue({
        data: {
          flag : false,
          systems : ['android', 'ios', 'window'],
          uid: 10,
        },
        methods: {
          popupAlert: function(num) {
            return alert(`경고창 표시! : ${num}`);
          },
          clickBtn: function(event) {
            console.log(event); // 돔 요소 이벤트 접근
          }
        }
    }).$mount('#app');
  </script>
</body>
</html>

고급 템플릿 기법

computed 속성

데이터 연산들을 정의하는 영역. 두 가지 장점이 있다.

  • data 속성 값의 변화에 따라 자동으로 다시 연산한다.
  • 캐싱 : 동일한 연산을 반복해서 하지 않기 위해 연산의 결과 값을 미리 저장하고 있다가 필요할 때 불러온다.

watch 속성

watch 속성은 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다. computed 속성은 내장 API를 활용한 간단한 연산 정도로 적합한 반면에, watch 속성은 데이터 호출과 같이 상대적으로 시간이 더 많이 소요되는 비동기 처리에 적합하다.

<!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>Vue template - directive</title>
</head>
<body>
  <div id="app">
    <input v-model="msg">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
  <script>
    new Vue({
        data: {
          msg: 'Hello Vue.js!'
        },
        watch: {
          msg: function(data) {
            console.log(`messgae의 값이 바뀝니다 :  ${data}`);
          }
        }
    }).$mount('#app');
  </script>
</body>
</html>
반응형
저작자표시 비영리 변경금지

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

[Vue] 뷰 Todo 애플리케이션 만들기 - 1  (0) 2022.07.18
[Vue] 뷰 프로젝트 구성하기  (0) 2022.07.13
[Vue] 뷰 라우터 (Router, Nested Router, Named View)  (0) 2022.07.12
[Vue] 뷰 컴포넌트 (props, emit, eventBus)  (0) 2022.07.07
[Vue] Vue 인스턴스, 라이프 사이클  (0) 2022.07.07
'Web/Vue' Related Articles more
Comments