Vue3 - Composition API

목차

• Vue3 - Component 간 통신
• Vue3 - Component
• Vue3 - Composition API
• Vue3 - Instance
• [Vue3] - Reactivity (반응형)
• Vue3 - 시작하기

Composition API 로 리펙토링

Composition API 적용 전

export default {
  methods: {
    logText() {
      this.pas
    }
  }

  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    submitForm() {
      // event.preventDefault();
      const data = {
        username: this.username,
        password: this.password,
      }
      axios.post('https://jsonplaceholder.typicode.com/users/', data)
        .then(response => {
          console.log(response)
        });
      // console.log('제출됨')
    }
  }
}

Composition API 적용 후

export default {
  setup() {
    // data
    var username = ref('');
    var password = ref('');

    // methods
    var submitForm = () => {
      axios.post('https://jsonplaceholder.typicode.com/users/', {
        username: username.value,
        password: password.value
      }).then(response => {
        console.log(response);
      })
    }
    
    return { username, password, submitForm }
  },
}