[do it! Vue.js 입문] 05-1. 뷰 템플릿(2)

이벤트 처리

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

<button v-on:click="clickBtn">클릭</button>
...
<script>
methods: {
	clickBtn: function(){
		alert('clicked');    
	}    
}
</script>

<button> 태그에 v-on:click 디렉티브를 추가하여 [클릭] 버튼을 클릭하면 clickBtn() 메서드가 실행되도록 지정함

따라서 [클릭] 버튼을 클릭하면 methods 속성의 clickBtn() 메서드에 정의한 alert() 내장 API가 실행됨

 

<button v-on:click="clickBtn(10)">클릭</button>
...
<script>
methods: {
	clickBtn: function(num){
		alert('clicked' + num + ' times');    
	}    
}
</script>

v-on 디렉티브로 메서드를 호출할 때 아래와 같이 인자 값을 넘기는 방법

 

<button v-on:click="clickBtn">클릭</button>
...
<script>
methods: {
	clickBtn: function(event){
		console.log(event);
	}    
}
</script>

event 인자를 이용해 화면 요소의 돔 이벤트에 접근하는 방법

HTML 태그에서 v-on:click으로 호출하는 메서드에 인자를 전달하지 않아도 clickBtn:function(event){ }와 같이

event 인자를 정의하면 해당 돔 요소의 이벤트 객체에 접근할 수 있음

---

고급 템플릿 기법

실제 애플리케이션을 개발할 때 유용한 속성

데이터 바인딩, 디렉티브와 같은 기본적인 문법과 함께 사용

 

computed 속성

데이터 연산들을 정의하는 영역

데이터를 가공하는 등의 복잡한 연산은 뷰 인스턴스에서 하기

HTML에는 데이터를 표현하는 것만 하기

 

장점1) data 속성 값의 변화에 따라 자동으로 다시 연산함

장점2) 캐싱. 동일한 연산을 반복해서 하지 않기 위해 연산의 결과 값을 미리 저장하고 있다가 필요할 때 불러오는 동작

 

computed 속성과 methods 속성의 차이점

methods 속성은 호출할 때만 해당 로직이 수행 => 수동적 => 수행할 때마다 연산을 하기 때문에 캐싱X

computed 속성은 대상 데이터의 값이 변경되면 자동으로 수행 => 능동적 => 데이터가 변경되지 않는 한 캐싱O

복잡한 연산을 반복 수행해서 화면에 나타내야 한다면 computed 속성을 이용하는 것이 methods 속성을 이용하는 것보다 성능 면에서 효율적

 

watch 속성

데이터 변화를 감지하여 자동으로 특정 로직을 수행

computed 속성은 내장 API를 활용한 간단한 연산 정도로 적합

watch 속성은 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합

비동기 처리가 무엇인가요? 웹 앱에서 데이터를 호출할 때 일반적으로 서버에 http 요청을 보냄 자바스크립트 코드가 실행되는 시점에서는 서버에 보낸 요청이 언제 응답이 올지 알 수 없음 따라서 다른 자바스크립트 연산에 영향을 주지 못하도록 별도의 영역(실행 컨텍스트)에서 해당 데이터를 요청하고 응답 기다림 이를 자바스크립트 비동기 처리 로직이라고함