[220519]component/props /emits

데이터 양방향 바인딩

      <input v-model.lazy="title" />
      <input v-model.number="title" />
      <input v-model.trim="title" />
      <h1>{{typeof title}}</h1>​

input 값이 바뀔때마다

<div id="app">
      <!-- 수동연결방식 input 이벤트를 이용(한글 등) -->
      <!-- <input :value="title" @input="changeInput" /> -->
      <input :value="title" @input="title = $event.target.value" />
      <!-- <input v-model="title" /> -->
      <h1>{{title}}</h1>
      <input type="checkbox" v-model="checked" />
      <!-- vmodel로 같은 데이터를 연결했기 때문에 name 이 필요없음 -->
      <input type="radio" name="heropy" value="H1" v-model="radio" />
      <input type="radio" name="heropy" value="H2" v-model="radio" />
      <h2>{{radio}}</h2>
    </div>

const App = {
  //데이터는 함수로 만들어서 사용해야함! 참조형이기 때문에 복사
  data() {
    return {
      title: "Hello~",
      checked: true,
      radio: "",
    };
  },
  methods: {
    changeInput(event) {
      console.log(event.target.value);
      this.title = event.target.value;
    },
  },
};
Vue.createApp(App).mount("#app");

• 스켈레톤 ui
• 팩토리 함수 : 객체를 반환하는 함수