tech.junha.kr

노트/Vue.js

4장 뷰 템플릿

작성

4장. 뷰 템플릿

  • 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 HTML로 변환해주는 속성이다.
  • template 속성은 사용자가 볼 수는 없지만, 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환한다. 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 한다. 변환 과정에서 뷰의 반응성이 화면에 더해진다.
<div id="app">
  <!-- template 속성에 대입한 값이 그려진다. -->
</div>

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

  1. 데이터 바인딩
  2. 디렉티브
  3. 이벤트 처리
  4. computed, watch 속성

1. 데이터 바인딩

  • HTML화면 요소를 뷰 인스턴스 데이터와 연결한다.

1) {{}}

  • 자바스크립트 표현식으로 사용할 수 있다.
  • 선언문과 분기 구문은 사용할 수 없다.
  • 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야한다.
<div id="app">
  {{message}}
  {{reversedMessage}}
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      message:{"so easy"}
    },
    computed:{
      reversedMessage(){
        ()=> this.message.split('').reverse().join('')
      }
    }
  })
</script>

2) v-bind:

  • 아이디, 클래스, 스타일등 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용한다.
  • v-bind:를 :로 간소화 할 수 있다.
<p v-bind:id="idA"><p>
<p v-bind:class="classA"><p>
<p :style="styleA"><p>
<script>
new Vue({
  el:'#app',
  data:{
    idA:10,
    classA:'container',
    styleA:'color:blue'
  }
});
</script>

2. 디렉티브

  • 디렉티브는 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능이며, 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터 값에 따라 갱신된다.
  • HTML 태그 안에 v-접두사를 가지는 모든 속성을 의미한다.
  • 개발자가 돔 요소를 직접 제어하지 않고 프레임워크에 돔 요소 제어 권한을 위임하는 기능이다.

v-if

  • 뷰 데이터 값의 참, 거짓 여부에 따라 HTML 태그 랜더링 여부를 결정한다.
<a v-if="flag">링크</a>

<script>
data:{
  flag:true
}
</script>

v-for

  • 뷰 데이터 개수만큼 HTML 태그를 반복 랜더링한다.
<ul>
  <li v-for="item in items">
</ul>

<script>
data:{
  items:['a','b','c']
}
</script>

v-show

  • 뷰 데이터 값의 참, 거짓 여부에 따라 HTML 태그의 'display:none' CSS 적용 여부를 결정한다.
<a v-show="flag">링크</a>

<script>
data:{
  flag:true
}
</script>

v-bind

  • HTML 태그 속성과 뷰 데이터 속성을 연결한다
<div v-bind:class="banner">배너</a>

<script>
data:{
  banner:productA
}
</script>

v-on

  • 이벤트를 감지하여, 특정 메서드를 실행한다.
<button v-on:click="popupAlert">경고창버튼</button>

<script>
methods:{
  popupAlert(){
    return alert('경고 창 표시')
  }
}
</script>

v-model

  • 폼(form)에서 주로 사용된다. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다.
  • <input>, <select>, <textarea> 태그에서만 사용할 수 있다.

3. 이벤트 처리

  • v-on 디렉티브와, methods 속성을 활용한다.
<button v-on:click="clickBtn(this.event,10)">클릭</button>
<script>
  methods:{
    clickBtn(event,num){
      console.log(event, num)
    }
  }
</script>
  • v-on디렉티브로 메서드 호출 시, 1) 돔 이벤트에 접근하거나, 2) 인자 값을 넘길 수 있다.

4. computed, watch 속성

computed

  • data 속성 값의 변화에 따라 자동으로 다시 연산한다.
  • 반복적인 연산은 미리 계산하여 저장해 놓고, 필요할 때 바로 불러오는 캐싱 효과를 얻을 수 있다.
computed vs methods 차이점
  • 데이터 갱신의 능동서에 차이가 있다. methods 속성은 호출할 때만 해당 로직이 수행되지만, computed 속성은 대상 데이터의 값이 변경되면 자동으로 수행된다.

watch

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

<script>
  new Vue({
    data:{
      message:'Hello'
    }
    watch:{
      message(data){
        console.log(`${data}로 값이 변한다. from watch 속성`)
      }
    }
  })
</script>