Vue 문법
- 예시로 주어진 src/App.vue를 vbase-3-setup을 사용하여 빈 템플릿으로 만들어줍니다.
<template>
<div>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>
선언적 렌더링
- { }을 활용해 script에서 선언한 변수를 template에서 볼 수 있다.
<template>
<div>
<h1>Hello, {{ myText }}</h1>
</div>
</template>
<script setup>
const myText = 'Vue 3'
</script>
속성 바인딩
- 요소의 속성 앞에 v-bind: 또는 축약하여 : 를 사용하여 속성의 값을 변수의 값으로 사용할 수 있다.
<template>
<div>
<h1 :id="myId">Hello, {{ myText }}</h1>
</div>
</template>
<script setup>
const myText = 'Vue 3'
const myId = 'header'
</script>
- class의 경우 여러 값을 list를 활용하여 binding 할 수 있다.
<template>
<div>
<h1 :class="myClass">Hello, {{ myText }}</h1>
</div>
</template>
<script setup>
const myText = 'Vue 3'
const myClass = ['bold', 'color', 'size']
</script>
<style lang="scss" scoped>
.bold {
font-weight: bold;
}
.color {
color: blueviolet;
}
.size {
font-size: 5rem;
}
</style>
이벤트리스너
- vanilla javascript에서 이벤트를 활용하기 위해서는
- 요소 선택 => addEventListener를 활용하여 이벤트 부착의 순서를 따랐지만,
- vue에서는 v-on: 또는 축약하여 @를 활용하여 간단히 이벤트를 부착할 수 있다.
- @click="alertText"은 해당 요소를 클릭할 경우, 직접 정의한 alertText함수를 실행시키는 이벤트이다.
<template>
<div>
<button @click="alertText">클릭!</button>
</div>
</template>
<script setup>
function alertText() {
alert('Hello, World!');
}
</script>
- 인식할 수 있는 이벤트에는
- click : 클릭했을 경우
- mouseover, mouseout : 마우스가 요소 위로 올라왔을 / 벗어났을 경우
- keydown, keyup : 키보드 키를 놓았을 경우
- input : 입력할 경우
- submit : 제출한 경우
- submit.prevent : form을 제출할 경우 기본값으로 action에 정의된 url로 요청을 보내는데, 이를 막고 직접 정의한 function만 실행한다.
등이 있다.
반응형
- script의 변수가 변경되면, 선언적 렌더링을 한 값도 함께 변한다.
- number, string 등 하나의 값에는 ref, object에 대해서는 reactive를 활용하여 반응형으로 만들 수 있다.
- ref사용 시 value를 통해 값에 접근할 수 있다.
<template>
<div>
<div>{{ count }}</div>
<button @click="increment">클릭!</button>
<button @click="console.log(count)">count 출력</button>
</div>
</template>
<script setup>
let count = 0;
function increment() {
count++;
}
</script>
<template>
<div>
<div>{{ count }}, {{ state.count }}</div>
<button @click="increment">클릭!</button>
<button @click="incrementState">클릭!</button>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
const count = ref(0);
const state = reactive({
count: 0
});
function increment() {
count.value++;
}
function incrementState() {
state.count++;
}
</script>
form 바인딩
- 속성 바인딩(v-bind, :)과 이벤트리스너(v-on, @)를 활용하여 input값에 대해 양방향 바인딩이 가능하다.
<template>
<div>
<input :value="text" @input="onInput">
<p>{{ text }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const text = ref('')
function onInput(e) {
text.value = e.target.value
}
</script>
- v-model을 활용하여 구현할 수도 있다.
- 단, 한국어, 일본어, 중국어 등 IME(입력 방식 편집기)가 필요한 언어의 경우 정상적으로 동작하지 않는다.
<template>
<div>
<input v-model="text">
<p>{{ text }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const text = ref('')
</script>
조건부 렌더링
- v-if를 활용하여 요소를 조건부로 랜더링 할 수 있다.
- v-if의 value에 해당하는 값이 true이면 렌더링하고, 아니면 렌더링하지 않는다.
- v-else-if, v-else도 기존 조건문과 비슷한 방식으로 활용 가능하다.
<template>
<div>
<div v-if="trueValue">v-if, true</div>
<br>
<div v-if="falseValue">v-if, false</div>
<div v-else>v-else, false</div>
<br>
<div v-if="falseValue">v-if, false인 경우</div>
<div v-else-if="trueValue">v-else-if, true</div>
<div v-else="falseValue">v-else, true</div>
</div>
</template>
<script setup>
const trueValue = true
const falseValue = false
</script>
리스트 렌더링
- v-for을 활용하여 list의 element를 각각 렌더링할 수 있다.
<template>
<div>
<ul>
<li v-for="(todo, index) in todos">
{{ index }} : {{ todo.text }}
</li>
</ul>
</div>
</template>
<script setup>
const todos =[
{ text: 'Hello' },
{ text: 'World' },
{ text: 'and Vue!' }
]
</script>
계산된 속성
- computed()를 활용하여 이미 가지고 있는 data에 대해, 그것의 계산된 값을 사용할 수 있다.
<template>
<div>
<div>{{ count }}, {{ doubleCount }}</div>
<button @click="increment">클릭!</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
function increment() {
count.value++;
}
const doubleCount = computed(() => count.value * 2);
</script>
