뷰 템플릿 문법

뷰 템플릿

HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 HTML로 변환해주는 속성

 

뷰 템플릿 문법

Vue는 DOM에 Vue의 데이터와 로직이 연결될 수 있도록 HTML 기반의 문법을 제공

 

 

1. 데이터 바인딩

{{ }} 콧수염 괄호를 이용해서 data 등의 속성들을 화면에 나타냄

- bind: 데이터 연결

- computed: 데이터 표현을 더 직관적이고 간결하게 도와주는 속성

<div id="app">
      <p>{{ message }}</p>
      <p>{{ doubleNum }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    new Vue({
    	el: '#app',
        data: {
            message: "Hello",
            num: 10
        },
        coumputed: {
		doubleNum: function(){
            	return this.num * 2
            }
        }
    })
</script>

 

 

2. 디렉티브

HTML태그에서 'v-'로 시작하는 속성. 'v-' 속성들을 읽어들여 이벤트를 처리

- v-bind:id: id를 연결. DOM의 정보까지 리액티브하게 변경할 수 있다 

- v-bind:class: class를 연결

- v-if / v-else: if eles 조건문

- v-show: 보이고, 숨기기 

<div id="app">
      <p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
      <div v-if="loading">
        Loading...
      </div>
      <div v-else>
        test user has been logged in
      </div>
      <div v-show="loading">
        Loading...
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          num: 10,
          uuid: 'abc123',
          name: 'text-blue',
          loading: true
        }
      })
    </script>

 

3. 문법 찾아보기

서비스를 구현할 때 필요한 문법은 https://vuejs.org/ 에서 찾아보고 활용한다.

input box 기능 찾아보기

1. https://vuejs.org/ 에서 input 검색

2. Form input Binding 선택

3. 구현할 기능 찾기