Vue.js의 기본

Vue.js는 MVVM(Model-View-ViewModel)패턴을 따른다. ViewModel은 View의 실제 논리 및 데이터 흐름을 담당한다. ViewModel에 상태가 변경된 경우 View에 바로 반영되므로 ViewModel만 알고있으면 그 이외에는 신경쓸 요소가 없다.

기본기능

디렉티브?
v-접두어로 시작하며 HTML element에 속성으로 줄 수 있다. Vue에서 제공하는 특수 속성이다.

템플릿?
렌더링 내용에는 포함되지 않으나 요소들을 그룹으로 묶기 위해 사용하는 태그
조건이나 반복등을 지정하여 응용할 수 있다.
<template v-for=”(contact, index) in contacts”> 과 같이 사용한다.
루트 요소를 반드시 하나만 가지고 있어야 한다.

마운트란?
Vue.js의 기능은 디렉티브와 템플릿을 연동하는 형태로 사용한다.

기본적인 옵션 구성

var app = new Vue({
	
    el: '#app',
    
    data: {
    	message: 'Vue.js'
    },
    computed: {
    	computedMessage: function(){
        return this.message +'!'
        }
    },
    created: function(){
    	//하고 싶은 처리
    },
    methods: {
    	myMethod: function(){
        //하고 싶은 처리
        }
    }
})

el : 마운트할 요소
애플리케이션 인스턴스를 적용할 요소를 나타냄. 선택자 형태로 지정함.
data : 데이터
애플리케이션에서 사용할 데이터를 나타냄. 일반적으로 객체 또는 배열로 지정함.
computed : 산출 속성
함수로 인해 산출되는 데이터
created : 라이프 사이클 훅
Vue 인스턴스가 생성되고, 데이터 감시 등의 리액티브 시스템과 관련된 초기화가 끝났을 때, created 메서드가 자동으로 호출된다.
methods : 메서드
애플리케이션에서 사용할 메서드이다. 코드 관리가 쉽도록 처리를 나누거나 이벤트 번들러 구현 등에 사용한다.

데이터 등록과 변경

리액티브 데이터란?
-Vue.js에서 추출(get)했을 때, 설정했을 때(set), 훅(hook)처리가 등록되어 반응하는 데이터를 의미한다.
-DOM 변경을 자동화하는 데이터 바인딩을 하려면, 템플릿에서 사용하는 모든 데이터를 리액티브 데이터로 정의해야 한다.
리액티브 시스템 은 단순한 DOM 변경뿐만 아니라 DOM 변경을 최적화하고, 데이터를 동기화하고, 변경을 감지하는 기능 등을 모두 포함한 개념이다.

텍스트와 속성 데이터 바인딩

텍스트와 데이터 바인딩

<div id="app">
  <p>Hello {{ message }} </p>
</div>

data 속성에 정의한 message속성 값을 렌더링할 때는 별도의 태그 없이 이중 중괄호를 사용한다. 이를 Mustache 기법이라 부른다.텍스트 콘텐츠를 위한 기법이므로, 속성데이터를 바인딩할 때는 적용할 수 없다.

속성 데이터 바인딩

속성에 바인딩하려면 v-bind 디렉티브를 사용한다.

<input type="text" v-bind:value="message">

v-bind 장식자

장식자	의미
.prop	속성 대신에 DOM속성으로 바인딩한다.
.camel	케밥 케이스 속성이름을 카멜 케이스로 변환한다.
.sync	양방 바인딩한다.

/### 데이터 변경
/### 클래스와 스타일 데이터 바인딩
/### 여러개의 속성 데이터 바인딩
/#### SVG 데이터 바인딩

템플릿 조건 분기

v-if와 v-show

v-if와 v-show는 조건을 입력한다는 점은 같지만, 렌더링 결과를 보면 알 수 있듯이 동작은 굉장히 다르다.

v-if조건으로 렌더링하기
조건을 만족하지 못한 경우에 요소는 DOM레벨에서 제거되며, 모든 감시도 제거된다. 컴포넌트라면 인스턴스가 제거되며, 이후에 렌더링될 때 모든 상태가 초기화되어버린다.
내부에서 디렉티브 또는 컴포넌트를 많이 사용하는 경우, 특정한 데이터를 따로 가지고 있지 않다면 오류가 발생했을 때 v-if를 사용하는 것이 좋다.

v-show 조건으로 출력하기
조건을 만족하지 않는 경우, 단순하게 display:none; 스타일을 적용한다. 눈에 보이지 않더라도 모든 리액티브 데이터에 대한 내부적인 감시가 일어나므로 주의해야 한다.
내부에 디렉티브 또는 컴포넌트가 없고, 변경 빈도가 높은 경우에는 v-show를 사용하는 것이 성능 면에서 좋다.

v-if,v-else,v-else-if

v-if 디렉티브는 v-else-if와 v-else 디렉티브를 조합해서 그룹으로 만들면 여러 개의 조건을 지정할 수 있다.

<div v-if="type==='A'">
 type은 A
</div>
<div v-else-if="type === 'B'">
 type은 B
</div>
<div v-else>
 모든 조건을 만족하지 않는 경우
</div>

v-else-if와 v-else 디렉티브는 v-if와 v-else-if를 적용한 요소의 바로 뒤에 작성해야 한다.

v-else-if,v-else와 key
v-if, v-else-if, v-else와 같이 디렉티브 내부에 있는 요소의 경우는 속성의 상태가 남거나 트랜지션이 일어나지 않는 등 예상치 못한 문제가 발생할 수 있다. 이러한 경우에는 각각의 요소에 유니크한 key를 설정해 문제를 해결할 수 있다.

<!--두 개의 div가 다른 요소라는 것을 명시적을 지정하기 -->
<div v-if="loaded" key="content-visible">
 content
</div>
<div v-else key="content-loading">
 loading now...
</div>

/### 리스트 데이터 출력 및 변경

$el과 $refs

데이터 바인딩 덕분에 DOM에 직접 접근하지 않아도 내용을 변경할 수 있지만 상황에 따라서는 직접 DOM에 접근해야 하는 일이 필요할 수도 있다. 예를 들어, 요소의 위치와 높이는 DOM에 직접 접근해야 확인할 수 있다.

DOM에 접근할 때는 인스턴스 속성 $el과 $refs를 사용한다. 이 두 가지 속성은 DOM을 참조해야 사용할 수 있는 것이므로, 라이프 사이클 중 mounted 이후부터 사용할 수 있다.

$el의 사용 방법

컴포넌트 템플릿을 감싸고 있는 루트 요소는 $el을 사용하여 DOM을 직접 참조할 수 있다.

new Vue({
	el: '#app',
    mounted: function(){
    	console.log(this.$el) // -> <div id="app"></div>
    }
})

$refs의 사용 방법

루트 이외의 요소는 특별한 속성 ref와 $refs를 사용해서 참조할 수 있다.

<div id="app">
	<p ref="hello">Hello</p>
      	<!--p 요소에 hello라는 이름 붙이기-->
</div>

일단 템플릿에서 대상 요소에 ref 속성을 지정하고 이름을 붙여준다.
이렇게 지정한 요소는 인스턴스 메서드 내부에서 다음과 같이 접근할 수 있다.

new Vue({
    el:'#app',
    mounted: function(){
      console.log(this.$refs.hello) // p요소를 DOM으로 다룰 수 있음!
    }
})

$el과 $refs는 일시적인 변경
$el과 $refs는 가상 DOM을 사용하지 않으므로 렌더링 최적화를 실시하지 않는다. 따라서 조작이 발생할 때마다 다시 렌더링되므로, 자주 변경되는 DOM 변경에는 적합하지 않다.

템플릿 제어 디렉티브

템플릿 또는 컴파일 제어를 위해 디렉티브를 사용한다.

디렉티브	설명	비고
v-pre	템플릿 컴파일 생략하기	자식 컴포넌트를 포함한 내부의 HTML을 컴파일하지 않고, 정적 콘텐츠를 다룰 때 사용한다. 서버 사이드 렌더링 때 XSS를 막기 위한 용도로 사용된다.
v-once	한 번만 바인딩하기	템플릿을 한 번만 컴파일하고 이후에는 정적 콘텐츠로 다루고 싶을 때 사용한다. 렌더링 후에는 데이터가 변경되어도 DOM은 변경되지 않는다.
v-text	Mustache 대신 텍스트 콘텐츠로 렌더링하기
v-html	HTML 태그를 그대로 렌더링하기	주로 API로 가져온 HTML을 그대로 출력할 때 사용한다.
v-cloak	인스턴스 준비가 끝나면 제거하기

이벤트

이벤트 핸들링

DOM 이벤트를 받아서 처리하는 '이벤트 핸들러'는 이벤트 처리 내용을 뜻하고, 이벤트 헨들러를 이벤트에 연결하는 것을 '핸들'이라고 표현한다.

기존 자바스크립트의 addEventListener 메서드와 jQuery의 $(element).on 메서드를 사용했지만, Vue.js에서는 템플릿 내부에 v-on 디렉티브를 작성해서 이벤트를 연결한다.

메서드 이벤트 핸들러
메서드 이벤트 핸들러는 컴포넌트의 methods 옵션에 정의되어 있는 메서드의 이름을 지정한다.

<button v-on:click="handleClick">클릭</button>

new Vue({
   el: '#app',
   methods:{
   	handleClick:function(){
    		alert('클릭했어요!')
        }
   }
})

인라인 메서드 핸들링
인라인 메서드 핸들링이란, 디렉티브의 값에 자바스크립트 식을 직접 작성하는 것이다. 핸들러를 너무 길게 작성하면 템플릿이 보기 힘들어지므로, 재사용을 거의 하지 않는 짧은 식만 사용해야 한다.

<button v-on:click="count++">클릭</button>

이벤트 장식자

장식자	설명
.stop	event.stopPropagation()을 호출한다. 이벤트 버블링을 막는다.
.prevent	event.preventDefault()를 호출한다. 링크 이동 또는 submit 처럼 기본 처리를 막는다.
.capture	캡처 모드로 DOM 이벤트를 핸들한다. 루트 요소에서 이벤트 타겟 요소까지 DOM 트리를 찾아 내려가는 캡처를 할 때에 이벤트가 발생된다. 따라서 버블링 모드의 이벤트보다 먼저 이벤트가 발생하게 된다.
.self	이벤트가 해당 요소에서 직접 발생할 때만 핸들러를 호출한다.event.target요소가 자기 자신일 때만 핸들러가 호출되게 한다. 예를들어, 모달창의 배경 부분을 클릭해서 닫는 경우에 사용함.
.native	컴포넌트 루트 요소 위에 있는 네이티브 이벤트를 핸들한다. DOM 이벤트라도 $emit을 사용하지 않으면 호출되지 않도록 한다.이벤트를 직접 호출하고 싶은 경우에 사용한다.
.once	한 번만 핸들하게 한다.
.passive	{passive:true}로 DOM 이벤트를 핸들한다. event.preventDefault()를 사용하지 않겠다고 명시하는 것임으로 .prevent 장식자와 함께 사용할 수 없다. 모바일 환경에서 비용이 높은 처리를 할 때 화면 움직임이 부드럽지 않다면 이를 활용해서 퍼포먼스를 높힐 수 있다.

키 장식자

별칭	의미
.enter	Enter키를 눌렀을 때
.tab	Tab키를 눌렀을 때
.delete	Delete키를 눌렀을 때
.esc	ESC키를 눌렀을 때
.space	Space키를 눌렀을 때
.up	화살표 위 키를 눌렀을 때
.down	화살표 아래 키를 눌렀을 때
.left	화살표 왼쪽 키를 눌렀을 때
.right	화살표 오른쪽 키를 눌렀을 때

입력 양식 입력 핸들링

v-model

입력 양식의 값 또는 선택 값을 데이터와 동기화하는 양방향 데이터 바인딩을 실시할 때는 v-model 디렉티브를 사용한다.

<div id="app">
   <input v-model="message">//입력 값을 변경하면
   <p>{{ message }}</p>
</div>

new Vue({
  el:'#app',
  data: {
     message : 'Hello!' // 데이터도 함께 변경됨.
  }
})

v-model은 다음과 같은 두 가지 처리를 한 번에 작성할 수 있게 해준다.

• 데이터 바인딩하기
  Vue.js는 리액티브 데이터를 DOM요소에 데이터 바인딩해서 데이터의 변경을 감지할 때마다 연결된 DOM요소를 자동으로 변경한다.

• 이벤트 바인딩하기
  <input?> 요소처럼 사용자로부터 어떤 입력을 받는 DOM 요소의 경우, 사용자의 입력 이벤트를 트리거로 하여 데이터를 얻을 수 있다.

  v-model 디렉티브는 'DOM요소에 적용한 데이터 바인딩'과 '요소에서 추출한 데이터를 리액티브 데이터로 반영하는 처리'를 자동화해 주는 구문이다. 양방향 데이터 바인딩이라고 부르지만, 실제로는 데이터를 가지고 있는 쪽에서 데이터를 변경하는 처리를 자동화하는 행위라고 할 수 있다.

/### 마운트 요소 외의 이벤트 (스크롤 이벤트)

데이터 감시와 가공

산출 속성 props

산출 속성이란, 처리를 포함하고 있는 데이터이다. 코드의 가독성을 향상시킬 수 있다.

산출 속성 사용 방법

산출 속성은 임의의 데이터를 리턴하는 함수를 computed 옵션에 정의한다.

new Vue({
  el: '#app',
  data: {
    width: 800
  },
  computed:{
  //산출 속성 halfwidth 정의하기
    halfwidth:function(){
      return this.width / 2
    }
  }
})

computed에 정의한 함수는 Vue 인스턴스 초기화 때 내부적으로 Object.define.Property 함수가 사용되어, Vue 인스턴스의 속성으로 등록된다.

<p>{{ width }} 의 절반은 {{ halfWidth }}입니다.</p>

console.log(this.halfWidth) // -> 400

getter 와 setter
산출 속성은 기본적으로 원래 데이터에 영향을 주지 않는다. 따라서 산출 속성에 값을 대입하면 오류가 발생한다. 하지만 필요하면 세터를 만들 수 있다. 세터를 사용할 때는 객체로 get과 set 속성을 함수로 정의한다.
산출 속성에 게터와 세터를 구현하면, 양방향 흐름을 가지게 되어 항상 동기화된다.

산출 속성 캐시 기능
산출 속성은 리액티브 데이터를 기반으로 결과를 캐시한다. 캐시의 트리거가 되는 것은 리액티브 데이터뿐이다.

watch

watcher란, 특정 데이터 또는 산출 속성의 상태를 감시해서 변화가 있을 때 등록한 처리를 자동으로 실행해 주는 것이다. 데이터의 변화를 트리거로 하는 훅이다. 산출 속성과 다르게 워처는 워처 자체가 데이터를 리턴하지 않는다. 워처는 데이터 지향 설계를 지원하는 기능이다.

워처 사용 방법

컴포넌트의 watch 옵션에 감시할 데이터의 이름과 변화가 일어났을 때 호출할 핸들러를 정의한다. 첫 번째 매개변수로 '새로운 값', 두 번째 매개변수로 '이전 값'이 들어오므로 비교가 필요한 경우 이를 사용한다.

new Vue({
   // ...
   watch:{
    <감시할 데이터>:function(<새로운 값>,<이전 값>) {
    //value가 변화했을 때 하고 싶은 처리
    },
    'item.value':function(newVal,oldVal) {
    //객체의 속성도 감시할 수 있음
    }
   }
})

/#### 실행 빈도 제어하기
/#### 여러 값 감시하기

필터

필터란, 문자 수를 반올림하거나 쉼표를 넣는 등의 텍스트 기반 변환 처리에 특화된 기능이다. 필터는 로컬 또는 전역에 등록해서 사용한다. 로컬에 등록한 경우라도 this는 사용하지 않는다.

로컬 필터
컴포넌트의 filters 옵션에 등록하면, 특정 컴포넌트 내부에서만 사용할 수 있다.

new Vue({
  el:'#app',
  data:{
     price:19800
  },
  filters:{
  	localeNum : function(val){
           return val.toLocaleString()
  	}
   }
)}

전역 필터
범용적인 필터는 전역 메서드 Vue.filter를 사용해서 등록한다. 이렇게 등록한 필터는 모든 컴포넌트에서 사용할 수 있다.

Vue.filter('localeNum',function(val){
   return val.toLocaleString()
})

/### 사용자 정의 디렉티브

/### nextTick