Vue.js 학습 Item4 - 데이터 양방향 바인딩

Vue.js 템플릿은 DOM을 기반으로 합니다.이것은 모든 Vue를 의미한다.js 템플릿은 해석 가능한 유효한 HTML이며 특수한 특성을 통해 강화되었습니다.Vue 템플릿은 문자열 기반 템플릿과는 근본적으로 다릅니다. 이 점을 기억하십시오.
삽입값
텍스트
데이터 바인딩의 가장 기본적인 형태는 텍스트 보간이며 Mustache 구문(중괄호)을 사용합니다.

<span>Message: {{ msg }}</span>

Mustache 태그는 해당 데이터 객체의 속성msg 값으로 대체됩니다.이 속성이 변할 때마다 업데이트됩니다.
또한 한 번의 보간만 처리하면 이후의 데이터 변화는 보간 업데이트를 일으키지 않습니다.

<span>This will never change: {{* msg }}</span>

원래 HTML
이중 Mustache 태그는 데이터를 HTML 대신 일반 텍스트로 처리합니다.실제 HTML 문자열을 출력하려면 3Mustache 태그가 필요합니다.

<div>{{{ raw_html }}}</div>

컨텐트를 HTML 문자열로 삽입 - 데이터 바인딩이 무시됩니다.템플릿 단편을 다시 사용할 필요가 있으면partials를 사용해야 합니다.
웹 사이트에서 임의의 HTML을 동적으로 렌더링하는 것은 매우 위험하다. 왜냐하면 [XSS 공격](https://en.wikipedia.org/wiki/Cross-site_scripting).신뢰할 수 있는 내용에만 HTML 플러그인을 사용하고 **는 사용자가 제출한 내용에 사용하지 않는다는 것을 기억하십시오.
HTML 특성
Mustache 태그는 HTML 특성(Attributes)에서도 사용할 수 있습니다.

<div id="item-{{ id }}"></div>

Vue에 주의하세요.js 명령과 특수 기능 내에서는 삽입값을 사용할 수 없습니다.걱정하지 마세요. 만약 Mustache 라벨이 지방을 잘못 썼다면.js가 경고를 줍니다.
바인딩 표현식
Mustache 태그에 배치된 텍스트를 바인딩 표현식이라고 합니다.Vue에서.js에서 귀속 표현식은 간단한 자바스크립트 표현식과 선택할 수 있는 필터로 구성되어 있습니다.
JavaScript 표현식
지금까지 우리의 템플릿은 간단한 속성 키로만 연결되어 있습니다.하지만 사실 Vue.js는 데이터 바인딩 내에서 모든 기능을 지원하는 JavaScript 표현식:

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

이러한 표현식은 해당 Vue 인스턴스의 역할 영역에서 계산됩니다.각 바인딩에는 하나의 표현식만 포함할 수 있으므로 다음 문은 유효하지 않습니다.

<!--       ，       ： -->
{{ var a = 1 }}

<!--         ，         -->
{{ if (ok) { return message } }}

필터
Vue.js에서는 표현식 뒤에 선택적 필터(Filter)를 추가하여 파이프 문자로 표시할 수 있습니다.

{{ message | capitalize }}

여기에 표현식 message 의 값인 '파이프 (pipe)' 를 내장된 capitalize 필터에 삽입합니다. 이 필터는 자바스크립트 함수일 뿐입니다. 대문자로 되돌아오는 값입니다.Vue.js는 몇 개의 내장 필터를 제공합니다. 다음에 우리는 자신의 필터를 어떻게 개발하는지 이야기할 것입니다.
파이프 구문은 JavaScript 구문이 아니므로 표현식에 필터를 사용할 수 없으며 표현식 뒤에만 추가할 수 있습니다.
필터는 다음과 같이 연결할 수 있습니다.

{{ message | filterA | filterB }}

필터에서 매개변수를 사용할 수도 있습니다.

{{ message | filterA 'arg1' arg2 }}

필터 함수는 항상 표현식 값을 첫 번째 매개변수로 사용합니다.인용부호가 있는 파라미터는 문자열로 간주되고 인용부호가 없는 파라미터는 표현식으로 계산된다.여기에 문자열'arg1'은 필터에 두 번째 매개 변수로 전달되고 표현식arg2의 값은 계산된 후에 세 번째 매개 변수로 전달됩니다.
명령어
명령어(Directives)는 접두사v-가 있는 특수한 특성입니다.명령어의 값은 바인딩 표현식으로 제한되므로 위에서 언급한 JavaScript 표현식과 필터 규칙도 여기에 적용됩니다.명령의 직책은 표현식의 값이 바뀔 때 특정한 행위를 DOM에 적용하는 것이다.개술의 예를 살펴보겠습니다.

<p v-if="greeting">Hello!</p>

여기v-if 명령은 표현식greeting 값의 진위를 근거로 삭제/삽입<p> 요소를 삭제합니다.
매개 변수
일부 명령은 이름 뒤에 매개변수(Argument)를 붙이고 중간에 콜론으로 구분할 수 있습니다.예를 들어, v-bind 명령은 HTML 특성을 다음과 같이 업데이트하는 데 사용됩니다.

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

여기href는 매개 변수입니다. v-bind 명령은 원소의 href 특성과 표현식url의 값을 귀속시키는 것을 알려줍니다.특성 플러그인 {% raw %}href="{{url}}"{% endraw %} 으로 같은 결과를 얻을 수 있음을 알 수 있습니다. 이것은 틀림없고, 실제로는 내부 특성 플러그인 v-bind 으로 연결됩니다.
또 다른 예는 v-on 명령으로 DOM 이벤트를 감청하는 데 사용됩니다.

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

여기 파라미터는 감청된 사건의 이름입니다.우리도 사건 귀속을 상세히 설명할 것이다.
수식부
수식자(Modifiers)는 반각 마침표.로 시작하는 특수 접미사로 명령이 특수한 방식으로 귀속되어야 한다는 것을 나타낸다.예를 들어 .literal 수식자는 표현식이 아닌 글꼴 문자열로 값을 해석하라는 명령을 알려줍니다.

<a v-bind:href.literal="/a/b/c"></a>

물론 이것은 의미가 없는 것 같다. 왜냐하면 우리는 href="/a/b/c" 을 사용하기만 하고 지령을 사용할 필요가 없기 때문이다.이 예는 단지 문법을 시범하기 위한 것이다.뒤에 우리는 수식부적의 더 많은 실천 용법을 보게 될 것이다.
약어v- 접두사는 표지 템플릿의 특정한 Vue 특성에 대한 시각적 암시이다.기존 HTML 코드에 동적 행동을 추가해야 할 때, 이 접두사는 구분 효과가 좋습니다.그러나 네가 자주 사용하는 지령을 사용할 때, 너는 줄곧 이렇게 사실적이고 수다스럽다고 느낄 것이다.또한 단일 페이지 애플리케이션(SPA)을 구축할 때 Vue.js는 모든 템플릿을 관리합니다. 이때 v- 접두사도 그리 중요하지 않습니다.그래서 Vue.js는 두 개의 가장 자주 사용하는 명령어 v-bind 와 v-on 에 특별한 줄임말을 제공합니다.
줄임말

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

<!--    -->
<a :href="url"></a>

<!--      -->
<button v-bind:disabled="someDynamicCondition">Button</button>

<!--    -->
<button :disabled="someDynamicCondition">Button</button>

줄임말

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

<!--    -->
<a @click="doSomething"></a>

그것들은 '합법적' HTML과 약간 다르게 보이지만, 모든 Vue에 있습니다.js가 지원하는 브라우저는 모두 정확하게 해석될 수 있으며, 최종 렌더링 표시에 나타나지 않습니다.줄임말 문법은 완전히 선택할 수 있지만, 한 걸음 한 걸음 깊이 배우면서, 너는 그것들을 가진 것을 다행으로 여길 것이다.