[Vue.js] 🖖 Vue.js 기초 지식
반응형
[Vue.JS 2.0] 소개 및 시작하기
- Vue는 다른 프레임워크나 라이브러리에 비해 신생언어
- 가볍고, 복잡도가 낮아서 사용이 편하고 시작하기 쉽다.
- 이름처럼 View에만 초점을 두었기 때문에 다른 라이브러리나 프레임워크와 혼용하기 쉽다.
- 처음 시작하는 단계의 과정이 복잡하다.
- 한글화가 잘 되어있다.
- React보다 성능이 뛰어나다.
- React에서 JSX를 사용하는 것처럼 Vue도 비슷한 템플릿을 사용한다.(원한다면 JSX도 사용 가능하다.)
- 템플릿의 장점은 HTML파일에서 바로 사용할 수 있다는 점이다.
- SSR이 지원된다.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width-device-width" />
<title>JS Bin</title>
</head>
<body>
<div id="app">
<h1>Hello, {{ name }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>JS
var app = new Vue({
el: '#app',
data: {
name: "geon"
},
});[Vue.JS 2.0] Directive(지시문), Vue 엘리멘트를 위한 특별한 속성
Directive?
- 지시문과 같은 성격
- Directive의 종류
v-text
{{}}대신 사용 가능한 directive
v-html
- html형식으로 렌더링(React의
dangerouslySetInnerHTML과 비슷한 역할)하는 directive
v-show
- 해당 엘리멘트를 visibility 결정하는 directive
v-if
- 해당 조건문을 만족할 때 visible한 directive
v-else
- 해당 조건문을 만족하지 않을 때 visible한 directive
v-else-if
- 첫 번째 조건문을 만족하지 않을 때, 확인하는 다른 조건문에 해당하는 directive
- 위치는 항상
v-if다음 위치에 있어야하고,v-else를 사용한다면, 그 사이에 있어야합니다. - 여러번 사용이 가능합니다.
v-pre
- 특정 엘리먼트를 무시하는 directive
- 컴파일 속도를 빠르게해준다.
{{}}머스태쉬 태그를 그대로 표시할 수 있음
v-clock
- JavaScript가 실행되기 전에 즉, Vue.JS instance가 제대로 준비되기 전까지 우리의 템플릿을 위한 HTML 코드를 숨기고 싶을 때 사용하는 directive
v-once
- 초기에 딱 한번만 렌더링하는 directive
- 변동이 없고 한결같은 정적인 부분에 사용합니다.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app" v-cloak>
<h1 v-if="value > 5">value가 5보다 크군요</h1>
<h1 v-else-if="value===5">value가 정확히 5네요</h1>
<h1 v-else="value > 5">value가 5보다 작아요</h1>
<h2 v-once>초기 값: {{value}}</h2>
<h2>현재 값: {{value}}</h2>
<h1 v-pre>{{ 그대로 렌더링 }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>CSS
[v-cloak] {
display: none;
}JS
var app = new Vue({
el: '#app',
data: {
name: "<i>italic</i>",
visible: false,
value: 0
},
});v-bind
- 엘리먼트의 속성값을 바꾸는 데 사용하는 directive
- 생략이 가능하며 내부에서 JavaScript 코드 사용이 가능합니다.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app" v-cloak>
<h1>Hello, {{name}}</h1>
<h2>{{ Date() }}</h2>
<img :src="smile ? feelsgood : feelsbad"/>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>JS
var app = new Vue({
el: '#app',
data: {
name: "Vue",
smile: true,
feelsgood: "https://i.cbc.ca/1.4986551.1548087152!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/smile-emoji.jpg?",
feelsbad: "https://i.pinimg.com/originals/4f/49/65/4f4965192fc86eeb8057219075ebc2bd.png"
}
});v-for
- 배열 렌더링을 위한 directive
item in items혹은(item,index) in items의 형태로 사용한다. (JS의 array method 사용법과 for loop를 섞은 느낌)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app" v-cloak>
<h2>To do</h2>
<ul>
<li v-for="(todo, index) in todos">{{index}}. {{todo.text}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>JS
var app = new Vue({
el: '#app',
data: {
todos: [
{ text: 'Vue.js 튜토리얼 작성하기'},
{ text: 'Webpack2 알아보기'},
{ text: '사이드 프로젝트 진행하기'}
]
}
});v-model
- 양 방향 데이터 바인딩을 위한 directive
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<h1>Hello, {{ name }}</h1>
<h3><input type="checkbox" v-model="smile"/> smile emoji</h3>
<img :src="smile ? feelsgood : feelsbad"/>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>v-on
- 이벤트를 처리하기 위한 directive
- Vue Object의 methods에 있는 함수를 이용합니다.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<h1>Counter: {{number}}</h1>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>JS
var app = new Vue({
el: '#app',
data: {
number: 0
},
// app Vue instance를 위한 methods
methods: {
increment: function() {
// instance 내부의 데이터모델에 접근할 땐, this를 사용한다.
this.number++;
},
decrement: function() {
this.number--;
}
}
});Vue Components
- 화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하는 것(React랑 똑같다)
- Vue instance를 생성하기 전에 꼭 Component부터 등록해야한다.
Vue Object Property
- methods
v-on에 쓰일 함수를 정의합니다.
- filters
- 문자열에 변화를 줍니다.
HTML
...
<li>{{ cat.name | capitalize | kittify }}</li>
...JS
...
filters: {
capitalize: function(value) {
return value.toUpperCase()
},
kittify: function(value) {
return value + 'y'
}
}
...Vue Lifecycle method
부모 자식 컴포넌트 간의 통신
-
JS에서 props 변수의 이름을 camelCase로 하면 HTML에서는 kebab-case로 접근해야합니다.
HTML<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width-device-width" /> <title>JS Bin</title> </head> <body> <!-- 상위 컴포넌트 --> <div id="app"> <!-- 하위 컴포넌트에 상위 컴포넌트가 갖고 있는 message 를 전달함 --> <child-component v-bind:passed-data="message"></child-component> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="vue.js"></script> </body> </html>JS
Vue.component("child-component", { props: ["passedData"], template: "<p>{{ passedData }}</p>" });
Vue.JS에서의 컴파일// parent Component var app = new Vue({ el: "#app", data: { message: "Hello Vue! from Parent Component" } }); \`\`\` -
템플릿으로 작성한 코드가 자바스크립트 형태로 변환되어 Vue에서 조작할 수 있도록 하는 과정
-
CDN을 사용하는 경우 Browser에서 이루어지고, 이를 runtime-compilation이라 한다.
참고
- [Vue.JS 2.0] by veloport
- Vue.js 입문서
반응형