Vue.js
Vue는 React와 함께 주로 사용되는 frontend framework이다.
데이터가 변경되었을 때 그 부분만 따로 수정하거나 리렌더링할 수 있도록 해주는 등의 reactivity를 위해서 사용된다.
Vue.js 공식 레퍼런스
Vue.js 스타일 가이드
CLI를 사용하지 않을 때 로딩해야하는 Script
아래 스크립트는 기본으로 로딩해야 한다.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
전역 컴포넌트, 지역 컴포넌트
전역 컴포넌트
전역적으로 선언된 컴포넌트이다.
하나만 생성하면 자동으로 모든 인스턴스에 등록이 된다.
형식
Vue.component("컴포넌트 이름", "컴포넌트 내용");
예시
Vue.component(
"app-header", {
template: "<h1>Header</h1>",
});
지역 컴포넌트
인스턴스 내에 선언된 컴포넌트이다. (지역적 선언)
선언한 인스턴스 안에서만 등록이 되기 때문에 등록되지 않은 다른 인스턴스에서는 보이지 않는다.
형식
new Vue({
// 인스턴스
el: "인스턴스의 타겟",
components: {
// componet's' -> s 필수!
"컴포넌트 이름": "컴포넌트 내용",
},
});
예시
new Vue({
// 인스턴스
el: "#app",
components: {
// 다른 인스턴스에서는 렌더링 되지 않음
"app-header": {
template: "<footer>footer</footer>",
},
},
});
여러가지 변수들
<pre>data</pre> 사용 방법
컴포넌트 내의 변수로써 템플릿을 사용하여 화면단에 렌더링 할 수 있다.
<div id="#app">
{{ num }}
</div>
<script>
new Vue({
el: "#app",
data: {
num: 10,
},
});
</script>
<pre>computed</pre> 사용 방법
연산의 결과가 변수의 값이 되는 상황에서 주로 사용한다.
data처럼 템플릿을 활용하여 렌더링 할 수도 있다.
사용 시 함수 안에 return이 이루어져야 정상적으로 변수에 값이 대입된다.
new Vue({
// ...
computed: {
"변수 이름": function () {
// 연산
return "최종 값";
},
},
});
<pre>watch</pre> 사용 방법
<pre>data</pre> 내의 변수가 바뀌는 것을 트리거로 watch의 함수가 실행된다.
대부분의 경우 <pre>computed</pre>를 이용하는 것이 좋고, 무거운 동작이나 비동기 등의 경우에만 <pre>watch</pre>를 사용하는 것이 좋다.
new Vue({
data: {
num: 10,
},
computed: {
"변수 이름": function () {
// 연산
return "최종 값";
},
},
});
컴포넌트 통신 규칙
통신의 방향성이 정해지지 않고 유기적으로 연결될 경우, 오류가 발생하기 쉽고 추적이 어렵다.
통신에 방향성을 정해준다면 오류를 줄일 수 있고 추적이 용이해진다.
- 부모 컴포넌트 → 자식 컴포넌트 : props 전달
- 자식 컴포넌트 → 부모 컴포넌트 : event 전달
Props 사용 방법
부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용한다.
태그 안에 <pre>v-bind</pre> 속성을 추가함으로써 props를 사용할 수 있다.
<pre>v-bind</pre>는 함수/동적값 등을 html tag의 속성을 연결시켜주는 역할을 한다.
형식
<app-header v-bind: "props 속성 이름"="상위 컴포넌트의 data 이름"></app-header>
예시
<!-- 상위 컴포넌트 -->
<div id="app">
<!-- 하위 컴포넌트 -->
<app-header v-bind:nameProp="nameData"></app-header>
</div>
Event Emit 사용 방법
자식 컴포넌트에서 부모 컴포넌트로 데이터 전달/이벤트 발생을 원할 때 사용한다.
태그 안에 <pre>v-on</pre> 속성을 추가함으로써 사용할 수 있다.
형식
<app-header v-on:"하위 컴포넌트에서 발생한 이벤트 이름 (A)"="상위 컴포넌트의 메소드 이름 (B)"></app-header>
<script>
const appHeader = {
template: "<button v-on:click='실행할 메소드 이름 (C)'>button</button>"
methods: {
"실행할 메소드 이름 (C)": function () { // -> arrow function 사용 불가
this.$emit("발생시킬 이벤트 이름 (A)");
}
}
}
new Vue({
// ...
methods: {
"상위 컴포넌트의 메소드 이름 (B)": () => {
// ...
}
}
})
</script>
예시
<div id="app">
<app-header v-on:passEventName="logText"></app-header>
</div>
<!-- ... -->
<script>
const appHeader = {
template: `<button v-on:click="passEvent">click</button>`,
methods: {
passEvent: function () {
this.$emit("passEventName");
},
},
};
new Vue({
el: "#app",
components: {
"app-header": appHeader,
},
methods: {
logText: () => {
console.log("hi");
},
},
});
</script>
Router
Vue Router 공식 문서
Router
React에서의 router와 비슷한 역할을 한다.
URL에 따라 다른 페이지를 렌더링 할 수 있게 해준다.
이 때 하나의 페이지는 하나의 컴포넌트가 된다.
필수 Import
아래 두 개의 script를 import해야 한다.
단, import하는 순서를 잘 맞춰야 한다.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
사용 방법
React처럼 404 not found를 위해 <pre>path: "*"</pre>를 이용할 수 있다.
예시
const router = new VueRouter({
mode: "history", // url에 hash(#) 제거 (optional)
// routes : 페이지의 라우팅 정보(배열)
routes: [
// 각 페이지에 대한 정보 (객체)
{
path: "url",
// 페이지에 뿌려질 컴포넌트는 하나 -> not component's'
component: "해당 url에서 표시될 컴포넌트",
},
],
});
new Vue({
el: "element",
router: router,
});
웹 통신
비동기처리를 위해 이전에는 vue resource 라이브러리를 공식 지원하였으나,
지금은 중단되고 axios를 이용하는 것을 권장하고 있다.
Template 문법
데이터 바인딩
데이터를 표시하기 위해 사용한다.
사용
{{ data의 key }}
디렉티브
<pre>v-</pre>로 시작하는 tag의 속성들을 의미한다.
여러종류가 있으며, 대표적인 몇가지만 다루겠다.
- <pre>v-bind</pre>
- tag의 속성과 인스턴스의 내용을 bind 한다.
- 예시 : <pre>v-bind:class="class명"</pre>
- 예시2 : <pre>v-bind:class{ "class 명": "조건" }</pre>
- 조건절이 true이면 class명이 들어가고 아니면 들어가지 않는다.
- <pre>v-if</pre> / <pre>v-else</pre>
- if 조건 내에 따라 show/hide할 수 있다.
- 사용 방법
<pre><tag v-if="조건">...</tag>
<tag v-else>...</tag>
</pre>
- <pre>v-show</pre>
- 조건에 따라 display를 none으로 만들 수 있음
- 조건이 false일 경우 style의 display가 none으로 변경됨
- 사용 방법 : <pre><tag v-show="조건">...</tag></pre>
- <pre>v-on</pre>
- key up/down, onclick 등 마우스/키보드 입력에 대해 지정할 수 있는 속성
- 주로 on~로 시작하는 속성에 대입하기 위해 사용된다. (예 : onclick, onkeydown, onsubmit 등)
- 사용 방법 : <pre><tag v-on:click="함수이름>...</pre></pre>
- 특이사항 : <pre>submit</pre>
- submit.prevent="함수 이름"
- form에서 submit 시 새로고침을 방지하기 위해 사용하는 <pre>event.preventDefault();</pre>와 동일한 역할을 한다.
- 예 : <pre>v-on:submit.prevent="submitForm"</pre>
- submit.prevent="함수 이름"
- <pre>v-model</pre>
- input 태그에 입력된 값이 data의 변수에 대입되도록 해주는 속성
- 사용 방법 : <pre><tag v-model="data 변수 이름">...</tag></pre>
'Coding > [Web] Frontend' 카테고리의 다른 글
[JavaScript] 브라우저 로드 트리거 : DOMContentLoaded vs load (0) | 2023.03.27 |
---|---|
[CSS] 선택자 (0) | 2023.03.21 |
[HTML] colgroup (0) | 2023.03.21 |
XHTMl (0) | 2023.03.21 |
[React] react-device-detect (1) | 2021.07.17 |
댓글