[패스트캠퍼스 수강후기] 프론트엔드 강의 58회차 미션
41강 UI 컴포넌트 제작부분 7번째부터 11번째 클립까지 들었다
벌써 마지막주라니 신기하다
인강을 이렇게 규칙적으로 다 들어본 적이 거의 10년만인 것 같다
마지막 까지 화이팅
vue.js특징 3가지
1. 컴포넌트 기반 개발 방식
화면을 여러개의 작은 단위로 쪼개어 개발
재사용성 증가, 구현속도 증가, 코드 가독성 증가
2. MVVM패턴
화면 UI코드와 백엔드 데이터 처리 코드를 분리
3. 리액트와 앵귤러의 장점을 흡수
two way data binding
virtual DOM
event emit과 문자열 바꾸기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- <app-header v-bind:프롭스속성이름="상위 컴포넌트의 데이터"></app-header>-->
<app-header v-bind:title="str"></app-header>
<!--<app-contents v-on:하위컴포넌트에서 발생한 이벤트 이름 = "상위 컴포넌트의 메서드 이름"></app-contents>-->
<app-contents v-on:change="changeStr"></app-contents>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
//인스턴스 옵션
el: '#app',
data: {
str: '프롭스문자열'
},
methods: {
changeStr: function(){
this.str = '변경됐습니다'
}
},
components: {
//'컴포넌트 이름' : 컴포넌트 내용,
'컴포넌트 이름' : 컴포넌트 내용,
'app header' : {
// app-header 컴포넌트 내용
props: ['title'],
template: '<h1>{{title}}</h1>'
},
'app-contents' : {
template : '<main>컨텐츠<button v-on:click="change">메세지 변경</button></main>',
methods: {
change() {
this.$emit('change');
}
}
}
}
})
</script>
</body>
</html>
리액트와 컴포넌트 통신 방법 비교
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- <app-header v-bind:프롭스속성이름="상위 컴포넌트의 데이터"></app-header>-->
<app-header v-bind:title="str"></app-header>
<!--<app-contents v-on:하위컴포넌트에서 발생한 이벤트 이름 = "상위 컴포넌트의 메서드 이름"></app-contents>-->
<app-contents
v-bind:on-change="changeStr"
></app-contents>
<!--v-on:change="changeStr"-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
//인스턴스 옵션
el: '#app',
data: {
str: '프롭스문자열'
},
methods: {
changeStr: function(){
this.str = '변경됐습니다'
}
},
components: {
//'컴포넌트 이름' : 컴포넌트 내용,
'컴포넌트 이름' : 컴포넌트 내용,
'app header' : {
// app-header 컴포넌트 내용
props: ['title'],
template: '<h1>{{title}}</h1>'
},
'app-contents' : {
props: ['onChange'],
template : '<main>컨텐츠<button v-on:click="onChange">메세지 변경</button></main>',
methods: {
change() {
this.$emit('change');
}
}
}
}
})
</script>
</body>
</html>
Vue CLI 설치
1. bue create vue-form
2. default옵션 선택 후 생성
내일은 또 새로운 폼을 만드는 예시에 대한 강의를 들을 예정이다.
프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스
성인 교육 서비스 기업, 패스트캠퍼스는 개인과 조직의 실질적인 '업(業)'의 성장을 돕고자 모든 종류의 교육 콘텐츠 서비스를 제공하는 대한민국 No. 1 교육 서비스 회사입니다.
www.fastcampus.co.kr