TIL 230801 [Vue] v-for, ref, v-model, vue 문법

v-for

객체나 배열을 순회하여 html 요소를 만들어낸다. React에서의 map()과 비슷하다. key 속성은 React와 달리 필수는 아니지만 같은 이유로 사용하는 것이 권장된다.

// 객체 배열로 v-for를 사용할 때
<script setup>
import { ref } from 'vue';

// Array of items
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
]);
</script>

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

 

객체 배열이 아닌 그냥 배열로도 사용가능하다.

// 배열로 v-for을 사용할 때
<script setup>
import { ref } from 'vue';

const myArray = ref([1, 2, 3, 4]);
</script>

<template>
  <ul>
    <li v-for="item in myArray" :key="item">
      {{ item }}
    </li>
  </ul>
</template>

 

객체로 사용할 때 1번째 인자는 값, 2번째 인자로 키를 받아올 수 있다.

// 객체로 v-for를 사용할 때
<script setup>
import { ref } from 'vue';

// Object with key-value pairs
const object = ref({
  key1: 'Value 1',
  key2: 'Value 2',
  key3: 'Value 3',
});
</script>

<template>
  <div>
    <ul>
      <li v-for="(value, key) in object" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>

 

 

ref

React의 ref와는 다르게 DOM을 직접 조작하지 않는다. 요소 또는 컴포넌트 인스턴스에 대한 반응형 참조를 생성하는 방법으로 사용된다. 이를 통해 반응형 방식으로 기본 DOM 요소 또는 컴포넌트 인스턴스에 액세스하고 상호 작용 할 수 있다. 

템플릿에서 ref 속성을 사용하면 특정 DOM 요소 또는 Vue 컴포넌트 인스턴스에 대한 참조를 생성할 수 있다. DOM 엘리먼트뿐만 아니라 컴포넌트에도 ref를 사용할 수 있다. 컴포넌트에 대한 참조를 생성하면 참조가 컴포넌트 인스턴스에 대한 참조를 보유하게 되어 해당 메서드와 프로퍼티에 액세스할 수 있다.

// ref 사용
<script setup>
import { ref } from 'vue';

// Create a ref for the input element
const myInput = ref(null);
</script>

<template>
  <input type="text" ref="myInput" />
</template>

// 이렇게 .value를 사용해 DOM 요소에 접근할 수 도 있음
<script setup>
function focusInput() {
  // Access the DOM element and focus on the input
  myInput.value.focus();
}
</script>

ref는 Vue.js와 React.js 모두에서 사용되지만, 두 프레임워크 간에 사용법과 목적이 다르다. Vue.js에서 ref는 안전하고 반응적인 방식으로 DOM 및 컴포넌트와 상호 작용하는 데 사용되는 반응형 참조인 반면, React에서는 직접 DOM 조작에 더 일반적으로 사용되며 잠재적인 부작용과 가상 DOM 우회로 인해 권장되지 않는다.

 

 

v-model

v-model은 input, select, textarea와 같은 요소와 Vue 컴포넌트 상태의 데이터 사이에 링크를 생성할 수 있는 양방향 바인딩 지시어이다. 이를 통해 양식 요소의 값을 Vue 컴포넌트의 데이터와 쉽게 동기화할 수 있으며, 양식 요소를 변경하면 데이터가 자동으로 업데이트되고 그 반대의 경우도 마찬가지이다. v-model을 사용하면 양방향 데이터 바인딩을 간결하고 편리하게 할 수 있으며 양식 요소로 작업하고 데이터 일관성을 유지하기가 더 쉬워진다.

// v-model을 썼을 때, v-model만 쓰면 됨
<script setup>
import { ref } from 'vue';

// Create a reactive reference for the input value
const message = ref('');
</script>

<template>
  <div>
    <input type="text" v-model="message" />
    <p>The value of the input is: {{ message }}</p>
  </div>
</template>

// v-model을 쓰지 않았을 때, 값도 함수도 적어줌
<script setup>
import { ref } from 'vue';

// Create a reactive reference for the input value
const message = ref('');
</script>

<template>
  <div>
    <input type="text" :value="message" @input="message = $event.target.value" />
    <p>The value of the input is: {{ message }}</p>
  </div>
</template>

두 가지 모두 사용가능하며 더 편리하거나 가독성이 높은 방식을 선택해 사용하면 된다. 세밀한 제어가 필요하거나 동작을 추가로 정의해야하는 경우에는 :value 및 @input 바인딩을 사용하는 것이 나을 수 있다.

 

 

vue 문법

1. v-prefix

v-if: 조건문을 기반으로 요소를 조건부로 렌더링한다.
v-for: 배열 또는 객체를 반복하고 각 항목에 대한 요소를 렌더링한다.
v-bind(shorthand ':' ): 표현식을 HTML 속성이나 컴포넌트 프로퍼티에 바인딩한다.
v-on (shorthand '@'): 엘리먼트나 컴포넌트에 이벤트 리스너를 연결한다.
v-model: 폼 요소와 컴포넌트 데이터 간의 양방향 데이터 바인딩을 활성화한다.

 

2. :value

:value == v-bind:value의 축약형이다.

HTML 요소의 속성 값을 Vue.js 표현식(데이터)에 바인딩하는 데 사용된다. 

<input :value="message" />
// ==
<input v-bind:value="message" />

 

3. @function

@function == v-on:function의 축약형이다.

HTML 요소 또는 Vue 컴포넌트에서 특정 이벤트를 수신하는 데 사용된다. 이벤트 핸들러를 연결하여 이벤트가 발생할 때 실행할 수 있다.

<button @click="handleClick">Click me</button>
// ==
<button v-on:click="handleClick">Click me</button>