Vue:데이터바인딩 편집하기

{{Vue}}

==개요==
Vue 인스턴스 안의 데이터를 객체형(파이썬의 사전형)태로 지정하면 <nowiki>{{ 이름 }}</nowiki> 형태로 대입할 수 있다. 한글도 된다.<br />데이터바인딩 안에서 간단한 연산들도 이루어진다. <nowiki>{{ 이름.split('') + 1 }}</nowiki> 등으로.
===HTML 속성 바인딩===
HTML 속성에 대해선 다른 문법을 쓴다.

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

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

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

다양한 속성을 담아 사용하고 싶은 경우, 다음과 같이 활용할 수도 있다.<syntaxhighlight lang="html">
<div v-bind="변수명"></div>
...

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

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

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