Vue.js
사용자 인터페이스를 만들기 위한 프로그래시브 프레임워크이다.
react는 라이브러리 vue는 프레임워크
기본 문법
- 선언적 렌더링
<div id="app">
{{message}}
</div>
var app = new Vue({
el: '#app'
data : {
message : 'Vue'
}
})출력화면 :: Vue
이렇게 하면 message를 변경함으로 화면 값을 변경할 수 있고 HTML와 직접 상호작용할 필요가 없다.
- 팀원들을 위한 태그 설명
HTML 태그는 웹 문서에 어떤 표시를 해주는 것이라고 할 수 있다.
어떤 영역은 이미지이고..<img>어떤거는 링크고...<a>어떤 영역을 구분하기도 하고...<div>이런식으로 태그를 통해서 페이지의 내용을 이해할 수도 있게된다.
<nav> 태그 안이면 아 네이게이션 바 역할을 하는 애들이 있겠구나
그래서 HTML 태그는 이렇게 사용한다.
<태그명> 태그할 대상 </태그명>
그리고 태그는 태그마다 속성을 부여할 수 있다.
태그의 속성은 <태크명 속성="값"> 형태로 사용하고 태그마다 여러 속성을 부여할 수 있다.
예시 : <font color="red" face="Dotum"> ~~</font>
font 태그에 대해 속성을 정의했다. 색상과 글꼴에 대한 속성이다.
태그들을 관리하기 위해서 id와 class를 지정해줄수 있는데, 태그들을 선택하거나 다룰 때 편리해진다.
id는 하나의 태그에 적용할 수 있고, 클래스는 여러 태그에 적용할 수 있다.
Vue에서 제공하는 특수 속성에는 v-가 붙어있다.
반응형으로 보인다!!
v-bind : 렌더링된 DOM 에 보여질 특수 동작.
v-if : 해당 속성 값이 true일 경우 태그가 보여진다.
v-for : 속성 값으로 받은 배열을 바인딩하여 리스트로 보여준다.
v-model : 양식에 대한 입력과 앱 상태를 양방향으로 바인딩할 수 있게 해준다
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message"> //input에 들어간 값이 p 태그 안에서 보인다
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: '안녕하세요 Vue!'
}
})컴포턴트를 이용한 작성 방법
Vue 컴포넌트를 정의하면 다른 컴포넌트의 템플릿에서 이용할 수 있다.
대규모 애플리케이션에서는 개발을 쉽게 관리할 수 있도록 전체 앱을 컴포넌트로 나누는 것이 필수적이다.
Vue.component('todo-item' , { vue 코드 } )
<todo-item> 다른 파일에서 가져왔읍니다 </todo-item>
이렇게 컴포넌트를 가져올 때 똑같은 텍스트만 가져다 쓰는 게 되는데 이때 데이터 전달을 위해 props라는 속성을 통해 데이터를 전달할 수 있다.
부모가 자식꺼를 가져다 씀
ex) main.vue 가 todo-item 갖다가 태그로 쓸거다. 그러면 부모는 main / 자식은 todo임
이때 props는 부모가 자식에게 데이터 전달을 하기 위해 사용하는 것이다.
vue 가이드 예제가 너무 이해 안되게 써져있어서 props 예제를 따로 구해왔다
<template>
<div>
<Child :childValue='value'></Child>
</div>
</template>
<script>
import Child from "@/views/Child";
export default {
components: {
Child
},
data() {
return {
value: 'superpil',
}
}
}
</script>
-------------------------------------------
<template>
<div>
{{ childValue }}
</div>
</template>
<script>
export default {
props: ["childValue"],
created() {
console.log('this.childValue', this.childValue);
}
}
</script>보면 부모 vue 에서 value를 담아놓고 props를 통해 그 value를 받아오는 것을 알 수 있다.
너무 이해하기가 좋아보이는 이미지에용
출처 : https://pygmalion0220.tistory.com/entry/Vue-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%A0%84%EB%8B%AC-Props
router
vue에서도 router를 이용해 화면 경로를 나눌 수 있다.
frontend/src/routes/index.js에서 라우팅 관련 설정을 해야한다.
path 에 따른 component
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/MovieIndexPage'
import Show from '@/components/MovieShowPage'
Vue.use(Router)
export const router = new Router({
mode: 'history',
routes: [{
path: '/',
name: 'index',
component: Index
},
{
path: '/:id',
name: 'show',
component: Show
}
]
})이러고 app.vue에서 컴포넌트를 추가하여 메인 페이지에서 router로 연결된 페이지가 출력될 수 있도록 추가해줘야 한다.
Vue.js에서의 REST API
Axios를 이용해 REST API를 만들 수 있다.
Axios는 브라우저, node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.
created() 할 때 $axios.get('/api/get') 이런식으로 페이지 호출 시 api 호출 가능
https://carrotweb.tistory.com/114
https://velog.io/@doeezy/Nuxt.js-VueNode.jsExpress-RESTFul-API-%EB%A7%8C%EB%93%A4%EA%B8%B0
