Vue설치
-
Vue-Cli를 다운받는다.
-
터미널에서 폴더를 생성하고, 그 폴더 안에서 sudo npm install -g vue/cli 명령어를 사용하여 cli를 다운받는다.
-
Vue create 프로젝트명으로 프로젝트를 생성한다.
Vue 간결한 정리
- 뷰는 컴포넌트 기반의 SPA이다.
대표적인 웹 프론트엔드 프레임워크이다
cli를 통해서 빠르게 생성했고
화면 구성에 중요한 레이아웃을 만들고
라우터를 통해서 유저가 url path를 따라서 호출할
컴포넌트를 바꾸는경우.
데이터처리방식과 메소드를 어느곳에서 어떤 형식으로 쓰는지
실제로 뷰 인스턴스가 생성되고 소멸되는 뷰 라이프사이클을
이벤트훅은 어떻게 일어나는지 봄
기본적인 형태로 데이터를 바인딩할때는 v-model을 쓰고
html안에서는 {{}} 이형태로 데이터를 넣어준다.
이벤트는@통해서 메소드 호출을 할수있다.
데이터 형태가 배열인 경우에는 v-for를 통해서 데이터를 컨트롤한다.
V-if 와v-show를 통해서 화면에 element를 처리한다.
watch를 통해서 데이터를 실시간 모니터링해준다.
Vue 구조 LifeCycle
-
이벤트 lifecycle 훅 일어나는 순서로 최종적으로 화면 템플릿에 바인딩 시킨다.
처음 뷰 컴포넌트 생성 후 beforeCreate(){},
created(){},
beforeMount(){},
mounted(){
컴포넌트가 돔에 추가된 이후
},
데이터가 변형되거나 하면 리렌더링된다
beforeUpdate(){
리렌더링 되기 전의 이벤트 훅이다.
},
updated(){
컴포넌트가 돔에 추가된 이후
리렌더링 후 일어난 이벤트 훅이다.
},
beforeDestroy(){
컴포넌트를 빠져나가서 다른 컴포넌트로 이동할때
컴포넌트가 제거되기 직전에 일어나는 이벤트 훅이다.
},
destroyed(){
컴포넌트가 돔에 추가된 이후
}
BootStrap Vue
- main.js에서
Import {BootstrapVue, IconsPlugin} from ‘bootstrap-vue’
이런식으로 임포트하고 Vue.use(BootstrapVue) 이런식으로 사용해준다.
Vue Router(라우터)
-
Npm install vue-router —save
-
route.js파일을 만들고 views페이지들의 파일들을 각각 만들어주어 Route 할수있게 해준다.
-
import VueRouter from "vue-router";
Vue.use(VueRouter);const router = new VueRouter({ mode: 'history', routes: [{ path:"/", component: Home }, { path:"/about", component: About } ]}); -
최종적으로 App.vue파일에 template태그 안에있는 Router-view태그안에서 페이지 컴포넌트를 가져와서 실행된다.
-
다시 main.js파일로와서
new Vue({ router, render: h => h(App), }).$mount('#app') 앱을 마운트 하면서 router를 사용하게된다.
Views 페이지
-
데이터를 핸들링하여 바인딩하고 가져오는 처리해준다.
<template> <div> <h1>Welcome to {{title}}</h1> <input type="text" v-model=“input1” //value대신 v-model을 활용하여 데이터를 바인딩하고 처리함. <button type=“button” @click=“”> Get</button> </div> </template>: 템플릿에서는 title을 가져와서 텍스트형식으로 바인딩하여 사용한다.
-
Export default { data(){ //데이터를 정의하고 리턴해준다. return{ //쓰려고하는 데이터를 변수를 정하여 사용한다. title: ’개발자’, input1: “abc” }; }, };
Vue 함수와 문법
-
input태그에서 value를 v-model로 사용
-
button태그에서 onClick을 @click으로 사용한다.
-
click이벤트를 활용하려면 클릭했을때 함수를 불러와야하는데
<button type=“button” @click=“getData”> Get </button> //getData를 써준다. 그걸 data(){ title: ~~~, input1: ~~, }, 밑에 method:{ getData(){ alert(this.input1); //this객체를 사용하여 data에 있는 값을 뽑아서 쓴다. } -
Watch
: 사용하는 데이터 변수를 function 형식으로 만들어 사용하는데 데이터 변경이 일어나면 바로 캐치해서 알수있다.
데이터가 변경되는지 계속 모니터링하는 문법함수이며, 데이터를 입력해서 바뀔때마다 함수가 실행되면서 모니터링한다. -
v-for in
data에 배열로 options: [ {v: "S", t: "Seoul"}, {v: "J", t: "Jeu"}, {v: "B", t: 'Busan'}, ], Region : “J” 이런식으로 부여를 해주고 map()처럼 돌린다. **셀렉트 박스 폼이다. <select class="form-control" v-model=“region”> <option :key="i" :value=“d.v” v-for="(d,i) in options">{{d.t}} </option> </select> //위에 options라는 객체배열을 돌린다. //앞에 key에 i를 꼭 넣어주고 {{d,t}}에서 d는 가로 한줄을 의미하고 t는 안에 t값을 의미한다.
: 이렇게 섹렉트 콤보박스에 대한 v-model에서 데이터를 바인딩하는부분을 region을
이렇게 처리해준다. 배열 형태로 처리해야되는건 v-for를 이용한다.-
행을 돌리는 테이블 폼
<select> </select> <table class=“ table table-bordered”> <tr :key=“I” v-for=“(d,i) in options”> <td>{{d.v}}</td> <td>{{d.t}}</td> </tr> </table> : Tr 을 통해서 행렬중 행으로 데이터를 돌린다. V-for를 통해서 실제 element. 즉 el에 반영할수있다. -
change 이벤트
<select class=“form-control” v-model=“region” @change=“changeRigion”> </select> Method:{ changeRegion(){ alert(this.region); } } -
V-if / V-show
tableShow값이 true인 경우에만 테이블 볼수있게 해주는법 data(){ Return{ title: , options: , region: , taleShow: false, } } 두가지 방법이 있는데 v-if와 **V-if 조건에 안맞으면 렌더링도 안한다. 사용자가 액션을 할지말지 모를때 렌더링 자체를 안해놓으면 리소스를 적게 잡아먹어서 유용하다. <table class=“table table-bordered” v-if=“tableShow”> </table> **V-show 조건에 맞든 아니든 일단 렌더링은 해주고 안보여준다. => 빈번한 상황에 리소스를 덜 잡아먹어서 v-if보다 더 유용히다. <table class=“table table-bordered” v-show=“tableShow”> </table>
