vue - 템플릿 문법

 싱글파일컴포넌트 (SFC) - 파일형식이다. => 컴포넌트 정의하고 만든다.

Single-File-Component = JAVASCRIPT, HTML, CSS 를 하나의 파일로 묶는다.

 

API스타일

- 옵션 API - 회사 예전 코드 옵션으로 되어있음

data, method 등을 사용하여 표현

(리액트 상의 class로 사용이 가능하고, OOP적 사용으로 this 등이 들어감)

 

- 컴포지션API - 고도화 및 마이그레이션 시  필요한 코드

function 등을 사용하여 표현

(리액트 상의 함수형 컴포넌트로 생각 할 수 있다.)

 

 

 

1. 여러 속성바인딩

 

객체안에 id, class 등을 넣고서, 

v-bind를 사용하여 넣어주면 끝!

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

<div v-bind="objectOfAttrs"></div>

 

 

2. 자바스크립트 사용

 

{{ message }} 를 사용하여 쓸수있다.

data 보관함에, message값을 넣어주면 된다.

 

리액트와 마찬가지고, 삼항연산식만 가능하고 var a = 1 과 같은 표현식은 불가능하다

<!-- 이것은 표현식이 아니라 선언식입니다: -->
{{ var a = 1 }}

<!-- 흐름 제어도 작동하지 않습니다. 삼항 표현식을 사용하십시오. -->
{{ if (ok) { return message } }}

 

---

디렉티브

 

디렉티브란? v- 접두사를 가진것들을 의미한다.

예) v-html, v-bind, v-if 

 

디렉티브의 역할이란? 

표현식 값이 변할때, Dom에 반응적으로 업데이트를 적용하는 것

<p v-if="seen">이제 이것을 볼 수 있습니다.</p>


seen은 true혹은 false의 boolean 타입

 

축약사용

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

<!-- 단축 문법 -->
<a :href="url"> ... </a>



<a v-on:click="doSomething"> ... </a>

<!-- 단축 문법 -->
<a @click="doSomething"> ... </a>