티스토리 뷰

VUEJS

VUEJS) Vue인스턴스

Programmers 2021. 7. 20. 08:16
반응형

Vue인스턴스, 반응형이 동작되는 과정을 설명

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        {{ msgA }}
        {{ msgB }}
        <button v-on:click="changeMessage">Change!</button>
      </div>
      <script>
        const vm = new Vue({
          el: '#app',
          data: {
            msgA: 'Message A.'
          },
          methods: {
            changeMessage: function() {
              this.msgA = 'Changed message A!'
              this.msgB = 'Changed message B!'
            }
          },
          computed: {},
          watch: {
            msgA(value) {
              console.log(value)
            }
          },
          created() {},
          mounted() {}
        })

        console.log(vm)
      </script>
    </div>
  </body>
</html>

script내부의 data에 정의되지 않은 데이터는 반응형으로 만들어 질 수 없다.
{{ msgA }}는 정의 되어 있어서 반응형이 가능하지만, {{ msgB }}는 반응형이 불가하다.

실행화면

↓

 

버튼클릭을 통해서 msgB를 출력하는 것은 가능하지만 반응형은 불가능하다.

반응형
저작자표시 비영리 변경금지

'VUEJS' 카테고리의 다른 글

VUEJS) DxScrollView 팁 :bounceEnabled="false" 스크롤 영역 제한// :use-native="false" 차트나 그림때문에 스크롤안되는 것 방지로 사용// show-scrollbar="always" 스크롤 보이도록 만듬  (0) 2021.07.20
VUEJS) 텍스트 생략  (0) 2021.07.20
VUEJS) 컴포넌트 만들기 component  (0) 2021.07.19
VUEJS) v-bind:class, v-on:click, v-model 응용  (0) 2021.07.13
VUEJS) v-model  (0) 2021.07.13
댓글
공지사항