7. 템플릿 문법 - 기본

템플릿 문법 소개

데이터 바인딩
뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법
기본적인 데이터 바인딩 방식 : {{ 내용 }} 콧수염 괄호(Mustache Tag)

디렉티브
뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법
디렉티브 형태 : v- 로 시작 ex) v-on, v-if, v-model ...

데이터 바인딩과 computed 속성
computed 속성 : 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성으로 뷰 템플릿 코드의 가독성을 높여줄 뿐만 아니라 컴퓨티드 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산

<div>{{ message.split('').reverse().join('') }}</div> //템플릿에 계산식이 많아지면 가독성 문제 발생!

<div> id="app">
    <div>{{ reverseMessage }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    data:{
      message:'Vue.js' //데이터의 값이 변경되었을 때, computed내의 자동으로 갱신
    }
    computed: { //데이터의 값과 연결되어 계산되어 변경될 값은 computed에 정의
      reverseMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  })
</script>

클래스 바인딩, v-bind, v-if, v-show

<div id="app">
  <p v-bind:id="uuid" v-bind:class="name">클래스 바인딩</p>
  <div v-if="loading">Loading...</div> //loading이 false일때 태그 자체가 사라짐
  <div v-else>this is the result</div>
  <div v-show="loading">Loading...</div> //loading이 false일때 display:none 유관상으로만 사라짐 </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      uuid: "abc123",
      name: "text-blue",
      loading: true,
    },
  });
</script>

mehods 속성과 v-on 디렉티브를 이용한 이벤트 처리 방법