Vue.js_DAY3

• v-model : v-on + v-bind, 갱신을 해줘야 할 때는 model을 쓰자.
• data가 배열로 올 때, 한개만 쓰고 싶으면 .pop()이나 .shift()를 쓰면, 하나만 접근 가능하다. 아니면 인덱스를 명시해줘도 무관

<template>
	<div class="container">
		<h1>{{ title }}</h1>
		<div class="input-form-backgroud row">
			<div class="input-form col-md-12 mx-auto">
				<h4 class="mb-3">{{ title }}</h4>

				<!-- 1.  @submit.prevent="sendPost" -->
				<form id="frm_insert" class="validation-form" novalidate action="#" @submit.prevent="sendPost"
					method="post">

					<div class="mb-3">
						<label for="id">ID</label> <input type="text" class="form-control" name="id" id="id"
							placeholder="" v-bind:value=id required>
						<div class="invalid-feedback">ID 입력해주세요.</div>
					</div>
					<div class="mb-3">
						<label for="pw">PW</label> <input type="password" class="form-control" name="pw" id="pw"
							placeholder="" v-bind:value=pw required>
						<div class="invalid-feedback">PW 입력해주세요.</div>
					</div>
					<div class="mb-3">
						<label for="name">NAME</label> <input type="text" class="form-control" name="name" id="name"
							placeholder="" v-bind:value=name required>
						<div class="invalid-feedback">NAME 입력해주세요.</div>
					</div>
					<div class="mb-3">
						<label for="tel">TEL</label> <input type="text" class="form-control" name="tel" id="tel"
							placeholder="" v-bind:value=tel required>
						<div class="invalid-feedback">TEL 입력해주세요.</div>
					</div>


					<hr class="mb-4">
					<div class="custom-control custom-checkbox">
						<input type="checkbox" class="custom-control-input" id="aggrement" checked required> <label
							class="custom-control-label" for="aggrement">개인정보 수집 및 이용에 동의합니다.</label>
					</div>
					<div class="mb-4"></div>
					<button class="btn btn-primary btn-lg btn-block" type="submit">가입
						완료</button>
				</form>
			</div>
		</div>
	</div>
</template>

<script>
import axios from 'axios';

export default {
	name: 'vue_insert',
	data() {
		return { 
			id: '',
			pw: '',
			name: '',
			tel: '',
		}
	},
	methods: { // #2.  method를 정의
		sendPost: function () { // #3. $.ajax
			axios({
				url: 'http://localhost:8813/api/insertOK',
				method: 'POST',
				params: {
					id: this.id,
					pw: this.pw,
					name: this.name,
					tel: this.tel,
				}
			});
		}
	},
	watch: {
		tel: (x) => {
			console.log('x:', x);
		}
	}
}
</script>

• data에 선언해두고, this로 접근 가능
• watch 에다가 함수를 설정해서 tel이라는 데이터가 바뀔 때마다 실행할 함수 설정 가능. useEffect와 비슷함.

<router-link v-for="m, i in menu" :key="i" v-bind:to="`${menu[i]}`" class="navbar-brand">
  {{ m }}
</router-link>

• 이런식으로 써주면 props로 받은 배열을 갖고 html 태그를 만들 수 있다. :key 설정은 리액트의 key와 같다.

<!-- MyChild.vue -->
<template>
    <div>
        <h1>{{ fooCount }}</h1>
        <button @click="fn_up">count up</button>
        <button @click="fn_down">count down</button>
    </div>
</template>

<script>
export default {
    name: 'MyChild',
    props: {
        fooCount: Number,
    },
    methods: {
        fn_up () {
            this.$emit('change', Number(this.fooCount) + 1);
        },
        fn_down () {
            this.$emit('change', Number(this.fooCount) - 1);
        },
    },
}
</script>

<!-- App.vue -->
<template>
  <div id="app">
    <MyChild :fooCount="fooCount" @change="countChange"></MyChild>
  </div>
</template>

<script>
import MyChild from './components/MyChild.vue'

export default {
  name: 'App',
  data () {
    return {
      fooCount: 88,
    }
  },
  components: {
    MyChild
  },
  methods: {
    countChange (count) {
      this.fooCount = count;
    }
  }
}
</script>

• 자식 -> 부모 컴포넌트로 emit을 이용하여 값 전송이나 이벤트 할당이 가능하다.

EventBus를 이용하면, 친척 컴포넌트 간에도 emit, on을 설정하여 데이터 전달이 가능하다.