Vue.js 기본 문법

Vue.js 기본 문법

 

 

 

1. Vue 인스턴스

Vue.js 애플리케이션은 Vue 인스턴스를 생성하는 것으로 시작합니다. Vue 인스턴스는 new Vue()로 생성되며, 이는 HTML 요소에 바인딩됩니다.

<div id="app">
  {{ message }}
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>
    

이 코드에서 #app 요소는 Vue 인스턴스와 연결되며, data 속성에 정의된 데이터를 사용할 수 있습니다.

 

 

 

2. 데이터 바인딩

Vue.js는 데이터와 DOM을 연결하여 동적 화면을 쉽게 만들 수 있습니다. 데이터 바인딩은 {{ }}를 사용하여 HTML에서 데이터를 표시할 수 있습니다.

<div id="app">
  {{ message }}
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Vue.js를 배우고 있습니다.'
    }
  });
</script>
    

이 코드에서 {{ message }}는 Vue 인스턴스의 data 속성에 있는 값을 동적으로 HTML에 바인딩합니다.

 

 

 

3. v-bind

v-bind 디렉티브는 HTML 속성에 Vue 데이터 바인딩을 적용할 수 있게 합니다. 예를 들어, 동적으로 링크를 설정하거나 CSS 클래스를 추가할 수 있습니다.

<div id="app">
  <a v-bind:href="url">Vue.js 공식 사이트</a>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      url: 'https://vuejs.org'
    }
  });
</script>
    

위 예제에서 v-bind:href는 url 데이터 속성에 바인딩되어 동적으로 링크를 설정합니다.

 

 

 

4. v-model

v-model 디렉티브는 양방향 데이터 바인딩을 제공합니다. 폼 입력 요소와 연결하여 사용자의 입력값이 실시간으로 데이터에 반영되도록 합니다.

<div id="app">
  <p>입력한 메시지: {{ message }}</p>
  <input v-model="message" />
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: ''
    }
  });
</script>
    

이 코드는 사용자가 입력 필드에 값을 입력하면 message 데이터가 업데이트되고, 해당 데이터가 화면에 실시간으로 반영됩니다.

 

 

 

 

5. v-if, v-else, v-else-if

조건부 렌더링은 v-if, v-else-if, v-else 디렉티브를 사용하여 구현할 수 있습니다. 특정 조건에 따라 요소를 렌더링할지 말지 결정할 수 있습니다.

<div id="app">
  <p v-if="seen">이 메시지는 보입니다!</p>
  <p v-else>이 메시지는 보이지 않습니다.</p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      seen: true
    }
  });
</script>
    

v-if는 seen 값이 참일 때만 메시지를 렌더링하며, v-else는 거짓일 때 다른 메시지를 보여줍니다.

 

 

 

 

6. v-for

v-for 디렉티브는 배열이나 객체를 순회하면서 여러 요소를 동적으로 렌더링할 수 있습니다.

<div id="app">
  <ul>
    <li v-for="item in items">{{ item.text }}</li>
  </ul>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      items: [
        { text: '사과' },
        { text: '바나나' },
        { text: '포도' }
      ]
    }
  });
</script>
    

이 코드에서는 items 배열을 순회하여 각 항목의 텍스트를 <li> 요소로 렌더링합니다.

 

 

 

 

7. 이벤트 처리

Vue에서는 v-on 디렉티브를 사용하여 DOM 이벤트를 처리할 수 있습니다. v-on:click과 같이 특정 이벤트에 대한 핸들러를 설정할 수 있습니다.

<div id="app">
  <button v-on:click="greet">인사하기</button>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      name: '철수'
    },
    methods: {
      greet: function() {
        alert('안녕하세요, ' + this.name + '님!');
      }
    }
  });
</script>
    

버튼을 클릭하면 greet 메서드가 호출되어 알림창에 인사말을 표시합니다.

 

 

 

 

 

8. 메서드

Vue 인스턴스에서 methods 옵션을 사용하여 사용자 정의 메서드를 정의할 수 있습니다. 메서드는 이벤트 핸들러나 기타 로직에서 호출됩니다.

<div id="app">
  <p>{{ reversedMessage }}</p>
  <button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Vue.js'
    },
    methods: {
      reverseMessage: function() {
        this.message = this.message.split('').reverse().join('');
      }
    },
    computed: {
      reversedMessage: function() {
        return this.message.split('').reverse().join('');
      }
    }
  });
</script>
    

버튼을 클릭하면 reverseMessage 메서드가 호출되어 메시지가 뒤집힙니다.

 

 

 

 

 

9. 컴포넌트

Vue에서는 컴포넌트를 사용하여 UI를 작은 단위로 분리할 수 있습니다. 각 컴포넌트는 고유한 데이터와 메서드를 가질 수 있습니다.

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
});

var app = new Vue({
  el: '#app',
  data: {
    groceryList: [
      { id: 0, text: '야채' },
      { id: 1, text: '과일' },
      { id: 2, text: '빵' }
    ]
  }
});
    

이 코드는 todo-item이라는 컴포넌트를 정의하고, groceryList 배열을 순회하여 각 항목을 컴포넌트로 렌더링합니다.

 

 

 

 

10. Vue 디렉티브

Vue.js는 다양한 디렉티브를 제공하여 HTML 요소에 특정 동작을 적용할 수 있습니다. 여기에는 v-if, v-for, v-bind, v-model, v-on과 같은 디렉티브가 포함됩니다.

디렉티브는 템플릿에서 데이터 바인딩, 이벤트 처리, 조건부 렌더링, 반복 렌더링 등을 쉽게 구현할 수 있게 해줍니다.