Vue:데이터바인딩

틀:Vue

1. Vue:개요
   1. Vue:설치 및 개발환경 세팅
   2. Vue:프로젝트 생성 및 시작해보기
2. Vue:문법
   1. Vue:데이터바인딩
   2. Vue:반복문
   3. Vue:조건문
   4. Vue:함수
3. Vue:이벤트
   1. Vue:이벤트 핸들러

개요

Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 {{ 이름 }} 형태로 대입할 수 있다. 한글도 된다.
데이터바인딩 안에서 간단한 연산들도 이루어진다. {{ 이름.split('') + 1 }} 등으로.

HTML 속성 바인딩

HTML 속성에 대해선 다른 문법을 쓴다.

:속성명='이름' 형태로 바인딩 할 수 있다.

이외 id, class 등에 대해 바인딩이 가능하다. id에 null, undefined가 오면 해당 요소는 눈에 보이지 않게 된다.

<div v-bind:id="변수"></div> 형태로 바인딩 하기도 한다.(축약구문은 위처럼.)

다양한 속성을 담아 사용하고 싶은 경우, 다음과 같이 활용할 수도 있다.

<div v-bind="변수명"></div>
...

data() {
  return {
    변수명: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

HTML 바인딩

변수 안에 <span style="color: red">를 담아 {{변수}}라고 써도 결과는 red만 나온다.(취약점 공격을 막기 위해 이러한 제한이 있다.)

이런 제한을 풀기 위해선 <p>Using v-html directive: <span v-html="변수"></span></p> 형태로 써야 한다.