Instance
Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 옵션 속성
시작할때 생성했던 index.html을 다시한번 보면
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{message}}</div>
<script>
Vue.createApp({
data() {
return {
message: "hi",
};
},
}).mount("#app");
</script>모든 Vue 앱은 createApp 함수를 사용하여 새로운 애플리케이션 인스턴스를 생성하는 것으로 시작한다.
인스턴스를 만들어서 그 인스턴스를 유효하게 다룰 수 있는 화면의 영역을 지정해줘야 한다.
>> HTML태그를 의미하고, 위의 코드에서는 div태그를 감싸는 body태그로 보통 작성한다.
화면의 영역중에 어느 부분에다가 Vue의 인스턴스를 적용할지 하는 부분이 바로 mount 하는 부분이다
앱 인스턴스는 .mount() 메서드가 호출될때까지 아무것도 렌더링하지 않는다.
'컨테이너'가 될 실제 DOM 엘리먼트 또는 셀렉터 문자열을 인자로 필요한다.
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<body>
<div id="app">{{message}}</div>
</body>
<script>
// Vue 2
new Vue({
el: "#app",
});
new Vue({}).$mount("#app");
// Vue 3
Vue.createApp({
data() {
return {
message: "10",
};
},
}).mount("#app");
</script>Vue 2와 Vue 3의 문법적인 차이를 나타내는 코드를 작성해봤다.
암튼 지금은 Vue 3를 사용하기 때문에 아래의 코드를 사용하면 된다 !
https://ko.vuejs.org/guide/essentials/application
Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
위의 문서를 참고하자
Methods
인스턴스안에서 사용할 수 있는 속성
Vue.createApp({
template: ,
data: ,
methods: ,
created: ,
watch: ,
});컴포넌트 옵션 속성( 인스턴스 옵션속성 / 옵션API )
- template : 화면에 표시할 요소 (HTML, CSS 등)
- data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성
- methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
- created : 뷰의 라이프사이클과 관련된 속성
- watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
<!-- HTML -->
<div id="app">
</div>
<!-- JavaScript -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
}).mount("#app");
</script>우선 html, JavaScript단으로 나눴고, 인스턴스 생성해서 div태그를 마운트( #app ) 해줬다.
위의 코드가 기본틀? 우선 여기서부터 시작하는것같다
data라는 인스턴스 옵션 속성을 선언해보
자바스크립트는 1급 함수이기때문에 객체에 함수를 붙일 수 있다.
<!-- HTML -->
<div id="app">
<p>{{count}}</p>
</div>
<!-- JavaScript -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
data: function () {
return {
count: 0,
};
}
}).mount("#app");
</script>이렇게 코드작성하면 HTML화면에 0이 출력이 되는걸 확인할 수 있고
Reactivity가 주입된걸 알 수 있다.
이런식으로 + 버튼을 누르면 바로 반응을 하는것
이걸 버튼을 만들어서 조정하게 해보자 - methods를 이용해서
<!-- HTML -->
<div id="app">
<p>{{count}}</p>
<button v-on:click="addCount">+</button>
<button v-on:click="minCount">-</button>
</div>
<!-- JavaScript -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
data: function () {
return {
count: 0,
};
},
methods: {
addCount() {
// addCount : function()을 축약해서 사용가능
this.count++;
},
minCount() {
this.count--;
},
},
}).mount("#app");
</script>1.addCount() -> addcount() : function()을 축약해서 사용
2. this의 의미는 createApp에 있는 count에 접근하겠다는 의미
3. v-on : Vue에서 제공하는 디렉티브라고 하는 개념 -> click하면 addCount라는 메소드를 실행하겠다.
화면의 UI를 조작하기 위해서 전반적인 로직들이 작성될건데
그걸 의미있는 액션들의 이름으로 메서드를 분리해서 작성하면 된다.
Directive
지시문, v-xxx형식으로 자신만의 속성을 제공한다.
종류 v-ifv-elsev-forv-bindv-model등 되게 다양하게 있는데, 이번엔 그중에서 v-for을 사용해보자
배열을 출력하는 코드를 간단하게 작성해보면
<!-- HTML -->
<div id="app">
<ul>
<li>{{item[0]}}</li>
<li>{{item[1]}}</li>
<li>{{item[2]}}</li>
</ul>
</div>
<!-- JavaScipt -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
items: ["삼성", "네이버", "인프런"],
};
},
}).mount("#app");
</script>이렇게 될텐데, 배열의 길이가 길어질수록 너무 번잡하게 될 코드이기때문에
v-for를 사용해서 간단하게!
ul의 자식요소인 li를 작성하고 tab을 누르면 자동으로
이렇게 코드생성이 된다.
<!-- HTML -->
<div id="app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
<!-- JavaScipt -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
items: ["삼성", "네이버", "인프런"],
};
},
}).mount("#app");
</script><li> 안에서 v-for을 이용해서 배열을 순회할건데
items배열을 가져와서 item이라는 이름으로 반복하게 지정해줬고
이렇게 출력되고, 개발자도구에서 값을 수정하면 바로 화면단에서도 수정되어 출력되는걸 확인할 수 있다.
'FE > Vue.js' 카테고리의 다른 글
| [ Vue.js ] 싱글 파일 컴포넌트 (0) | 2024.05.08 |
|---|---|
| [ Vue 3 ] Template Syntax (0) | 2024.05.05 |
| [ Vue 3 ] Component, Event Emit (0) | 2024.05.03 |
| [ Vue 3 ] Reactivity (0) | 2024.05.02 |
| [ Vue 3 ] 시작, 개발환경 설정( Vue CLI ) (0) | 2024.05.02 |
