프론트엔드 프레임워크인 Vue.js 공부를 시작해보자.
그동안 React & Redux를 사용한 프로젝트들을 만들면서 리액트에 어느정도 익숙해져 있는데,
많이 사용하는 프레임워크 중 하나인 뷰는 어떤 장점이 있는지 리액트와의 차이점을 느껴보고 싶다.
리액트에 비교적 뷰는 쉽게 접근할 수 있지만 깊게 공부할 수록 어렵기 때문에 원리를 잘 파악하며 공부하려고 한다.
MVVM 패턴의 ViewModel 레이어에 해당하는 화면단 프레임워크
사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.
컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 이는 작고 그 자체로 제 기능을 하며 재사용할 수 있는 컴포넌트로 구성된 대규모 응용 프로그램을 구축할 수 있게 해주는 추상적 개념입니다. 생각해보면 거의 모든 유형의 응용 프로그램 인터페이스를 컴포넌트 트리로 추상화할 수 있습니다.
Vue는 CDN으로 가져와서 사용할 수 있다.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue 객체를 생성 후 el, data, template, method, life cycle hook 등 인스턴스 옵션 속성을 포함할 수 있다.
index.html
<div id="vue-app">
<h1>{{ name }}</h1> // 속성 사용
</div>
app.js
new Vue({
el: "#vue-app", // dom 선택
data: {
name: "Smooth" // 속성 지정
}
});
이렇게 name 속성이 잘 나타난다. 다른 속성도 추가해보자
index.html
<div id="vue-app">
<h1>{{ greet("afternoon") }}</h1>
<p>Name : {{ name }}</p>
<p>Job : {{ job }}</p>
</div>
app.js
new Vue({
el: "#vue-app",
data: {
name: "Smooth",
job: "developer"
},
methods: {
greet: function(time) {
return `Good ${time} ${this.name}`;
}
}
});
이렇게 메소드 속성도 추가할 수 있고 Vue 객체 안에서 this는 생성된 Vue 객체를 가리킨다.
디렉티브는 v- 접두사가 있는 특수 속성입니다. 디렉티브 속성 값은 단일 JavaScript 표현식 이 됩니다. (나중에 설명할 v-for는 예외입니다.) 디렉티브의 역할은 표현식의 값이 변경될 때 사이드이펙트를 반응적으로 DOM에 적용하는 것 입니다. 아래 예제에서 살펴보겠습니다.
v-bind:디렉티브를 사용해서 속성을 사용할 수 있다.
index.html
<div id="vue-app">
<h1>Data Binding</h1>
<a v-bind:href="website">블로그</a>
<input type="text" v-bind:value="name" />
</div>
app.js
new Vue({
el: "#vue-app",
data: {
name: "Smooth",
job: "developer",
website: "https://velog.io/@smooth97/Vue.js"
},
methods: {
greet: function(time) {
return `Good ${time} ${this.name}`;
}
}
});
data 속성에 html을 연결할 수도 있다.
websiteTag: '<a href="https://velog.io/@smooth97/Vue.js">Blog</a>'
<p v-html="websiteTag"></p>
https://kr.vuejs.org/v2/guide/index.html
https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/
react와 vue의 차이점