Template Data Binding & Event

뷰 템플릿

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

템플릿 속성을 사용하는 방법

1. ES5에서 뷰인스턴스의 template 속성 사용

```
<script>
new Vue({
 template: "<p>Hello {{message}}</p>"
});
</script>
```

!Tip render()

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

2. 싱글 파일 컴포넌트 체계의 <template> 코드를 활용하는 방법

• 템플릿에서 사용하는 뷰의 속성과 문법
  • 데이터 바인딩
    • HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미
  • {{}}
    • 데이터가 변경되면 자동 갱신 된다.
    • ex) <div>{{message}}</div>
    • 만약 갱신을 원하지 않은 경우 ex) <div v-once>{{message}}</div>
  • v-bind
    • 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식 입니다.

      • <div id="app">
          <p v-bind:id="idA">아이디 바인딩</p>
            <p v-bind:class="classA">클래스 바인딩</p>
            <p v-bind:style="styleA">스타일 바인딩</p>
        </div>
        <script>
          new Vue({
              el: "#app",
              data : {
                  idA: 10, // 실행시 <p id="10">아이디 바인딩</p>
                  classA: "container", // 실행시 <p class="container">클래스 바인딩</p>
                  styleA: "color:blue" // 실행시 <p style="color:blue">스타일 바인딩</p>
              }
          });
        </script>

  • 자바스크립트 표현식
    • {{}}안에 자바스크립트 표현식을 넣으면된다.
    • ex)

    • <div>
          <!-- Hello Vue.js! -->
          <p>{{message}}</p> 
          <!-- Hello Vue.js!!!!-->
          <p>{{message + "!!!"}}</p>
          <!-- !sj.euV oolleH -->
          <p>{{message.split("").reverse().join("")}}</p>
      </div>
          ...
      <script>
          new Vue({
              el: "#app",
              data: {
                  message: "Hello Vue.js!"
              }
          })
        </script>

      • 주의 할점
        1. 자바스크립트의 선언문과 분기 구문 사용 X
        2. 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표기

3. 디렉티브
   • HTML 태그안에 v- 접두사를 가지는 모든 속성들을 의미 한다. v-bind속성도 디렉티브에 해당

   • 디렉티브이름	역할
     v-if	지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시 하지않습니다.
     v-for	지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력합니다. ex) - {{system}}
     v-show	v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시 하거나 표시 하지 않지 않습니다. 다만 v-if는 해당 태그를 완전히 삭제 하겠지만 v-show는 css 효과만 display:none;으로 주어 실제 태그는 남아 있고 화면상으로만 보이지 않습니다.
     v-bind	HTML 태그의 기본 속성과 뷰 데이터 속성을 연결합니다.
     v-on	화면 요소의 이벤트를 감지하여 처리할떄 사용합니다. 예) v-on:click
     v-model	폼(Form)에서 주로 사용되는 속성입니다. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화 합니다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할수 있습니다. input, select, textarea 태그에서만 사용 가능합니다

4. 이벤트 처리
   • v-on or methods 속성활용
   • methods

     • // @click로 사용 해도 된다.
       <button v-on:click="clickBtn(10)">클릭</button> // 1
       <button v-on:click="clickBtn">클릭</button> // 2
       <button v-on:click="clickBtn">클릭</button> // 3       
       <script>
         methods:{
             // 1
             clickBtn: function(){
                 alert("clicked");
             },
             // 2
             clickBtn: function(num){
                 alert("clicked " + num);
                },
             // 3
             clickBtn: function(event){
                    console.log(event);
             }
         }
       </script>

---

Vue Event Handler document