VueJS 3.0 개념 익히기

1. html은 kebab-case, JS는 PascalCase로 적용된다.

<template>
<div>
	<lotto-ball/>
</div>
</template>

<script>
	import LottoBall from "./LottoBall.vue"
    
    export default {
    	components: {
        	LottoBall	// "lotto-ball": LottoBall
    }
</script>

 

2. props는 html 태그처럼 사용한다.

//LottoBallGenerator.vue

<template>
<div>
	<lotto-ball number="1" />
</div>
</template>


//LottoBall.vue

<template>
<div>
	
</div>
</template>

<script>
	export default{
    	props: {
        	number: Number,
        },
        data(){
        	return {
            	numberFromParents: props.number
        	}
        }
    }
</script>

setup (props) {
        // ...
        onMounted(() => {
          console.log('title: ' + props.title)
        })
        // ...
    }

물려받은 props의 값은 변경하지 않는다. 전달 받은 값이 변경되어도 전달한 곳의 본래 데이터 값은 변하지 않기 때문.

변경을 원한다면 value를 전달하지 않고 데이터를 변경할 수 있는 methods(함수)를 전달한다.

 

3. data, mothod 정리

 

data()의 데이터에 접근하기 위해서는 setup() 밖의 methods에서 함수를 작성. this."변수명"으로 접근할 수 있다.

ref는 string, int와 같은 반응형 단일 데이터 변수이다.

reactive는 [], {}와 같은 반응형 다형 데이터 변수이다.

<template>
<div>
    <form class="upcomingForm" @submit.prevent="onSubmit()">
        <input placeholder="COLLECTION_NAME" type="text" v-model="collectionName" />        
        <input type="submit" value="Submit" />
    </form>
    <span>{{collectionName}}</span>
</div>
</template>

<script>
// import { ref } from "vue";

export default {
    name: "UpcomingPost",
    components: {},
    props:{},
    data(){
        return {
            collectionName: "",
        };
    },

    setup(){

        return {

        };
    },

    methods: {
        onSubmit(){
            console.log(this.collectionName)
        }
    },
}
</script>

 

export default {
      props: {
        title: String
      },
      setup () {
        const state = reactive({
          username: '',
          password: ''
        })
    
        const login = () => {
          // login method
        }
        return { 
          login,
          state
        }
      }
    }

 

* setup methods

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'
    
    export default {
      setup() {
        onBeforeMount(() => {
          // ... 
        })
        onMounted(() => {
          // ... 
        })
        onBeforeUpdate(() => {
          // ... 
        })
        onUpdated(() => {
          // ... 
        })
        onBeforeUnmount(() => {
          // ... 
        })
        onUnmounted(() => {
          // ... 
        })
        onActivated(() => {
          // ... 
        })
        onDeactivated(() => {
          // ... 
        })
        onErrorCaptured(() => {
          // ... 
        })
      }
    }

 

* computed

import { reactive, computed } from 'vue'
    
    export default {
      props: {
        title: String
      },
      setup () {
        const state = reactive({
          username: '',
          password: '',
          lowerCaseUsername: computed(() => state.username.toLowerCase())
        })
    
        // ...
      }