Vue.js(7)

Vue Template

• 템플릿이란 뷰로 화면을 조작하기 위해 제공되는 문법
• 뷰 인스턴스에서 관리하는 데이터를 화면에 연결하는 데이터 바인딩과 화면의 조작을 편하게 할 수 있는 디렉티브로 나뉜다.

Data Binding

• 콧수염 문법인 "{{ }}"를 활용하여 인스턴스의 data, computed, props 속성을 연결할 수 있다. 그리고 간단한 자바스크립트 표현식도 화면에 표시할 수 있다.

<div>{{ str }} </div>
<!-- 아래부터 자바스크립트 표현식 -->
<div>{{ number + 1 }} </div> 
<div>{{ ok? 'YES' : 'NO' }} }} <!-- 삼항 연산자 -->
<div> {{ message.split('').reverse().join('') }} </div>
<!-- 자바스크립트 API 호출 -->

• 자바스크립트 연산식 주의점

{{ var a = 1 }} <!-- 변수선언 불가능 -->
{{ if (ok) {return message } }} <!-- 조건식 불가능 -->
{{ message.split('').reverse().join('') }} 
<!-- 과 같은 복잡한 연산은 인스턴스에서 수행해야함 (computed 속성 이용) -->

Directive

• 'v-' 접두사가 가지는 모든 속성을 의미
• 디렉티브의 역할은 표현식에 따라서 반응적으로 DOM에 적용
• 화면의 DOM 요소들을 쉽게 조작하기 위해 사용하는 기능

주요 Directive

• v-if : 지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않음
• v-for : 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력
• v-show : v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않음. 다만, v-if는 해당 태그를 완전히 삭제하지만 v-show는 css 효과만 displat:none; 으로 주어 실제 태그는 남아 있고 화면 상으로만 보이지 않음.
• v-bind : HTML 태그의 기본 속성과 뷰 데이터 속성을 연결( v-bind:id 인 경우 :id 로만 간소화 가능하지만 코드 가독성을 위해 간소화 하지 않는것을 추천)
• v-on : 화면 요소의 이벤트를 감지하여 처리 할 때 사용. for example ! v-on:click 은 해당 태그의 클릭 이벤트를 감지하여 특정 메서드를 실행 할 수 있음
• v-model : form 에서 주로 사용되는 속성. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화. 화면에 입력된 값을 저장하여 서버에 보내거나 watch 와 같은 고급 속성을 이용하여 추가 로직 수행 가능.(< input >, < select >,
  < textarea > 태그에만 사용 가능)

<!-- seen의 진위 값에 따라 p 태그가 화면에 표시 또는 미표시 -->
<p v-if="seen"> Now you see me </p>
<!-- 화면에 a 태그를 표시하는 시점에 뷰 인스턴스의 url 값을 href에 대입 -->
<a v-bind:href="url">url</a>
<!-- 버튼에 클릭 이벤트가 발생했을 때 doSomething 이라는 메서드를 실행 -->
<button v-on:click="doSomething"></button>

이벤트 처리 (v-on)

• 클릭이벤트나 여러 이벤트들을 처리하는 디렉티브이다.

<div id="app">
	<button v-on:click="clickBtn">클릭</button>
</div>

new Vue({
	el: '#app',
    methods: {
    	clickBtn: function(){
        	alert("기본 클릭 이벤트");
        }
    }
)};

---

• 인자 전달 예제

<div id="app">
	<button v-on:click="clickBtn(10)">클릭</button>
</div>

new Vue({
	el: '#app',
    methods: {
    	clickBtn: function(num){
        	alert("인자 값 전달" + num);
        }
    }
)};

---

• event 인자 접근 : 클릭 이벤트의 경우, event 인자를 통해 클릭 위치 좌표 값을 얻을 수 있음

<div id="app">
	<button v-on:click="clickBtn">클릭</button>
</div>

new Vue({
	el: '#app',
    methods: {
    	clickBtn: function(num){
        	console.log(event);
        }
    }
)};

---

• 일반 인자, event 인자 동시 접근

<div id="app">
	<button v-on:click="clickBtn($event, 10)">클릭</button>
</div>

new Vue({
	el: '#app',
    methods: {
    	clickBtn: function(event, num){
        	console.log("인자 값 전달 : " + num);
        	console.log(event);
        }
    }
)};

고급 템플릿 기법

computed

• computed 속성 : 데이터를 가공하는 등의 복잡한 연산은 뷰 인스턴스 내에서 수행, 최종적으로 HTML에는 데이터만 표현해야 할 때 computed 속성을 이용하면 HTML단의 코드는 가독성이 좋아지고 깔끔해짐
• 장점 : computed 속성에서 사용하고 있는 data 값이 변경이 되면 전체 값을 다시 한번 계산 함, 캐싱을 진행(연산의 결과 값을 미리 저장하고 있다가 필요할 때 불러옴, 동일한 연산은 반복하지 않아 메모리 소모가 적음)
• computed 속성과 methods 속성 차이점 : methods 속성은 호출할 때만 로직이 수행되는 수동적이지만, computed 속성은 대상 데이터 값이 변경이 되면 자동 수행 즉 능동적 수행이 가능하다.

<div id="app">
	<p> 원본 메세지 : "{{ message }}"</p>
    <p> 역순 메세지 : "{{ reversedMessage }}"</p>
 </div>

new Vue({
	el: '#app',
    data: {
    	message: '안녕하세요'
	},
    computed:{
    	reveredMessage: function(){
        	return
    this.message.split('').reverse().join('');
	}
}
});

위의 예제를 실행하면 "안녕하세요" 와 "요세하녕안" 이 출력이 되는 것을 확인이 가능한데
여기에서 message 를 "반갑습니다"로 바꾸게 되면
"반갑습니다" 와 "다니습갑반" 이 출력이 된다.

watch

• watch 속성 : 데이터 변화를 감지하여 자동으로 특정 로직을 수행하고,
  computed 속성은 자바스크립트 내장 API를 활용한 간단한 연산이 적합한 반면, watch 속성은 REST API 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합하다.

computed 와 watch 속성의 차이

• watch 속성은 "데이터가 변경되면 이 함수를 실행해!" 하는 명령형 프로그래밍 이다.
• computed 속성은 계산이 필요한 목표 데이터를 정의하는 방식의 선언형 프로그래밍 이다.
• computed 속성의 경우 캐싱 기능으로 속성 안에 연산 결과가 저장이 되는 반면 watch 속성은 그렇지 못하다.
• watch 속성의 경우 감지하고 있는 데이터를 직접적으로 변경시키면 무한루프가 발생 하게 되는데 이때 Vue에서 위험성을 감지해 사전에 Exception 처리를 시켜버린다.

new Vue({
	el :"#app",
    data: {
    	message: '안녕하세요'
    },
    watch: {
    	message: function(){
        	this.message =
        this.message.split('').reverse().join('');
        }
    }
});

• 위 처럼 실행을 시키면
  데이터 변화 감지 -> watch 실행 -> 데이터 변경 -> 데이터 변화 감지 -> watch 실행 -> 데이터 변경 -> 데이터 변화 감지 -> watch 실행 -> 데이터 변경... 이 무한 반복된다.
• data 속성안에 있는 데이터를 연산하거나 변경을 할 경우에는 computed 속성을 사용해야 한다.
• watch 로 데이터를 변경을 하고 싶으면 추가적으로 data 를 선언해서 사용한다.(이렇게 할 경우 computed 와 동작 방식은 거의 동일하겠으나, 사용 목적에 맞지 않는다.(watch는 데이터를 정의할 때 사용하는 것이 아니기 때문)

<div id="app">
	<input v-model="message">
    <p>{{ reversedMessage }}</p>
</div>

new Vue({
	el :"#app",
    data: {
    	message: ''
        reversedMessage: ''
    },
    watch: {
    	message: function(message){
        	this.message =
        this.reversedmessage=message.split('').reverse().join('');
        }
    }
});

• 데이터 변화 감지라는 점에서 둘의 속성은 동일하지만, computed 속성은 데이터를 정의하여 선언적인 방식으로 사용하고, watch 속성은 데이터의 변화를 감지하여 특정 로직을 수행할 때 사용한다.

느낀점

음 역시 오늘도 Vue를 공부하지만 어렵다. 내가 아직 JS문법을 잘 몰라서 그러는것 같다. 혼자 나름대로 JS를 공부해보고 있지만 머리에 잘 안들어온다 ㅜㅜ.. 이제 JS또한 혼자의 공부법만으로 끄적끄적 대며 공부를 해봐야 겠다. 자바스크립트는 벨로퍼트님의 블로그를 참조하여 공부를 하고 하다가 부족하다 싶으면 출퇴근하며 퇴근 후 집에서 자바스크립트 문법을 공부해서 한달 안에 완벽한 완성은 아니더라도 어느정도 완성을 하고싶다.