Vue

용어정리

App : 필요한 값과 메소드를 담은 객체 ( 최상위 컴포넌트 )
app : Vue.createApp(App) 상태의 값
vm : 인스턴스로 app.mount(el)로 올라간 상태

• createApp에 전달된 옵션은 루트 컴포넌트를 구성하는데 사용

• 컴포넌트는 이름이 있는 재사용 가능한 인스턴스
  ex) <button-counter>

반응형 / 반응성

데이터가 바뀌면 이와 연결된 화면(웹)에서 반응을 처리해주는 데이터는 반응형 데이터이다.

이러한 성격을 반응성이라고 한다.

---

애플리케이션 API

• app으로 쓰이고 아래 쓰이는 대상은 다음과 같다.

1. component
2. config
3. mixin
4. mount
5. provide
   ...

• app.mount()처럼 쓰인다.

---

인스턴스

새 Vue 인스턴스를 만드는 것부터 시작

• vm(viewModel)이라고 쓰기도 한다.

---

인스턴스 만들기

1. new Vue
2. Vue.createApp...mount()

var vm = new Vue({
  // 옵션
})

 const vm = Vue.createApp({...}).mount(...)

• 인스턴스를 viewModel(vm)이라고도 한다.

---

인스턴스 속성

인스턴스 메소드

추가내용

{{ }}의 내용은 단순히 text로 해석되서 입력

v-bind 변형하기

<style>
  .orange1,.orange2,.orange3,.orange4{
    color:orange;
  }
</style>
<div id="app">
  <div v-bind:class="{orange1:active}">{{counter}}</div>
  <div v-bind:class="'orange2'">{{counter}}</div>
  <div v-bind:class="{orange3:true}">{{counter}}</div>
  <div v-bind:class="orange4">{{counter}}</div>
</div>
<script type="module">
  const App = {
    data(){
      return {
        counter:0,
        active:true,
        orange4:'orange4'
      }
    }
  }
  const app = Vue.createApp(App).mount('#app')
</script>

해당 div들은 전부 아래와 같이 정상적으로 나타난다.

• orange1 : active의 값이 true이냐 false이냐에 따라 orange1을 등록할지 안할지 결정
• orange2 : orange2 자체가 string이므로 따로 찾지않고 대상을 바로 class에 집어 넣는다.
• orange3 : orange1과 마찬가지로 true이므로 orange3를 등록
• orange4 : orange4가 return내용에 있나 확인하고 해당 key가 있으므로 value인 orange4를 등록한다.

객체의 메소드 이해

// 아래 두 객체는 동일하게 동작합니다.

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// 단축 구문을 사용하니 더 깔끔해 보이네요.
user = {
  sayHi() { // "sayHi: function()"과 동일합니다.
    alert("Hello");
  }
};

• 즉, 아래도 같은 의미이다.

  const App = {
    data : function(){
      return {
        counter:10
      }
    }
  }
  
  const App = {
    data(){
      return {
        counter:10
      }
    }
  }