뷰 JS (Vue JS) 튜토리얼 2 | Data Binding (데이터 바인딩)

뷰의 튜토리얼 2번이다.

 

데이터 바인딩은 간단한 개념인데 Vue 의 인스턴스를 HTML 에서 바로 적용하는 기술이다.

 

아래는 Vue 객체이다. 인스턴스를 받을 참조 변수를 명시하면 변수를 가지고 브라우저에서 사용할 수 있다. (app)

 

el 은 요소 #은 태그의 id를 선택한 것과 같다.

app = new Vue({
  el: '#vue-app',
  data:{
    name: 'Dr.Smith',
    website: 'https://www.naver.com',
    websiteTag: '<a href="https://www.daum.net"> DAUM PORTAL</a>'
  }
});

데이터 바인딩의 예제를 위해 세개의 변수를 준비한다.

 

name은 이미 알고 있는 내용이다. HTML 에 단순히 {{ name }} 으로 출력할 수 있다.

 

웹사이트를 연결 시키는 Anchor 태그는 어떻게 연결시킬까? 단순히 {{ }} 중괄호 만으로는 사용할 수 없다.

 

여기서 v-bind를 사용한다. v-bind는 vue-bind 의 약자로 v-bind가 들어간 태그의 속성에는 Vue 의 data 변수를 그대로 사용할 수 있다. 아래 예제 코드는 링크를 생성할 수 있다.

  <div id="vue-app">
    <h2>Data Binding</h2>
    <a v-bind:href="website">NET LINK</a>
    <input type="text" v-bind:value="name"><br>
    <p v-html="websiteTag"></p>
  </div>

 

링크를 클릭하면 Vue 객체에서 전달한 웹사이트로 이동한다.

 

v-html 태그도 비슷하다. 이 방법으로 html 태그 파일을 가져와서 그대로 출력하는 것도 가능하다.

 

이벤트 핸들링

뷰에서는 이벤트를 어떻게 핸들링할까?

 

카운터를 만들어 보자.

 

app = new Vue({
  el: '#vue-app',
  data:{
    count: 30
  },
  methods:{
    double: function(){
      this.count *= 2;
    }
  }
});

  <div id="vue-app">
    <h2>Event Handling</h2>

    <p>Count : {{count}}</p>
    <button v-on:click="count++">Add Count</button>
    <button v-on:click="count--">Subtract Count</button>

    <button v-on:click="double">double Count</button>

    <button v-on:click.once="count++">Add Count Once</button>
  </div>

V-바인딩을 사용하니 즉시 Vue의 속성값을 변경할 수도 있고 함수를 실행시킬 수도 있다. 뷰에서 하는 일은 기본적으로 네이티브 언어의 프로그래밍을 하는 것과 동일하다. 문법이 약간 바뀌었다고 생각하면 된다.

 

새로나오는 키워드들을 잘 기억해두고 요령있게 사용하면 될 것이다.

 

 

다음은 div 태그안에 들어오면 마우스 포지션을 업데이트 하는 코드이다. 좌표를 변경하는 코드는 낯설지 않다. 좌표를 보여주는게 중요한 것 보다는 마우스가 정해진 위치 위에 올라갔을 때 계속 이벤트가 발생하고 처리되고 있다는 것이다. 웹문서 역시 윈도우즈나 게임창 처럼 무한 루프를 하며 대기하고 있다가 마우스가 올라가면 이벤트를 발생시켜서 필요한 처리를 하고 있다는 것이다.

 

app2 = new Vue({
  el: '#canvas',
  data:{
    count: 30,
    x: 0,
    y: 0
  },
  methods:{
    updatePos: function(event){
      this.x = event.offsetX;
      this.y = event.offsetY;
    }
  }
});

  <div id="canvas" v-on:mousemove="updatePos">{{x}}, {{y}}</div>

* 소스코드는 깃허브에서 확인할 수 있다.

 

*Tutorial/Web/Vue.js/eventHandling at main · kayken7/Tutorial (github.com) 깃허브 코드

kayken7/Tutorial