Vue.js 기본 구조
Vue 컴포넌트의 경우 세개의 구역으로 나누어져 있다.
template: html부분이다. 이 안에 style태그와 script태그를 사용할 수 없다.
script: 이 템플릿에서 사용할 스크립트 코드이다. import로 외부라이브러리를 가져올 수 있다.
style: 이 템플릿에서 사용할 css이다. scoped속성을 부여하면 딱 이 스타일에서만 사용할 수 있다. 아무것도 없으면 자식 컴포넌트도 일괄 적용된다.
라우팅 : 웹페이지간의 이동 방법, 미리 해당하는 컴포넌트 페이지를 받아서 라우팅이라는걸 이용해서 화면 전환
Main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App.vue'
import router from './router' // 라우터 사용을 하겠다 추가
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// 부트스트랩 임포트
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// 부트스트랩 css
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
router,
render: h => h(App)
}).$mount('#app')
// 라우터 정의
강의에서 부트스트랩을 사용해서 부트스트랩을 사용하기 위한 임포트를 진행
App.vue
<template>
<div id="app">
<Header />
<div id="content" class= "content">
<router-view></router-view> <!-- 헤더밑에 자주 바뀌는 컨텐츠 영역 라우터를 이용해서 해당하는 컴포넌트 불러와서 재로딩 -->
</div>
</div>
</template>
<!-- import 되어있는 헤더의 컴포넌트 명 입력-->
<script>
import Header from "./components/layout/Header.vue";
export default {
name: "App",
components:{
Header,
},
};
//<!-- import 되어있는 헤더를 넣어줘야 함 Header-->
</script>
<style>
</style>
router.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./views/Home.vue";
import About from "./views/About.vue";
Vue.use(VueRouter);
const router = new VueRouter({
mode : "history",
routes: [
{
path:'/', component: Home
},
{
path:'/about', component: About
}
]
})
export default router;About.vue Home.vue 두개의 vue파일이 있을때
path 마다 어떤 컴포넌트로 연결할지 정의
인스턴스 라이프사이클 다이어그램
아래 의미인데 어렵다,,
beforeCreate : Vue 인스턴스가 생성되고 데이터에 대한 관찰 기능 및 이벤트 감시자 설정 전에 호출됨
created : Vue 인스턴스가 생성된 후에 데이터에 대한 관찰기능, 계산형 속성, 메서드, 감시자 설정이 완료된 후에 호출된다.
beforeMount : 마운트가 시작되기 전에 호출됩니다.
mounted : el에 vue 인스턴스의 데이터가 마운트된 후에 호출됩니다.
beforeUpdate : 가상 DOM이 렌더링, 패치되어 전에 데이터가 변경될 때 호출됩니다. 이 훅에서 추가적인 상태 변경을 수행할 수 있다. 하지만 다시 렌더링되지 않는다.
updated : 데이터의 변경으로 가상 DOM이 다시 렌더링되고 패치된 후에 호출된다. 이 훅이 호출되었을땐 이미 컴포턴트의 DOM이 업데이트된 상태이다.
beforeDestory : Vue 인스턴스가 제거되기 전에 호출된다.
destroyed : Vue 인스턴스가 제거된 후에 호출된다. 모든 디렉티브 바인딩이 해제되고 이벤트 연결도 모두 제거 된다.
인스턴스가 생성된 라이프 사이클
set버튼이나 input text을 을 통해 데이터가 바뀌면 라이프 사이클이 변경된다
<template>
<div>
<h1>
welcome to {{title2}}!
</h1>
<input type = "text" v-model="input1" />
<button type ="button" @click = "getData">Get</button>
<button type="button" @click= "setData">Set</button>
<select class = "form-control" v-model="region" @change="changeregion">
<option :key="i" :value="d.v" v-for="(d,i) in options">{{d.t}}</option>
</select>
<table class= "table table-bordered" v-show ="tableShow" >
<tr :key="i" v-for="(d,i) in options">
<td>{{d.v}}</td>
<td>{{d.t}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return{
title: "개발자의 품격",
title2: "Seoul",
input1 : "abcd", // 컨트롤하고싶은 데이터 v-model
options:[
{v: "S", t: "Seoul"},
{v: "J", t: 'Jeju'},
{v: "B", t: 'busan'}
], // 배열 형태 v-fore
region: "J",
tableShow: false, // tableShow 값이 true인경우에만 보여주기
// v-show 조건상관없이 렌더링은 한다 미리 렌더링을 해놓으면 자주 사용시에도 리소스를 덜 쓴다
// v-if렌더링 조차 안한다 특정 조건이 있을땐 v-if를 사용 렌더링이 반복 될경우 리소스를 많이씀
};
},
watch: {
input1() {
console.log(this.input1);
}, // 메소드형식으로바꾸고 input1데이터가 조금이라도변경되면 캐치해서알수있다.
title(){
}
},
methods: {
getData(){
alert(this.input1);
},
setData(){
this.input1 = "12345"
},
changeregion(){
alert(this.region)
}
}, // @click @change이벤트발생
beforeCreate(){
console.log("beforeCreate")
},
created(){
console.log("create")
},
beforeMount(){
console.log("beforeMount")
},
mounted(){
console.log("mounted")
},
beforeUpdate(){
console.log("beforeupdated")
},
updated(){
console.log("updated")
},
beforeDestroy(){
console.log("beforedestroy")
},
destroyed(){
console.log("Destory")
}
};
//중요한점 데이터 핸들링, 바인딩
</script>학습내용
- vue cli 를 통해 vue 프로젝트 빠르세 생성하는법
- 라우터를 통해 url path 를 따라서 호출 할 컴포넌트를 바꾸는 법
- 데이터를 처리하는 법, 메소드 어느곳에서 어떤 형식으로 써야 하는지
- 인스턴스 라이프 사이클
어렵다.. vue
참고
https://www.youtube.com/watch?v=sqH0u8wN4Rs&t=2071s
