Vue.js
Vue.js 는 React나 Angular보다 러닝커브가 높지 않아서 괜찮다고들 하는데..
일단 써봐야 알 것 같다!
일단 이번 포스팅은 아래의 강의를 듣고 진행중이다.
이미지 클릭시 링크이동 꼬우~
Vue 설치하기
이 글을 읽는 독자들 대부분은 npm은 깔려 있을 것이라서 npm설치는 생략..!
설치 : npm install -g @vue/cli
버전확인 : vue --version
프로젝트 시작 : vue create 프로젝트명
서버 시작 : npm run serve
vue create 땡땡 명령어를 치면 아래와 같은 화면이 뜬다!
default 로 설정을 해주고 엔터를 치면 화면이 하나 더 나오는데 캡쳐 까먹..!
npm으로 쓸지 yarn으로 쓸지에 대한 화면이 나오는데.. 이왕 npm으로 시작한거 npm으로 끝장 내기위해 npm 고고!!
내 디렉토리에 vue project가 깔렸다면 서버를 켜보자.
npm run serve
짠 이렇게 잘 뜨고있다.
서버를 끄고 vue ui 명령어 입력 고고
그러면 이런 화면이 뙇!
나는 유튭에서 한 것처럼 Desktop에다가 내 프로젝트 디렉토리를 만들거다
뷰가 색깔은 정말 기가 막히게 잘 뽑아냈다. 민트민트하니 넘 청량하고 예쁜데..
홍콩시위 발언 왜때문에… 에반가 이름이? 에바쎄바세요 정말
여튼.. 이게 리액트에 없는 기능이라 신기하긴한데.. 굳이 써야할 필요성은 아직 모르겠다ㅋ
어찌됐든 vue project를 열어보자.
React에서 index.js역할을 하는게 main.vue 파일 같은데 기본 구성은 아래와 같다.
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')Vue 쓰면서 설치하면 편한 것들
VScode에서…
vs code extension에 vetur 라고 검색 고고!
원래는 vue랑 이름이 똑같은 vue를 깔았다가.. 영상에서 이걸 깔길래 삭제하고 이걸로 고!
이걸 깔아야 색깔이 알록달록 보기 편하다.
vs code extension에 vue 2 Snippets 라고 검색 고고!
이게 있으면 자동완성이 된다. 아 근데 괄호 다 입력해야 자동완성이 되는데 지금은..
괄호없이 키워드만 입력했을때 자동완성 되는 것도 한번 찾아봐야지 ㅜㅜ
Chrome에서..
chrome extension에 vue.js devtools 라고 검색 고고!
이게 있으면 크롬 개발자도구 열었을때 Vue 라는 탭이 생기고, 컴포넌트 구조를 보여준다.
컴포넌트 구성
<template>
<div class="todo-item" v-bind:class="{ 'is-complete': todo.completed }">
<input type="checkbox" v-on:change="markComplete" />
<p>{{ todo.title }}</p>
<button @click="$emit('del-todo', todo.id)" class="del">x</button>
</div>
</template>
<script>
export default {
props: ["todo"],
methods: {
markComplete() {
// console.log(123);
this.todo.completed = !this.todo.completed;
}
}
};
</script>
<style scoped>
.todo-item {
background: #f4f4f4;
padding: 10px;
border-bottom: 1px #ccc dotted;
}
.is-complete {
text-decoration: line-through;
}
.del {
background: #ff0000;
color: #fff;
border: none;
padding: 5px 9px;
border-radius: 50%;
cursor: pointer;
}
</style>특이한 점은 template, script, style을 따로 따로 지정했다는 거!
특히나 그냥 style을 쓰면 global로 적용되는데, <style scoped></style>로 지정해주면
그 스타일태그가 쓰이는 컴포넌트 내에서만 적용이 된다는 점..!
App 파일
App.vue 파일의 style에 reset.css 와 비슷한 기능을 하게 하기 위해 아래의 style 정의해주기 Todos 컴포넌트를 불러오기 위해 import 해오기.
<template>
<div id="app">
<Todos />
</div>
</template>
<script>
import Todos from "./components/Todos";
export default {
name: "app",
components: {
Todos
},
data() {
return {
todos: [
{
id: 1,
title: "Todo One",
completed: false
},
{
id: 2,
title: "Todo Two",
completed: true
},
{
id: 3,
title: "Todo Three",
completed: false
}
]
};
}
};
</script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.4;
}
</style>Complete mark 채우기
우리가 리액트에선 onClick 함수를 줬었는데.. 뷰에서는 v-on이라는 함수를 쓰는 것 같다
<template>
<div class="todo-item" v-bind:class="{ 'is-complete': todo.completed }">
<input type="checkbox" v-on:change="markComplete" />
<p>{{ todo.title }}</p>
</div>
</template>
<script>
export default {
props: ["todo"],
methods: {
markComplete() {
// console.log(123);
this.todo.completed = !this.todo.completed;
}
}
};
</script>
Vue 에서 이벤트 확인하기
Vue 탭 사이드에 있는 이벤트를 눌러보면 이벤트가 일어나는 순서대로 딱 다 보인다!
와.. 이렇게 하면 디버깅하기 진짜 좋을 것 같다.
나중에 뷰로 작업할 일이 생기면 영상을 다시 정독해보면서 공부 해야겠다.
지금은 리액트 공부가 더 시급한거 같으므로 여기까지만 작성해본다!