[Vue3] 클릭 이벤트 (v-on:click), typeScript

• 1.버튼 클릭 시 7이라는 값 전달 compositionAPI -ref
• 1.버튼 클릭 시 7이라는 값 전달 compositionAPI -reactive
• 1.버튼 클릭 시 7이라는 값 전달 optionsAPI
• 2.버튼 클릭 시 두 개의 함수 실행 compositionAPI -ref
• typeScript

 

 

Vue 컴포넌트에서 이벤트를 처리할 때 v-on 디렉티브를 사용하며, v-on 디렉티브는 심볼 @ 로 사용 가능

 

버튼에 클릭이벤트 주는 코드를 두 가지 API로 나타내보면

 

 

1. 버튼 클릭 시 7이라는 값이 전달

 

[CompositionAPI] -ref

<template>
  <button type="button" @click="setCount(7)"> Set 7 </button>
  <p>Counter is : {{counter}} </p>
</<template>

<script setup>
import { ref } from 'vue'

const counter = ref(0)     // 반응형 변수 선언

function setCount(val) {
  counter.value = val
  }
  
</script>

 

 

[CompositionAPI] -reactive

 

**

1) .this 는 OptionAPI에서 사용하는 것.

2) ref는 스크립트나 값 출력할 때 .value를 써야하만, reactive는 .value 쓰면 안됨

 

<template>
  <button type="button" @click="setCount(7)"> Set 7 </button>
  <p>Counter is : {{ counter.counter }} </p>
</template>

<script setup>
import { reactive } from 'vue'

// 반응형 객체
const counter = reactive({
  counter: 0
})

// 값 변경 함수
function setCount(val) {
  counter.counter = val   ✅ 올바른 접근
}
</script>

 

[OptionsAPI]

<template>
<button type="button" @click="setCount(7)"> Set 7 </button>
<p>Counter is : {{counter}} </p>
</template>

<script>
methods: {
  setCount(counter){
  this.counter = counter;
    }
}
</script>

 

---

 

 

2. 클릭시 두 개의 함수 실행

 

[CompositionAPI] -ref

 

<script setup lang="ts">

import {ref} from "vue";

const count1 = ref<number>(0)

function one() {
    count1.value++;
}

function two() {
    count1.value += 2;
}
</script>

<template>
    <h1 v-if="bRender">가가</h1>
    <h1 v-else>나나</h1>
    <h2>{{count1}}</h2>
    <button v-on:click="one(), two()">Click</button>
</template>

 

---

 

● typeScript

 

javaScript 는 const counter = ref(0); 으로 쓰고

<script setup lang="js"> 또는 생략

 

typeScript 는 위 예제처럼 lang="ts" 를 명시한다. 또한

    ref 뒤에 <number>를 써서 타입을 명시함으로써 컴파일 시 에러를 알 수 있어 코드 안정성이 높다.

 

그런데 ref<string>(0)으로 줘도 ts가 엄격하게 검사하고 넘어가지 않고 유연하게 처리하기 때문에 .. count 가 된다 ..