안녕하세요~ Vue.js는 현재 가장 인기 있는 자바스크립트 프론트엔드 프레임워크 중 하나입니다.
Vue.js에서 instance와 event-emit은 중요한 개념 중 하나입니다.
Instance는 Vue.js의 핵심 개념 중 하나로, Vue.js 애플리케이션을 생성하고 구성하는 데 사용됩니다. Event-emit은 instance에서 정의한 이벤트를 발생시키는 방법입니다. 이러한 개념을 이해하면 Vue.js 애플리케이션을 더욱 효과적으로 작성할 수 있습니다. 이번 포스트에서는 Vue.js instance와 event-emit을 자세히 살펴보겠습니다.
1. Instance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el : '#app',
data : {
message: 'hi'
}
});
</script>
</body>
</html>
위의 코드는 Vue.js를 사용하여 데이터 바인딩을 구현한 예시입니다.
Vue.js는 간단한 구조와 뛰어난 성능으로 인해 현재 많은 웹 개발자들에게 인기가 높아지고 있습니다.
Vue.js를 사용하면 데이터와 UI가 동기화되어 사용자 경험을 향상시킬 수 있습니다. 또한, 컴포넌트 기반 구조를 지원하여 코드의 재사용성과 유지보수성을 높일 수 있습니다. Vue.js는 React나 Angular와 같은 다른 프론트엔드 프레임워크와 비교하여 학습 곡선이 낮고, 가볍고 빠른 성능을 보여주어 많은 개발자들이 선택하는 이유 중 하나입니다. Vue.js는 현재까지도 끊임없이 업데이트되고 있으며, 더욱 많은 개발자들이 사용하게 될 것입니다.
2. props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<app-header v-bind:propsData="message"></app-header>
<app-content v-bind:prosNumData="num" v-bind:propsData="message"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template: '<h1>{{ propsData }}</h1>',
props: ['propsData']
}
var appContent = {
template: '<div>{{ propsNumData }}</div>',
props: ['propsNumData']
}
new Vue({
el : '#app',
components: {
'app-header': appHeader,
'app-content' : appContent
},
data: {
message: 'hi',
num: 10
}
})
</script>
</body>
</html>
위 코드는 Vue.js를 이용해 간단한 웹 페이지를 구현한 것입니다.
이 코드에서는 Vue.js의 컴포넌트 기능을 이용해 app-header와 app-content라는 두 개의 컴포넌트를 만들었습니다.
app-header 컴포넌트는 propsData라는 이름의 프롭스를 받아와 이를 헤더 태그 안에 출력합니다. app-content 컴포넌트는 propsNumData와 propsData라는 이름의 프롭스를 받아와 이를 div 태그 안에 출력합니다. 마지막으로, new Vue()를 이용해 Vue 인스턴스를 생성하고 el, components, data 등을 설정합니다. 이렇게 설정한 Vue 인스턴스를 통해 #app이라는 id를 가진 div 태그 안에 app-header와 app-content 컴포넌트를 렌더링합니다.
감사합니다.
https://www.inflearn.com/course/age-of-vuejs/dashboard
Vue.js 시작하기 - Age of Vue.js - 인프런 | 강의
Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요., [사진] Vue.js 시작하기,Ag
www.inflearn.com
'개발 > vue.js' 카테고리의 다른 글
| vue.js 템플릿 문법 바인딩, v-if, v-show (1) | 2023.10.21 |
|---|---|
| vue.js router 페이지 이동 사용 방법 (0) | 2023.10.14 |
| vue.js 같은 컴포넌트 레벨 통신방법 방법 (0) | 2023.10.14 |
| vue.js component(컴포넌트)와 props 무엇인가? (0) | 2023.10.11 |
| vue.js 시작하기 (1) | 2023.10.09 |