캡틴 판교(장기효) 님의 [Vue로 구현하는 PWA] 강의를 듣고 중요 내용을 요약하여 정리합니다.
아래 깃헙 블로그에서 가독성 좋게 보실 수 있습니다.
https://nuatmochoi.github.io/notesite/02.html
Event, Instance, Component, Axios | Vuejs Lecture Note
Event, Instance, Component, Axios Event Addeventlistener()는 onclick()과 비교했을 때 DOM이 많아졌을 때, 여러 개의 이벤트 타입들을 쉽게 바인딩할 수 있기 떄문에 사용한다. 이처럼 Vue에서는 v-on을 사용하여 버튼의 역할에 대해서 알기가 쉽다. 즉, 오브젝트가 변경되었을 때, Vue가 알아서 처리를 해주는 것이 용이한 부분이다. 카멜케이스와 파스칼케이스 카멜케이스는 appleBananaPinea
nuatmochoi.github.io
<event>
Addeventlistener -> dom이 많아졌을 때, 길어져서 관리하기 힘들다
-> vue에서는 v-on
<button id="btn" v-on:click="logText">click me</button>
ㄴ 버튼의 역할에 대해서 바로 알 수 있다.
Object가 변경되었을 때 vue가 알아서 처리
<카멜케이스와 파스칼케이스>
카멜 케이스 – appleBananaPineapple
파스칼케이스 – AppleBanananPineapple
<Vue Instance>
인스턴스 -> object를 생성자(new~)로 만든 것
Vue 3버전 -> proxy 로 object 관리
<script>
var vm = new Vue({
el: '#app'
})
</script>
<뷰 컴포넌트>
- 디버깅이 쉽고, 재사용률 높아짐
- 컴포넌트 이름 : { 컴포넌트 내용} -> <body>의 <div id=’app’> 태그에 컴포넌트 표시
- 전역 컴포넌트 -> 어떤 컴포넌트 있는지 보기 힘듬 -> 지역 컴포넌트로 선언 대다수
일반적으로는 컴포넌트의 template을 사용해서 tag를 정의하지만
중복되는 경우에 HOC (high order component)를 사용 (with render function & jsx)
https://kr.vuejs.org/v2/guide/render-function.html?
vuejs에서 권고되는 방법은 mixins 이나 scoped slot(data 중복시) 사용
react 에서는 함수 => 함수 => 이런 식으로 사용
vue 파일에서
<template> - html
<script> - js
<style> - css
<Vue Component 간 통신>
React 는 data를 아래서 위로 올릴 수 없다
Vue는 아래서 위, 위에서 아래 둘다 가능
ㄴ 상위 -> 하위 (props 전달) ::: flux 구조 (MVC pattern이 아님)
ㄴ 하위 -> 상위 (이벤트 발생)
Props (상위에서 하위로 data 보내기) : v-bind
Appheader.title -> vue는 이런 식으로 참조 불가능!! 하기 떄문에 props 사용
<app-header v-bind:프롭스 속성이름 ="상위 컴포넌트의 데이터 이름"></app-header>
<app-header v-bind:propsdata ="title"></app-header>
components : {
// '컴포넌트 이름' : '컴포넌트 내용'
'app-header' : {
template : '<h1> {{propsdata}} </h1>',
props: ['propsdata']
}
}
https://vuejs.org/v2/guide/components-props.html#Prop-Validation
Event (하위에서 상위로 data 보내기) : v-on
Vue.component('app-contents', {
template : `
<main>
전역 컴포넌트
<button v-on:click="sendEvent">변경</button>
</main>`,
method : {
sendEvent: function() {
this.$emit('change'); //아래서 위로 올릴 때 $emit 사용
}
}
})
<app-contents v-on:하위 컴포넌트의 이벤트이름="상위 컴포넌트의 메서드 이름"></app-contents><VSCODE prettier 설정>
Prettier -> setting -> prettier 검색
Format on save 체크
Vue.component("sibling-component", {
props: ["propsdata"],
template: `
<div>
{{ propsdata }}
<button> click me </button>
</div>`
});
//vue component에는 최상위에 하나의 tag만 있어야함(<div>)
//이러한 문제로 프론트가 컴포넌트 설계하고, html,css 퍼블리셔에게 요청케밥 표기법 (change-message) (changeMessage)가 아님!
-> 이렇게 안쓸거면 change:message
-> v-on:change:message === @change:message
<Vue와 React 비교>
[Vue.js]
- 화면 렌더링 라이브러리 (vue.js 코어 라이브러리)
- 페이지 전환 라이브러리 Vue Router
- 여러 컴포넌트의 데이터 관리 라이브러리 Vuex
- 프로젝트 생성 도구 Vue CLI
- 테스팅 도구 Vue Test Utils
- (X) HTTP 통신 라이브러리 Vue Resource -> 원래 프로젝트에서 붙이기 쉽게 하기
-> jQuery ajax / axios / request 등 다양하게 씀
[React]
- 화면 렌더링 라이브러리 (코어)
- 여러 컴포넌트의 데이터 관리 라이브러리 1 Redux
- 여러 컴포넌트의 데이터 관리 라이브러리 2 Mobx
- React Router
- React CLI (Create React App)
<Axios>
Axios -> promise based
new Vue({
el: "#app",
data: {
users: []
},
methods: {
getData: function() {
var vm = this;
axios
.get("https://jsonplaceholder.typicode.com/users/") //test api
.then(function(response) {
console.log(response.data);
vm.users = response.data;
});
}
}
});
fetchData : function(){ //http protocol 요청 method 4개
axios.get()
axios.post()
axios.put()
axios.delete()
}
Callback 함수안의 this-> var vm=this 처럼 선언하지 않으면 this가 window(브라우저)를 가리킨다.
<비동기>
var data = axios.get(url);
이렇게 쓸수없다!!!!
Single thread -> 비동기 처리를 받아오기 위해서 다른 작업을 못하는 것
'Web > Vue' 카테고리의 다른 글
| Vue.js 강의노트 04. [Event bus, 라이프사이클, ES6] (0) | 2020.02.15 |
|---|---|
| Vue.js 강의노트 03. [디렉티브, npm, Vue-CLI, component] (0) | 2020.02.12 |
| VuePress 실습 이후 추가 공부 사항들 (0) | 2020.01.13 |
| gh-page에 VuePress를 deploy할 때 template 깨짐 에러 해결 (0) | 2020.01.13 |
| [Vue.js 에러] Custom elements in iteration require 'v-bind:key' directives (2) | 2020.01.08 |