Vue 기본 문법

모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작합니다.

var vm = new Vue({
  // 옵션
})

디렉티브

v- 접두사가 있는 특수 속성입니다. 디렉티브 속성 값은 단일 JavaScript 표현식 이 됩니다. (v-for는 예외)

일부 디렉티브는 콜론으로 표시되는 “전달인자”를 사용할 수 있습니다.

<a v-bind:href="url"> ... </a>

동적 전달인자

[ ] 대괄호 내부에 자바스크립트 표현식을 넣어 인자로 전달할 수 있다.

<!--
동적 전달인자는 "동적 전달인자의 형식 제약"의 부분에서 후술되는바와 같이,
조금의 제약이 있는 점에 주의해주세요
-->
<a v-bind:[attributeName]="url"> ... </a>

여기서 attributeName은 Javascript형식으로 동적 변환되어, 그 변환결과가 전달인자의 최종적인 밸류로 사용됩니다. 예를들어 당신의 Vue 인스턴스에 "href"라는 값을 가진 attributeName 데이터 속성을 가진 경우, 이 바인딩은 v-bind:href와 동등합니다.

이와 유사하게, 동적인 이벤트명에 핸들러를 바인딩 할 때 동적 전달인자를 활용할 수 있습니다.

동적 전달인자는, null을 제외하고는 string으로 변환될 것으로 예상합니다. 특수 값인 null은 명시적으로 바인딩을 제거하는데 사용됩니다. 그 외의 경우, string이 아닌 값은 경고를 출력합니다.

잘못된 동적 전달인자 예시

<!-- 컴파일러 경고를 불러옵니다 -->
<a v-bind:['foo' + bar]="value"> ... </a>

스페이스나 따옴표를 포함하지 않는 형식을 사용하거나, 복잡한 표현식을 계산된 속성(Computed)으로 대체하는 것입니다.

v-bind 전체, 축약버전

<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 전체, 축약버전

<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

v-for 로 리스트 반복하기

<template>
  <div class="test">
    <router-link to="/home">go back to home</router-link>
    <h1>This is a test page</h1>
    <li v-for="(person, index) in person">
      {{ person.name }} / {{ index }} / {{ person.age }}
    </li>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      person: [
        {
          name: 'doyoon',
          age: '27'
        },
        {
          name: 'sona',
          age: '20'
        },
        {
          name: 'lussi',
          age: '22'
        }
      ]
    };
  }
};
</script>

인자로 전달하는 person 의 이름이 영향이 있다. for 문을 돌리고 싶은 대상 object의 이름을 써야한다.

또는 아래와 같은 방식으로 object 내의 값들을 한번에 가져다 쓸수도 있다.

value in object

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

또는 간단하게 객체의 키 값을 뽑아서 인자로 바로 넘겨버릴수도있다.

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

위와 같이 쓸때의 출력 결과

  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'

v-bind

주로 엘리먼트의 클래스목록과 인라인 스타일을 조작하기 위해 사용됨.

클래스 토글 같은 경우.

<div class="static" v-bind:class="{ active : isActive }"></div>

data: {
    isActive: true
}

위와 같이 코드를 쓰면 아래와 같이 렌더된다.

<div class="static active"></div>

computed 속성 사용하기

var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  computed: {
    // 계산된 getter
    reversedMessage: function () {
      // `this` 는 vm 인스턴스를 가리킵니다.
      return this.message.split('').reverse().join('')
    }
  }
})

computed 속성에 바인딩하는 것이 가장 강력하고, 일반적이다.

//HTML 
<div v-bind:class="classObject"></div> 

//JavaScript 
data: { isActive: true, error: null }, 
computed: { 
	classObject: function() { 
		return { 
			active: this.isActive && !this.error, 
			'text-danger': this.error && this.error.type === 'fatal', 
		} 
	} 
}

배열 구문

//HTML 
<div v-bind:class="[activeClass, errorClass]"></div> 

//JavaScript 
data: { 
	activeClass: 'active', 
	errorClass: 'text-danger' 
}

배열로 위와 같이 바인드하고, 쓰고 싶은 class 를 value 로 넣으면,

아래와 같은 모습으로 렌더

<div class="active text-danger"></div>

배열에서도 조건부 토글, 삼항 연산자 의 사용이 가능하다.

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

또는

<div v-bind:class="[isActive && activeClass, errorClass]"> 
<div v-bind:class="[{ active: isActive }, errorClass]">

vind 를 사용한 클래스 토글 예시

<div 
  class="demo"
  @click="attachRed = !attachRed" 
  :class="{red: attachRed, green: !attachRed}"
  class="demo"
>1</div>