Vue 인스턴스 생성

기본 템플릿

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<div id="app">
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>

<script>

</script>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</body>

</html>

</script>

new Vue()로 인스턴스를 생성하는것은 root 인스턴스에 해당한다.

  var app = new Vue({
    el: '#app',
  });

var app = new Vue({

el: '#app',

});

=> id가 app이라는 DOM에 자바스크립트 객체인 root 인스턴스를 View로 만들어서 바인딩한다.

  var app = new Vue({
    el: '#app',
    data: {
      name: 'hone kil dong',
      result: null
    },
  });

var app = new Vue({

el: '#app',

data: {

result: null

});

<div id="app">
  <h2>{{name}}: {{ result }}</h2>
</div>

<h2>{{name}}: {{ result }}</h2>

</div>

data는 컴포넌트의 속성을 정의하는 곳이다.

name과 result 두개의 속성을 정의하였다.

이 모델 데이터를 View에 바인딩하는 방법중 가장 쉬운 방법이 {{ }} double curly brace 이다.

  var app = new Vue({
    el: '#app',
    data: {
      name: 'hone kil dong',
      result: null
    },
    methods: {
      agree: function(){
        this.result = 'agree';
      },
      disagree: function () {
        this.result = 'disagree';
      }
    }
  });

var app = new Vue({

el: '#app',

data: {

result: null

methods: {

agree: function(){

this.result = 'agree';

disagree: function () {

this.result = 'disagree';

}

});

<div id="app">
  <h2>{{name}}: {{ result }}</h2>
  <button @click="agree">Agree</button>
  <button @click="disagree">DisAgree</button>
</div>

<h2>{{name}}: {{ result }}</h2>

<button @click="agree">Agree</button>

<button @click="disagree">DisAgree</button>

</div>

클릭 이벤트를 추가하는 방법은 v-on:click=”xxx” 혹은 @click=”xxx” 이다.

agree 이벤트와 disagree 이벤트를 추가해보자. agree() 가 아니라 agree 이다.

인스턴스에는 methods 에 agree 메서드와 disagree 두개를 이용해서 추가한다.

전체 소스는 다음과 같다.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<div id="app">
  <h2>{{name}}: {{ result }}</h2>
  <button @click="agree">Agree</button>
  <button @click="disagree">DisAgree</button>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      name: 'hone kil dong',
      result: null
    },
    methods: {
      agree: function(){
        this.result = 'agree';
      },
      disagree: function () {
        this.result = 'disagree';
      }
    }
  });
</script>

<!DOCTYPE html>

<head>

</head>

<body>

<h2>{{name}}: {{ result }}</h2>

<button @click="agree">Agree</button>

<button @click="disagree">DisAgree</button>

</div>

</body>

</html>

var app = new Vue({

el: '#app',

data: {

result: null

methods: {

agree: function(){

this.result = 'agree';

disagree: function () {

this.result = 'disagree';

}

});

</script>

new Vue()는 뷰인스턴스를 생성하는것이고 root 컴포넌트에 해당한다.

컴포넌트 개발에서는 모델 데이터를 생성하고 그 모델 데이터를 뷰에 바인딩한 후에 뷰를 직접 조작하는게 아니라 모델데이터에 변경을 하면 바인딩된 뷰가 렌더링된다.

그럼 왜 컴포넌트 개발을 하는것인가?

게시판을 예를 들어보면 게시판 목록 한줄에는 제목, 글쓴이, 생성일자가 있다고 가정해보자.

항상 이 틀, 구조는 변함이 없으며 단지 그 내용만 바뀔뿐이다.

여기서 OOP적인 관점인 재사용성이라는 개념에서 생각해보면 제목, 글쓴이, 생성일자 라는 속성값을 가지는 클래스를 만든후에

이 클래스를 기반으로 해서 인스턴스를 생성하는게 훨씬 효율적이게 되는 것이다.

jquery와 비교

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>

<div id="app">
  <h2 id="display">hong kil dong: </h2>
  <button @click="agree" id="agree">Agree</button>
  <button @click="disagree" id="disagree">DisAgree</button>
</div>


</body>
</html>

<script>
  $('#agree').click(function () {
    $('#display').text('hong kil dong: ' + 'Agree');
  })
  $('#disagree').click(function () {
    $('#display').text('hong kil dong: ' + 'Disagree');
  });
</script>

<!DOCTYPE html>

<head>

</head>

<body>

<button @click="agree" id="agree">Agree</button>

<button @click="disagree" id="disagree">DisAgree</button>

</div>

</body>

</html>

$('#agree').click(function () {

$('#display').text('hong kil dong: ' + 'Agree');

})

$('#disagree').click(function () {

$('#display').text('hong kil dong: ' + 'Disagree');

});

</script>

jquery는 이벤트가 발생할때 해당 뷰를 찾아서 직접 조작한다.

여기서는 h1이라는 태그에 하나의 텍스트만 있기 때문에 차이점이 별로 없다고 생각할 수도 있겠지만,

만일 h1 태그에 만개정도의 자식 엘리먼트가 있다면 DOM에서는 만개의 태그를 모두 지운후에 처음부터 하나씩 생성해야 한다.

DOM api에서는 append, prepend만 있지 중간에 자식 노드를 삽입할 방법이 없다.

그러나 Virtual Dom을 사용하면 해당 뷰를 자바스크립트 객체로 만든후에 자바스크트의 객체에 변화가 있으면 해당하는 부분만 부분 렌더링이 가능하게 된다.