Vue
vue는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 JS 프레임워크이다.
Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
Vue의 핵심 기능으로는 선언적 랜더링과 반응성 두 가지가 있다.
선언적 랜더링(Declarative Rendering)
Vue는 표준 HTML을 템플릿 문법으로 확장하여 JS 상태를 기반으로 화면에 출력될 HTML을 선언적으로 작성할 수 있다.
반응성(Reactivity)
Vue는 JS 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행한다.
뷰 인스턴스
인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다.
MVVM 패턴과는 관련이 없지만, VUE의 디자인성은 부분적으로 처리하는 것에 영감을 받았기 때문에,
VUE 인스턴스를 사용한다.
뷰 인스턴스를 사용하기 위해 개발 환경으로 아래와 같은 라이브러리를 가져와 사용했다.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>위 cdn을 가져와 사용하면 vue를 온라인 환경에서 사용이 가능하다.
뷰 인스턴스는 아래와 같이 생성할 수 있다.
// new 키워드 사용
new Vue();
// Vue 내장 함수 사용
Vue.createApp();인스턴스를 생성하고 나면 아래와 같이 인스턴스 안에 어떤 속성과 API가 있는지 확인해봐야 한다.
이처럼 인스턴스 내부에 미리 정의되어 있는 속성과 메서드 들이 존재하기 때문에 이 기능들을 활용해 빠른 개발이 가능하다.
인스턴스 속성
앞서 인스턴스 내부에 많은 속성과 메서드들이 존재한다. 아래는 대표적인 속성에 대해 정리해보려 한다.
new Vue({
el: ,
template: ,
data: ,
methods: ,
created: ,
computed: ,
watch: ,
});el : 인스턴스가 그려지는 화면의 시작점(특정 HTML 태그)
template : 화면에 표시할 요소 ( HTML / CSS )
data : 뷰의 반응성이 반영된 데이터 속성
methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
created : 뷰의 라이프사이클과 관련된 속성
watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의
computed : 템플릿에서 사용할만한 복잡한 로직을 깔끔하게 처리
이후에 watch 와 computed 의 경우는 동일한 기능을 제공하지만, 후에 차이에 대해 설명할 예정이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// new Vue로 만든 인스턴스를 특정 태그에 붙여야 사용이 가능하다.
var vm = new Vue({
el: "#app",
data: {
message:"aaa"
},
methods:{
},
created: function(){
}
});
</script>
</body>
</html>위는 인스턴스 사용 예제이다.
app이라는 id를 가진 div 태그를 인스턴스 속성인 el에 해당 태그를 지정해준다.
그리고 data를 이름과 값을 설정을 한다음 화면을 확인을 하면 메세지 바인딩으로 처리된 부분에 data에 지정한 message에 값이 들어가게 된다.
'Programming > Vue' 카테고리의 다른 글
| [Vue] 라우터 ( Router ) (0) | 2024.06.25 |
|---|---|
| [Vue] 컴포넌트의 통신 방식 ( Props, Emit ) (0) | 2024.06.25 |
| [Vue] 템플릿 문법과 컴포넌트(component) (0) | 2024.06.25 |
