Vue.js 기본 제공된 소스를 수정하기 위해서 먼저 해주어야 할 사항이다.
커맨드 창에서 npm install vue-router --save
https://bootstrap-vue.org/ 사이트에 접속하여 Get Started 버튼을 눌러서 순서대로 진행한다.
커맨드 창에서 아래 명령어를 입력한다.
yarn add vue bootstrap bootstrap-vue
위와 같은 에러 메시지가 나오면 CMD 창을 관리자 권한으로 열어서 명령어를 입력해야 한다.
관리자 권한으로 CMD 창 여는 방법
Window 키 + R 누르고 메시지 창에 cmd 입력하고 Ctrl + Shift + Enter키 누른다.
Vue.js 기초를 이해하기 위해서 "한시간만에 끝내는 Vue.js" 유투브 강좌를 듣고 실습한 걸 토대로 구글링해서 내용을 좀 더 추가하여 적어둔다.
https://www.youtube.com/watch?v=sqH0u8wN4Rs
작업한 파일 구조
- 추가한 폴더 : layout 폴더, views 폴더
- 추가한 파일 : Header.vue, Home.vue, About.vue, router.js
- 수정한 파일 : App.vue, main.js
소스코드
|
<!--App.vue-->
<template>
<div id="app">
<Header />
<div id="content" class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
import Header from './components/layout/Header.vue'
export default {
name: 'App',
components: {
Header,
}
}
</script>
<style>
</style>
|
<Header /> 에서 />로 넣어주는 것을 self closing tag 라고 한다.
<br /> 가 예전에는 <br> 이었는데 self closing tag 를 추가하는 것이 최신 문법이다.
|
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
|
|
// router.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./views/Home";
import About from "./views/About";
Vue.use(VueRouter);
const router = new VueRouter({
mode: "history",
routes: [{
path: "/",
component: Home
},
{
path: "/about",
component: About
},
]
});
export default router;
|
|
<!--Header.vue-->
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template #button-content>
<em>User</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
export default {
name: "Header"
}
</script>
<style scoped>
</style>
|
|
<!--Home.vue-->
<template>
<div>
<h2>Welcome to {{ title }}!</h2>
<input type="text" v-model="input1">
<button @click="getData">Get</button>
<button @click="setData">Set</button>
<div><p></p></div>
<select class="form-control" v-model="region" @change="changeRegion">
<option :value="d.v" v-for="(d,i) in optins" :key="i">{{d.data}}</option>
</select>
<div><p></p></div>
<table class="table table-bordered" v-if="tableShow">
<tr v-for="(d,i) in optins" :key="i">
<td>{{d.v}}</td>
<td>{{d.data}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "Home",
data(){
return {
// v-model 을 통해서 데이터 바인딩 처리
title: "MySite",
input1: "abc",
optins: [
{v:"S", data:"서울"},
{v:"B", data:"부산"},
{v:"D", data:"대전"},
],
region: "D",
tableShow: false,
// v-show 는 랜더링을 하지만, v-if는 랜더링 자체를 하지 않는다.
}
},
watch:{
input1(){
// 특정 데이터를 모니터링하고 있다가
// 캐치해서 새로운 작업 수행 처리
console.log(this.input1);
},
},
methods: {
getData(){
alert(this.input1);
},
setData(){
this.input1 = "12345";
},
changeRegion(){
alert(this.region);
},
},
// Vue LifeCycle
beforeCreate(){
// Vue 인스턴스가 초기화된 직후에 발생한다.
// 컴포넌트가 DOM에 추가되기도 전이다.
// data, event, watcher에 접근하기 전이라 data, methods에도 접근할 수 없다.
console.log("beforeCreate");
},
created(){
// beforeCreate() => data() => created() 순으로 실행된다.
// data에 직접 접근이 가능하지만, 아직 템플릿과 가상DOM에는 접근할 수 없다.
// 이제 data와 events가 활성화되어 접근할 수 있다.
console.log("created");
},
beforeMount(){
console.log("beforeMount")
},
mounted(){
// 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행되므로,
// data, computed, methods, watch 등 모든 요소에 접근이 가능하다.
console.log("mounted");
},
beforeUpdate(){
// DOM이 패치되기 전에 데이터가 변경될 때 호출된다.
console.log("beforeUpdate");
},
updated(){
// 데이터가 변경되어 가상 DOM이 다시 렌더링되고 패치된 후에 호출된다.
console.log("updated");
},
beforeDestroy(){
// 해당 인스턴스가 소멸(뷰 컴포넌트 제거)되기 직전에 beforeDestroy훅이 호출된다.
console.log("beforeDestroy");
},
destroyed(){
// 인스턴스가 소멸되고 난 직후에 destroyed 훅이 호출된다.
// Vue의 모든 디렉티브(v-)가 바인딩 해제되고
// 모든 이벤트 리스너가 제거되며 모든 하위 Vue 컴포넌트도 삭제된다.
console.log("destroyed");
},
}
</script>
<style scoped>
</style>
|
|
<!--About.vue-->
<template>
<div>
<h1>About Page</h1>
</div>
</template>
<script>
export default {
name: "About"
}
</script>
<style scoped>
</style>
|
728x90
'Vue3 > Vue개요' 카테고리의 다른 글
| Vue.js 환경 설정 (0) | 2022.01.13 |
|---|
Link2Me
