Vue 기초문법정리

v-model

<input v-model="inputValue"/>​

@click

<button @click="addItem">add</button>

v-for

<ListItem v-for="(value,index) in listArray" :key="index" :text="value"/>

props, state

props는 배열보다는 객체를 쓰는게 좋음

<template>
    <li>{{text}}</li>
</template>
<script>
export default {
    props:["text"]
}
</script>

<template>
    <li>{{text}}</li>
</template>
<script>
export default {
    props:{
        text:{
         type:Number,
         required:true,
         default:'hello'
        }
    }
}
</script>

<ListItem v-for="(value,index) in listArray" :key="index" :text="value === '' ? undefined : value"/>

type을 Number로 명시해주면 다른타입일때 에러가나서 알려줌

required:true는 아무값도 입력안하면 에러남

default는 아무값도 입력안하면 'hello'로 입력됨

string을 입력했는데 에러가나면서 Number만된다고 알려줌

아무값도 안넣으면 에러가남 required prop 

:변수명안에는 명사값(?)만 들어간다

 

예제

todoList

 

 

 

@emit

상위 컴포넌트에 데이터를 넘겨줄때 유용함

기존 todoList에 Delete 기능을 추가하면서 활용한 예제를 보면 이해가됨

https://github.com/LeeEugene1/vueStudy

GitHub - LeeEugene1/vueStudy