Vue.js는 매일 양방향 데이터 바인딩을 배워야 합니다.
- 高洛峰원래의
- 2017-01-12 11:45:201319검색
Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板，请记住这点。
插值
文本
数据绑定最基础的形式是文本插值，使用 “Mustache” 语法（双大括号）：
45a2772a6b6107b401db3c9b82c049c2Message: {{ msg }}54bdf357c58b8a65c66d7c19c8e4d114
Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。
你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：
45a2772a6b6107b401db3c9b82c049c2This will never change: {{* msg }}54bdf357c58b8a65c66d7c19c8e4d114
原始的 HTML
双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串，需要用三 Mustache 标签：
dc6dce4a544fdca2df29d5ac0ea9906b{{{ raw_html }}}16b28748ea4df4d9c2150843fecfba68
内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断，应当使用 partials。
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。记住，只对可信内容使用 HTML 插值，**永不**用于用户提交的内容。
HTML 特性
Mustache 标签也可以用在 HTML 特性 (Attributes) 内：
02d2b8f69afd719d73188be9022421d916b28748ea4df4d9c2150843fecfba68
Vue.js 지시어 및 특수 기능 내에서는 보간을 사용할 수 없습니다. 걱정하지 마십시오. Vue.js는 Mustache 태그가 잘못된 위치에 사용되면 경고를 표시합니다.
결합 표현식
Mustache 태그 안에 있는 텍스트를 결합 표현식이라고 합니다. Vue.js에서 바인딩 표현식은 간단한 JavaScript 표현식과 선택적으로 하나 이상의 필터로 구성됩니다.
JavaScript 표현식
지금까지 템플릿은 단순한 속성 키에만 바인딩되었습니다. 그러나 Vue.js는 실제로 데이터 바인딩 내에서 모든 기능을 갖춘 JavaScript 표현식을 지원합니다.
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' } }
{{ message.split('').reverse().join('') }}
이 표현식은 해당 표현식이 속한 Vue 인스턴스의 범위 내에서 평가됩니다. 한 가지 제한 사항은 각 바인딩이 단일 표현식만 포함할 수 있으므로 다음 명령문은 유효하지 않습니다.
e3cf18a5ca74bf9151b1e17907560196
{{ var a = 1 }}
0debba87989539862325108f6027016c
{{ if (ok) { return message } } }
필터
Vue.js에서는 표현식 뒤에 "파이프 문자"로 표시되는 선택적 "필터"를 추가할 수 있습니다.
{{ 메시지 | 대문자로 표시 }}
여기서 표현식 메시지의 값을 내장된 대문자 필터로 "파이프"합니다. 이 필터는 실제로 대문자 값을 반환하는 JavaScript 함수입니다. Vue.js는 여러 내장 필터를 제공하며, 나중에 자신만의 필터를 개발하는 방법에 대해 설명하겠습니다.
파이프 구문은 JavaScript 구문이 아니므로 필터는 표현식 내에서 사용할 수 없으며 표현식 뒤에만 추가할 수 있습니다.
필터를 연결할 수 있음:
{{ message | filterA | filterB }}
필터는 매개변수도 허용할 수 있음:
{{ message | arg1' arg2 }}
필터 함수는 항상 표현식의 값을 첫 번째 인수로 사용합니다. 따옴표가 있는 매개변수는 문자열로 처리되고, 따옴표가 없는 매개변수는 표현식으로 평가됩니다. 여기서 문자열 'arg1'은 두 번째 매개변수로 필터에 전달되고, arg2 표현식의 값은 세 번째 매개변수로 평가됩니다.
지시어
지시어는 v-라는 접두사가 붙는 특수 기능입니다. 지시문의 값은 바인딩 표현식으로 제한되므로 위에서 언급한 JavaScript 표현식 및 필터 규칙도 여기에 적용됩니다. 지시문의 책임은 표현식 값이 변경될 때 DOM에 특별한 동작을 적용하는 것입니다. "개요"의 예를 다시 살펴보겠습니다.
fca80fab631d6c66ff12d51e112618b1Hello!94b3e26ee717c64999d7867364b1b4a3
여기서 v-if 지시문은 다음과 같습니다. true 또는 false 표현 인사말 값에 따라 e388a4556c0f65e1904146cc1a846bee 요소를 삭제/삽입합니다.
매개변수
일부 명령은 이름 뒤에 콜론으로 구분된 "인수"를 가질 수 있습니다. 예를 들어 v-bind 지시문은 HTML 기능을 반응적으로 업데이트하는 데 사용됩니다.
16e870cf50e90f7deae53a5851f2cc775db79b134e9f6b82c0b36e0489ee08ed
여기 href는 매개변수는 v-bind 지시문에 요소의 href 속성을 표현식 url의 값에 바인딩하도록 지시합니다. 기능 보간 {% raw %}href="{{url}}"{% endraw %}를 사용하여 동일한 결과를 얻을 수 있다는 것을 눈치챘을 것입니다. 이는 정확하며 실제로 내부적으로 기능 보간은 v-bind 바인딩으로 변환됩니다. .
또 다른 예는 DOM 이벤트를 수신하는 데 사용되는 v-on 지시문입니다.
913ab33578b43051d8ce890f7743009b
이 매개변수는 모니터링되는 이벤트의 이름입니다. 이벤트 바인딩에 대해서도 자세히 설명하겠습니다.
수정자
수정자(Modifiers)는 반각 마침표 .로 시작하는 특수 접미사로, 명령이 특별한 방식으로 바인딩되어야 함을 나타내는 데 사용됩니다. 예를 들어, .literal 수정자는 해당 값을 표현식이 아닌 리터럴 문자열로 구문 분석하도록 지시문에 지시합니다.
7c0f991b5451b1dec9555cce44066b3e 5db79b134e9f6b82c0b36e0489ee08ed
물론 지시문을 사용하는 대신 href="/a/b/c"만 사용하면 되므로 이는 말이 되지 않는 것 같습니다. 이 예는 단지 구문을 보여주기 위한 것입니다. 나중에 수정자의 보다 실제적인 사용을 살펴보겠습니다.
약어
v- 접두사는 템플릿의 특정 Vue 기능을 식별하는 시각적 단서입니다. 이러한 접두사는 기존 HTML 코드에 동적 동작을 추가해야 할 때 차이를 만들 수 있습니다. 하지만 몇 가지 일반적인 지침을 사용하면 이렇게 쓰는 것이 정말 장황하다는 느낌이 들 것입니다. 그리고 단일 페이지 애플리케이션(SPA)을 구축할 때 Vue.js가 모든 템플릿을 관리하게 되는데, 현재 v- 접두사는 그다지 중요하지 않습니다. 따라서 Vue.js는 가장 일반적으로 사용되는 두 가지 명령 v-bind 및 v-on에 대한 특수 약어를 제공합니다.
v-bind 약어
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写 --> <button :disabled="someDynamicCondition">Button</button>
v-on 약어
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
"법적" HTML과 약간 다르게 보이지만 Vue.js가 지원하는 모든 브라우저에서 올바르게 구문 분석되며 최종 렌더링된 마크업에는 나타나지 않습니다. 약어 구문은 완전히 선택 사항이지만, 단계별로 배우다 보면 그 기능을 갖게 되어 기쁠 것입니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.
Vue.js가 매일 배워야 하는 양방향 데이터 바인딩과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!