Vue 기본 문법

텍스트 보간법 

- {{ }}(이중 중괄호) 를 통해 Vue에서 정의한 데이터와 html에서 정의한 데이터를 서로 바인딩하는 방법 

HTML

<span id="user-goal">메세지: {{ msg }}</span>

JavaScript

const app = Vue.createApp({
  data() {
    return {
      msg: "learn Vue"
    }
  }
});

app.mount("#user-goal");

 

디렉티브(Directive)

- DOM 요소에 특별한 속성으로 추가되어 화면의 동적인 동작을 처리하는데 사용되는 명령어

- Vue를 통해 실행되는 모든 내장 디렉티브들은 명칭이 v-로 시작함

- 하나의 요소에 두 개의 디렉티브를 함께 사용 권장 X

v-html

- HTML 요소에 Vue의 data에서 정의한 변수를 동적 바인딩하여 출력할 때 사용

- XSS 공격에 취약할 수 있어 신뢰할 수 있는 컨텐츠에만 사용

<div v-html="'<b>' + msg + '<b>'"></div>

 

v-bind

- HTML 속성에 Vue의 data에서 정의한 변수를 동적으로 바인딩할 때 사용 (data 변수 값 변경 시 동적으로 갱신)

- v-bind:[HTML 속성]으로 입력하며 줄여서 :[HTML 속성]으로도 입력 가능

<a v-bind:href="vueLink">link</a>
<a :href="vueLink">link</a>

 

v-on

- Vue의 methods에서 정의한 메소드를 특정 이벤트가 발생할 경우 실행되도록 할 때 사용

ex) 메소드 명이 add일 경우 → add, add() 모두 가능

- [v-on:] 대신에 @로 대체하여 입력 가능

<div v-on:click="event"></div>
<div v-on:click="event()"></div>
<div @click="event"></div>

 

v-if, v-show

- 조건부로 렌더링을 한도록 지정할 때 사용

- v-if는 조건을 만족하는 부분만 렌더링하고 조건을 만족하지 않는 부분은 완전 삭제

- v-show는 조건 만족 여부에 상관없이 항상 렌더링하며 조건을 만족하지 않는 부분은 display 속성을 통해 숨김

<div v-if="true"></div>
<div v-else></div>
<div v-show="true"></div>
<div v-show="false"></div>

 

v-for

- 반복적인 데이터 처리에 사용 (반복문)

- in을 사용하여 입력해야 함

<div v-for="item in items">{{ item.text }}</div>
<div v-for="(value, key) in object"></div>
<a v-for="food in foodlist":href="food.link">{{food.text}}</a>