Vue 활용 기초(2)

Vue 문법

• 예시로 주어진 src/App.vue를 vbase-3-setup을 사용하여 빈 템플릿으로 만들어줍니다.

 

• src/App.vue

<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>