[Vue] Vue.js 프레임워크 공부하기..

지난주 싸피 관통 스프링을 끝낸 뒤(망한 듯ㅎㅎ)... Vue 프레임워크에 대한 수업이 시작되었다..

프로젝트에서 짐이 되면 안되니까 폐관 수련의 필요성을 느끼고

블로그를 정리하면서 Vue에 대한 복습을 하려고 한다...

그럼 가보자~

 

---

★ Vue.js 란?

•  UI를 짜는데 단순화하는데 도움을 주는 프런트엔드 프레임워크이다.
• 문법이 간결하여 러닝 커브가 낮아서 누구나 쉽게 접근 가능하다.

Vue.js 인스턴스

-> Vue는 Vue 함수로 인스턴스를 만드는 것부터 시작

const vm = new Vue({
	// 옵션
});

---

★ Vue.js 옵션

※ EL

-> “css 선택자” or HTML Element, Vue가 적용될 요소 지정

 

▶ el 지정

new Vue({
	el: “#app”
});

▶ 지정된 el 부분 

<div id=“app”>
// Vue가 적용될 부분
</div>

※ Data

-> 객체 or 함수, Vue에서 사용되는 정보를 저장

 

▶ el 지정

new Vue({ 
	el: ‘#app’,
	data: {
		msg: ‘Hello’
	}
});

▶ data 사용

<div id=“app”>
	<h2>{{ msg }}</h2>  // <h2>Hello</h2>
</div>

---

★ Vue.js Directive

※ v-model

-> 양방향 바인딩 처리를 위해서 사용(폼의 input, textarea)

new Vue({ 
	el: "#app", 
    data: {
		msg: 'hello' 
        }
});

<input type="text" v-model="msg">

※ v-bind

-> 엘리먼트 속성 바인딩 처리를 위해서 사용. v-bind는 약어로 “:”로 사용 가능

new Vue({ 
	el: "#app", 
    data: {
		idVal: 'test',
		key: 'id' 
        }
});

<div v-bind:id="idVal">test</div>	// id = "test"
<div v-bind:[key]="idVal">test</div>	// id = "test"
<div :id="idVal">test</div>	// id = "test"
<div :[key]="idVal">test</div>	// id = "test"

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

-> 조건에 맞는 경우 화면에 요소들을 랜더링

<span v-if="age < 10">무료</span>
<span v-else-if="age < 20">7000원</span>
<span v-else-if="age < 65">10000원</span>
<span v-else>3000원</span>

※ v-for

-> 배열이나 객체의 반복에 사용

-> v-for="요소 변수 이름 in 배열" v-for="(요소 이름 변수, 인덱스) in 배열"

new Vue({
	el: "#app",
    data: {
		regions: ["광주", "구미", "대전", "서울"]
        }
});

<ul>
 <li v-for="name in regions"> // 광주,구미,대전,서울 차례로 출력
지역 : {{name}}
 </li>
</ul>

※ template

-> 여러 개의 태그들을 묶어서 처리해야 한하면 template를 이용하면 편리

-> v-if, v-for, component 등과 함께 많이 사용

<template v-for="(region, index) in ssafy">
	<h2>지역 : {{region.name}}</h2>
    	<h3>{{region.count}}개반</h3>
</template>

---

★ Vue LifeCycle Hooks

• beforeCreate : vue 인스턴스가 생성되고 각 정보의 설정 전에 호출
• created : vue 인스턴스가 생성된 후 데이터들의 설정이 완료 후 호출
• beforeMount : 마운트가 시작되기 전에 호출
• mounted : 지정된 엘리먼트에 vue 인스턴스 데이터가 마운트 된 후에 호출
• beforeUpdate : 데이터가 변경될 때 virtual dom이 랜더링, 패치되기 전 호출
• updated : vue에서 관리되는 데이터가 변경되어 dom이 업데이트된 상태
• beforeDestory : vue 인스턴스가 제거되기 전에 호출
• destroyed : vue 인스턴스가 제거된 후에 호출

hook 호출 방법

const vm = new Vue({
	data: { a: 1 }, 
    created: function () {
		// Vue 인스턴스가 생성된 후에 사용자 정의 작업을 추가
		} 
});

---

Vue method

-> Vue 인스턴스는 생성 관련된 데이터(data) 및 메서드의 정의가 가능

-> 메서드 안에서 데이터를 this.this. 데이터 이름으로 접근

new Vue({
	el: "#app",
    data: {
		name: "홍길동"
        },
	methods: { 
    enInsa() {
	return "Hello " + this.name 
    	}
	}
});

Vue filters

-> filter를 이용하여 표현식에 새로운 결과 형식을 적용

-> 중괄호 보간법({{ }}) 또는 v-bind 속성에서 사용이 가능

Vue.filter(
	'count', (val) => {
		if (val.length == 0) {
        	return;
		}
	return `${val} : ${val.length}자`;
    }
);

Vue watch

-> Vue 인스턴스의 특정 프로퍼티가 변경될 때 실행할 콜백 함수 설정

var vm = new Vue({
	el: '#app',
	data: {
		message: ‘Hello‘,
        	reversedMessage: ‘’
	}, 
    	watch: {
		message: function (newVal, oldVal) {
        		this.reversedMessage = newVal.split(‘’).reverse().join(‘’);
		} 
   	}
});

<div id="app">
	<p>원본 메시지: "{{ message }}"</p> 
	<p> {{ reversedMessage }}"</p>
	<input type=“text” v-model=“message”>
</div>

-> message 값이 변화할 때마다 reversedMessage 값이 바뀐다.(거꾸로 된 message 표시)

 

Vue Event(v-on 디렉티브)

-> Dom 이벤트를 청취하기 위해 v-on 디렉티브 사용

new Vue({
	el: ‘#app’,
	data: {
		name: 'Vue.js'
	}, 
    methods: {
		greet: function (event) {
        	alert('Hello ' + this.name + '!') console.dir(event.target);
		} 
   	}
})

<div id="app">
	<button v-on:click="greet">Greet</button>
</div>

-> 버튼을 클릭하면 greet 메소드 호출!

---

맛보기 수준의 Vue를 접하고 난 뒤... 재밌음을 느꼈지만

이제 본격적인 컴포넌트, 모듈 간의 통신 등을 다음 포스팅에서 다뤄보도록 하겠다.

그럼 이만...