Vue 내부 원리

const app = Vue.createApp({
  data() {
    return {
      currentUserInput: '',
      message: 'Vue is great!',
    };
  },
  methods: {
    saveInput(event) {
      this.currentUserInput = event.target.value;
    },
    setText() {
      this.message = this.currentUserInput;
    },
  },
});

app.mount('#app');

Vue는 html, css의 데이터를 인식하고 반응하고, 업데이트 한다 

this를 통해서 전역변수를 관리한다 

 

뷰는 필요할 때만 DOM으로부터 값을 가져오는 기능이 있고, 이를 ref라고 한다 

$ref

ref는 html내장이 아닌, vue에서 인식하는 것이므로 $를 붙여서 사용한다/ html내장 함수가 아닌 경우에는 모두 $기호를 붙여야 한다

 

vue 컴포넌트 

app.component('friend-contact', {});

위의 예시처럼 작성한다

자체 미니 앱이라고 생각하면 되며, 자체 템플릿이 필요하다 그래서 직접 템플릿 코디를 가져온 후, 백틱을 사용하여 설정한다