Vue.js의 기본문법

Vue.js의 기본문법을 알아보겠다. Vue.js는 템플릿 문법, 디렉티브, 이벤트 처리 등 다양한 문법을 제공하는데 아직 배운지 얼마 되지도 않았고 어제 사용했던 문법만 간단하게 정리해보겠다.

 

1. 보간법(Interpolation)

처음 사용했을 때 굉장히 신선했던 부분이였다. 중괄호( {{ ???? }} )를 사용하여 데이터를 템플릿에 보간할 수 있다.

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


var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요!'
  }
});

위의 예제에서 {{ message }}는 Vue인스턴스의 "message"데이터를 보간하여 화면에 표시한다.

 

2. 디렉티브(Directives)

v-접두사를 가진 특수 속성으로, DOM요소에 특정 동작을 바인딩 할 수 있다.

예를 들어👉

• v-if : 조건부 렌더링을 위해 사용되며, 표현식의 값에 따라 DOM요소를 추가 또는 제거한다.

<div id="app">
  <p v-if="showElement">렌더링될 요소</p>
</div>

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

v-if디렉티브는 "shoElement"데이터의 값에 따라 요소를 조건부로 렌더링한다.

• v-for : 배열 또는 객체의 각 항목에 대해 반복문을 실행하여 여러요소를 생성한다.
• v-bind : 요소의 속성을 동적으로 바인딩한다.
• v-on : 이벤트 처리를 위해 사용되며, 지정된 이벤트가 발생했을 때 특정 메소드를 호출한다.

3. 이벤트 처리

v-on 디렉티브를 사용하여 이벤트 처리를 할 수 있다.

<div id="app">
  <button v-on:click="handleClick">클릭</button>
</div>

var app = new Vue({
  el: '#app',
  methods: {
    handleClick: function() {
      alert('버튼이 클릭되었습니다!');
    }
  }
});

v-on:click 디렉티브를 사용하여 버튼 클릭 이벤트를 처리하는 handleClick메소드를 정의하는 예제이다.

 

4. 계산된 속성(Computed Properties)

템플릿에 표현식을 직접 작성하는 대신 계산된 속성을 사용할 수 있다.

<div id="app">
  <p>원본 메시지: {{ message }}</p>
  <p>대문자로 변환: {{ upperCaseMessage }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js'
  },
  computed: {
    upperCaseMessage: function() {
      return this.message.toUpperCase();
    }
  }
});

upperCaseMessage는 message 데이터를 대문자로 변환하여 계산된 속성으로 표시한다.