천소희

기록하는 개발자

업데이트:

카테고리:

/

태그: , , ,

단방향 데이터 바인딩

v-bind:속성 = "변수" or :속성 = "변수"

양방향 데이터 바인딩

함수사용

<input type="text" :value="name" @input="updateName">

const name = ref('Sohee')

const updateName = (e) => {
  name.value = e.target.value
}

인풋이 들어올때마다 updateName이 작동되어 name의 value값이 변경됨

v-model 사용

<input type="text" v-model="name">

간편해짐

todo 리스트 추가

<template>
<div class="container">
  <h2>To-Do List</h2>
  <form @submit.prevent="onSumbit" class="d-flex">
    <div class="flex-grow-1 mr-2">
      <input classs="form-control" type="text" v-model="todo" placeholder="Type new To-do">
    </div>
    <div class>
      <button class="btn btn-primary" type="submit">Add</button>
    </div>
  </form>
  
</div>
 
</template>

<script>
import { ref } from 'vue'
// import { reactive } from 'vue'

export default {
  setup() {
    const todo = ref('')
    const todos = ref([])

    const onSumbit = () => {
			/* todos 리스트가 ref로 되어있으므로 value에다 push를 한다. */
      todos.value.push({
        id: Date.now(),
        subject: todo.value
      })
    }
    
    return {
      todo,
      todos,
      onSumbit,
    }
  },
}
</script>

form 태그는 실행하면 자동으로 화면이 새로고침 된다. 이를 방지하기 위해서는

  1. submit 함수에 event.preventDefault() 를 사용
  2. @submit.prevent 처럼 태그안에서 사용

v-for

<div class="card mt-2" v-for="todo in todos" :key="todo.id">
    <div class="card-body p-2">
      
    </div>
  </div>

v-for 사용시 반드시 :key 바인딩을 해야된다.
일반적인 for문 처럼 배열의 값에 하나하나 접근해서 사용가능하다
이때 옵션은 in 과 of 가 있는데 in은 리스트 형태 / of는 객체 형태 를 받는 옵션이다

v-if and v-show

/* v-show */
<div v-show="toggle">true</div>
<div v-show="!toggle">false</div>
<button @click="onToggle">toggle</button>

/* v-if */
<div v-if="toggle">true</div>
<div v-else>false</div>

const toggle = ref(false)

const onToggle = () => {
      toggle.value = !toggle.value
    }
  • v-if : 거짓이라면 랜더링 자체가 되지않음, 화면이 바뀔 때 마다 랜더해야되서 시간이 오래걸리고
  • v-show : 랜더링이 다된 상태에서 보이는 것만 확인, 초기 랜더가 오래걸린다.

이걸 활용한 에러박스 표시

<div v-if="hasError" style="color:red">This field cannot be empty</div>

const hasError = ref(false);

const onSumbit = () => {
      if (todo.value == "") {
        hasError.value = true
      } else {
        hasError.value = false
        todos.value.push({
          id: Date.now(),
          subject: todo.value
        })
        todo.value = ''
      }
    }

빈칸으로 제출되었다면 에러메세지를 출력

style 바인딩 vs class 바인딩

:style="변수" 처럼 사용 가능
변수는 객체형식으로 작성한다.

const style = {
	textDecoration: 'line-thoungh',
	color: red,
}

:style="todo.completed ? todoStyle : {}"

:class="{todo: todo.completed}"

둘다 todo.completed 가 true 일때 스타일을 적용하는 방법이지만 약간의 차이가 있다.

삭제버튼으로 삭제하기

index를 받아와서 해당 인덱스를 가진 배열을
변수.value.splice(index, 1) 으로 삭제한다.

emit

component를 분리하게 되면 자식 컴포넌트에서 부모 컴포넌트로 변수 정보를 전달해야된다.

setup(props, context) {
	const onSumbit = () => {
		context.emit()
	}
}

vue3에서는 props와 context를 setup에서 인자로 전달받아야한다.

// 자식 컴포넌트 TodoForm
context.emit(부모컴포넌트에 보낼 함수 이름, 보낼 데이터(객체의 형태로))

// 부모컴포넌트
<TodoForm @함수이름="부모 컴포넌트에서 실행시킬 함수 이름"/>

emits

export default {
	emits: ['add-todo', 'delete-todo'],
}

상속받는 emit를 한번에 볼 수 있도록 관리

props

부모 → 자식 : <TodoList :자식컴포넌트에서 사용할 이름="보낼 변수"/>
자식에서 받을 때 : props: ['받은 변수이름'], 또는 객체 형태로 받을 수 있다.

props: {
	example: {
		type: Array,
		required: true,
	}
}

type과 required등 세세한 설정이 가능하다.
setup함수 내에서 사용할 때는 함수내에 props를 작성하고 변수앞에 props.example 과 같이 작성하여 사용

setup(props) {
	props.example = ???
}

주의

  • 부모에서 자식으로만 한방향 바인딩이 되야한다.
  • 부모에서 변수가 변경되면 자식도 변경되야함 (반대는 아님)

computed

const count = ref(1)
const plusOne = computed(() => count.value + 1)

method
인자로 값을 받아와서 안에서 사용가능함
실행할때마다 불러오고 있음

computed
인자를 받을 수 없음, 기본 status만 변경이 가능하다
변경된 값을 저장하고 있음(한번 계산 이후 더이상 불러오지 않음)

filter

text.filter(value => {
	return value == ? //조건을 달아둔다.
})

조건에 맞는 값이 배열의 형태로 나오게 된다.
리스트에 조건에 걸러진 값을 표시

참고