빈 폴더에 index.html 새파일 추가
필수 핵심
1. vue 라이브러리 cdn
<script src="https://unpkg.com/vue"></script>2. 정의한 app 마운트 위치 잡기
Vue.createApp(Counter).mount('#counter');
전체예시 코드
#index.html
<!DOCTYPE html>
<html>
<head>
<title>Example 02</title>
</head>
<body>
<div id="counter">
<div>Counter : <span v-text="count"></span></div>
<div>DoubleCounter : {{ count * 2 }}</div>
<button v-on:click="increase">up</button>
<button @click="decrease">down</button>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
const Counter = {
data() {
return {
count: 0,
};
},
methods: {
increase() {
this.count++;
},
decrease() {
this.count--;
},
},
};
Vue.createApp(Counter).mount('#counter');
</script>
</html>실행결과
'programming > Vue' 카테고리의 다른 글
| [Vue.js] #6 카드 컴포넌트 & 카드 리스트 만들기 (0) | 2022.03.03 |
|---|---|
| [Vue.js] #5 vite로 Vue 프로젝트 (진짜) 시작하기 (0) | 2022.03.03 |
| [Vue.js] #4 v-for 사용하여 리스트 자료 하나씩 컴포넌트에 표현하기 (0) | 2022.03.03 |
| [Vue.js] #3 컴포넌트 생명주기 / v-if 속성 사용 (0) | 2022.03.03 |
| [Vue.js] #2 부모 - 자식 관계 컴포넌트 구현 (0) | 2022.03.03 |
