Vue - 기본 문법

반복문

v-for로 원하는 개수만큼 반복적으로 생성 가능하다 (react에서 map으로 생성하는것과 유사)
v-for= "(item,index) in menu"로 index도 구할 수 있다.

    <a v-for="name in menu" :key="name">{{ name }}</a>
    
    <script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  data(){
    return{
        menu : ["Home", "Products", "About"]
    }
  },
  components: {
  }
});
</script>

IF문

v-if / v-else / v-else-if를통해 if문을 적용시킬 수 있다.
v-else 및 v-els-if는 v-if가 붙은 태그와 인접해야만사용 가능하다.

    <div v-if="modal">true!!!</div>
    <div v-else>false!!!</div>

Props전달

자식 컴포넌트로 props을 전달 시 :변수명="변수"형태로 전달해준다

----부모 컴포넌트-------
<Child :propData="propData"/>

------자식 컴포넌트------
export default defineComponent({
  name: 'Child',
    props:{
        propData:Array
    }
})

Emit

자식 컴포넌트에서 부모컴포넌트로 데이터 변경을 요청하는경우, emit을 사용한다.

----자식 컴포넌트--------
    <button v-on:click="$emit('closeModal')">부모한테 데이터 변경 요청</button>

----부모 컴포넌트-------
<Child @closeModal="modal = false"/>

@input

input값이 변경될 때 변수에 그 값을 저장하기위해 사용된다.

<input @input="numChange"/>

export default defineComponent({
  name: 'SampleTest',
    data(){
        return{
            num:0
        }
    },
    methods:{
      numChange(e){
            this.num =e.target.value
      }
  },
})

혹은 v-mdal로 간단하게 구현가능하다.

<input v-model="num"/>