[Vue.js] 기본 개념 이해

Vue.js 라이브러리 추가

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 

인스턴스 생성:

Vue 인스턴스는 Vue.js 애플리케이션의 진입점이며, 애플리케이션의 데이터, 메소드, 라이프사이클 훅 등을 정의

var app = new Vue({
  // 데이터
  data: {
    message: 'Hello, Vue!'
  },
  // 메소드
  methods: {
    updateMessage: function() {
      this.message = 'Updated message!';
    }
  },
  // 템플릿
  template: '<div>{{ message }}</div>'
});

 

인스턴스 연결:

Vue 인스턴스를 웹 페이지에 연결하려면 HTML 요소와 Vue 인스턴스를 연결해야 합니다. 일반적으로 el 옵션을 사용하여 연결할 요소를 지정

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

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

 

데이터 바인딩:

데이터 바인딩을 사용하면 HTML 요소와 Vue 인스턴스의 데이터를 동기화

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="updateMessage">Update</button>
</div>

 

이벤트 처리:

Vue.js는 이벤트 처리를 위한 디렉티브(v-on)를 제공합니다. 디렉티브를 사용하여 HTML 요소의 이벤트와 Vue 인스턴스의 메소드를 연결할 수 있습니다.

<button v-on:click="updateMessage">Update</button>

var app = new Vue({
  // ...
  methods: {
    updateMessage: function() {
      // 메소드 내용
    }
  },
  // ...
});

 

조건문:

Vue.js는 조건문과 반복문을 사용하여 동적인 콘텐츠를 생성할 수 있습니다. v-if, v-for 등의 디렉티브를 사용하여 조건문과 반복문을 작성할 수 있습니다.

<div id="app">
  <p v-if="showMessage">Hello, Vue!</p>
</div>

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

 

반복문:

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

var app = new Vue({
  // ...
  data: {
    items: ['Item 1', 'Item 2', 'Item 3']
  },
  // ...
});