Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- vitepwa
- TypeScript
- 셀프넘버
- SSAFY
- db
- 싸피셜
- 싸피10기
- git
- pwa적용하기
- react
- js
- queryset
- VITE
- Python
- 데코레이터
- 백준
- SQL
- Javascript
- PWA
- 싸피
- 머신러닝종류
- SSAFYcial
- Django
- QuerySetAPI
- 14658
- 리액트
- unionfind
- sqld
- 플로이드워셜
- 알고리즘
Archives
- Today
- Total
Meme's IT
[Vue] Vue의 기본 구조 본문
우선 한번 냅다 따라 쳐보자
<body>
<div id="app">
<h1>{{ greeting }}</h1>
<button @click="count++">누른 횟수: {{ count }}</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref } = Vue
const app = createApp({
setup() { // 단축 메서드
const count = ref(0)
const greeting = ref('Hello')
return {
count, // 단축속성(key = value)
greeting
}
}
})
app.mount('#app')
</script>
</body>
중간중간 나오는 특이한 문법들은 밑의 글 참고
2023.10.25 - [JavaScript] - [JS] Object(객체)
# Vue의 핵심 기능
1. 선언적 렌더링
HTML을 확장하는 템플릿 구문을 사용하여 HTML이 JavaScript 데이터를 기반으로 어떻게 보이는지 설명할 수 있음
2. 반응형
JavaScript 상태 변경 사항을 자동으로 추적하고, 변경사항이 발생할 때 DOM을 효율적으로 업데이트
# Vue를 사용하는 방법
1. CDN 방식
2. NPM 설치 방식
→ 우선은 CDN 방식으로 진행해 보자
# Vue의 기본 구조
1. CDN 가져오고 Application instance 작성하기
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue
const app = createApp({})
</script>
- const { createApp } = Vue : 파이썬의 import처럼 Vue에서 쓰는 함수들을 이곳에 가져와서 쓴다
-
const app = createApp({}) : 모든 Vue 애플리케이션은 createApp 함수로 새로운 Application instace를 생성하는 것으로 시작된다.
2. App안에 setup함수 + return 만들기
const app = createApp({
setup() {
const message = ref('Hello Vue!') //반응형 참조, 변수
return {
message
}
}
})
return은 꼭 객체를 반환해야 함!
⭐ ref 함수
반응형 상태(데이터)를 선언하는 함수
인자를 받아 .value 속성이 있는 ref 객체로 wrapping하여 반환
setup 내에서 ref 안의 변수값을 변경하고 싶다면 꼭 .value를 이용해서 접근해야한다
하지만 HTML상(템플릿)에서 쓸때는 {{ message }} 이런형식으로 사용함(.value 필요없음)
const {createApp, ref} = Vue
const app = createApp({
setup() {
const message = ref('Hello Vue!')
console.log(message) // ref 객체
console.log(message.value) // Hello Vue!
return {
message
}
}
})
추가적으로
더보기
반응형 변수와 일반 변수를 따로 설정해서 확인하면
ref로 묶어준 반응형 변수는 클릭함에 따라 같이 올라가지만,
일반변수는 올라가긴하지만 화면에 실시간 반영이 안되는 것을 확인할 수 있음
<body>
<div id="app">
<p>반응성 변수: {{ reactiveValue }}</p>
<p>일반 변수: {{ normalValue }}</p>
<button @click="increment">값 업데이트</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref} = Vue
const app= createApp({
setup() {
const reactiveValue = ref(0)
let normalValue = 0
const increment = function() {
reactiveValue.value++
normalValue++
}
return {
reactiveValue,
normalValue,
increment
}
}
})
app.mount('#app')
</script>
</body>
3. 템플릿 렌더링
<div id="app">
<p>{{message}}</p>
</div>
- 아까 setup에서 return한 반환된 객체의 속성은 템플릿에서 사용할 수 있음
- Mustache syntax(콧수염 구문, {{ 이렇게 생긴거 }})를 사용하여 가져옴
- 식별자나 경로만 쓸 수 있는게 아니라, 유효한 JavaScript 표현식을 사용 가능
<h1>{{ message.split('').reverse().join('') }}</h1>
# Vue에서 Event Listener 사용하기
'v-on' directive를 사용해서 DOM 이벤트를 수신할 수 있다
함수 내에서 refs를 변경해서 업데이트 가능!
<div id="app">
<button v-on:click="increment">{{count}}</button> // v-on 사용
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref} = Vue
const app = createApp({
setup() {
const count = ref(0)
const increment = function() { // 함수 넣는거 가능
count.value ++
}
return {
count,
increment
}
}
})
app.mount('#app')
</script>
'FrontEnd > Vue' 카테고리의 다른 글
[Vue] v-on (0) | 2023.11.02 |
---|---|
[Vue] v-bind (Attribute, Class, Style) (0) | 2023.11.02 |
[Vue] Directive (0) | 2023.11.02 |
[Vue] Template Syntax (0) | 2023.11.02 |
[Vue] Front-end 사전지식 (0) | 2023.11.01 |