Vue:데이터바인딩

틀:Vue

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

개요

Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 {{ 이름 }} 형태로 대입할 수 있다.한글도 된다.

HTML 속성 바인딩

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

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

이외 id, class 등에 대해 바인딩이 가능하다.

HTML 바인딩

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

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