템플릿 구문
기본 구현에서 Vue는 템플릿을 가상 DOM 렌더링 기능으로 컴파일합니다. 반응형 시스템과 결합된 Vue는 다시 렌더링해야 하는 구성 요소 수를 지능적으로 계산하고 DOM 작업 수를 최소화할 수 있습니다.
가상 DOM에 익숙하고 JavaScript의 강력한 기능을 선호하는 경우 템플릿을 건너뛰고 선택적 JSX 구문을 사용하여 렌더링 함수를 직접 작성할 수도 있습니다. 🎙
기능
- 약어보간
- 가장 일반적인 데이터 바인딩 형식은 "Mustache" 구문(이중 중괄호의 텍스트 보간)을 사용하는 것입니다.
<span>Message: {{ msg }}</span>Mustache 태그는 해당하는msg속성 값으로 대체됩니다. 데이터 객체. 바인딩된 데이터 개체의msg속성이 변경될 때마다 보간 지점의 내용이 업데이트됩니다. v-once 지시문을 사용하면 다음과 같은 경우 일회성 보간을 수행할 수도 있습니다. 데이터가 변경되면 보간 내용은 업데이트되지 않습니다. 그러나 이는 노드의 다른 데이터 바인딩에 영향을 미친다는 점에 유의하십시오.
<span v-once>这个将不会改变: {{ msg }}</span>
이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석합니다. 암호. 실제 HTML을 출력하려면 v-html 지시어를 사용해야 합니다: <p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
이 span의 콘텐츠는 HTML로 직접 rawHtml 속성 값으로 대체됩니다. 구문 분석된 속성 값의 데이터 바인딩은 무시됩니다. Vue는 문자열 기반 템플릿 엔진이 아니기 때문에 v-html을 사용하여 부분 템플릿을 작성할 수 없습니다. 이와 대조적으로 사용자 인터페이스(UI)의 경우 구성 요소는 재사용 및 구성이 가능한 기본 단위로 더 적합합니다. span 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
特性
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
对于布尔特性 (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：
<button v-bind:disabled="isButtonDisabled">Button</button>
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。
使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如
Math和Date。你不应该在模板表达式中试图访问用户定义的全局变量。
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：
<p v-if="seen">现在你看到我了</p>
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p>
사이트에서 동적으로 렌더링된 임의 HTML은 XSS로 쉽게 이어질 수 있으므로 매우 위험할 수 있습니다. 공격. 신뢰할 수 있는 콘텐츠에만 HTML 보간을 사용하고 사용자가 제공한 콘텐츠에는절대
보간을 사용하지 마세요.
Characteristics
🎜🎜🎜Mustache 구문은 HTML 특성에 적용할 수 없습니다. vuejs.org/v2/api/#v-bind" target="_blank">v-bind 지시문: 🎜<a v-bind:href="url">...</a>🎜부울 속성의 경우(해당 속성이 있으면 값이
true임을 의미합니다) , v-bind는 다음 예에서 약간 다르게 작동합니다. 🎜<a v-on:click="doSomething">...</a>🎜
isButtonDisabled 값이 null인 경우 정의되지 않음 또는 false인 경우 disabled 속성은 렌더링된 <button> 요소에 포함되지 않습니다. 🎜🎜🎜🎜🎜🎜JavaScript 표현식 사용🎜🎜🎜🎜지금까지 템플릿에서는 간단한 속성 키 값만 바인딩했습니다. 그러나 실제로 모든 데이터 바인딩에 대해 Vue.js는 완전한 JavaScript 표현식 지원을 제공합니다. 🎜
<a v-bind:[attributeName]="url"> ... </a>
🎜이 표현식은 자신이 속한 Vue 인스턴스의 데이터 범위에서 JavaScript로 구문 분석됩니다. 각 바인딩에는 🎜단일 표현식🎜만 포함될 수 있다는 제한이 있으므로 다음 예 🎜는 적용되지 🎜 않습니다. 🎜<a v-on:[eventName]="doSomething"> ... </a>
🎜템플릿 표현식은 샌드박스에 배치되며 Math 및 Date와 같은 전역 변수의 화이트리스트에만 액세스할 수 있습니다. 템플릿 표현식에서 사용자 정의 전역 변수에 액세스하려고 시도해서는 안 됩니다. 🎜
🎜🎜🎜🎜Instructions🎜🎜
🎜지침(지시문)은 < Special code>v- 접두사의 속성. 지시문 속성의 값은 🎜단일 JavaScript 표현식🎜이어야 합니다(v-for는 예외이지만 이에 대해서는 나중에 논의하겠습니다). 지시문의 역할은 표현식 값이 변경될 때 관련 효과를 DOM에 반응적으로 적용하는 것입니다. 소개에서 본 예를 다시 보면: 🎜<!-- 这会触发一个编译警告 --> <a v-bind:['foo' + bar]="value"> ... </a>🎜여기에서
v-if 지시문은 표시 표현식의 true 또는 false 값을 기반으로 를 삽입/제거합니다. code> ><p> 요소입니다. 🎜🎜🎜🎜🎜🎜🎜매개변수🎜🎜🎜일부 명령은 명령 이름 뒤에 콜론으로 표시되는 "매개변수"를 받을 수 있습니다. 예를 들어 v-bind 지시문을 사용하면 HTML 기능을 반응적으로 업데이트할 수 있습니다. v-bind 指令可以用于响应式地更新 HTML 特性：
<!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` --> <a v-bind:[someAttr]="value"> ... </a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
<form v-on:submit.prevent="onSubmit">...</form>
在这里参数是监听的事件名。我们也会更详细地讨论事件处理。
动态参数
2.6.0 新增
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a>
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>
同样地，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。
对动态参数的值的约束
动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
对动态参数表达式的约束
动态参数表达式有一些语法约束，因为某些字符，例如空格和引号，放在 HTML 特性名里是无效的。同样，在 DOM 中使用模板时你需要回避大写键名。
例如，下面的代码是无效的：
rrreee变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
另外，如果你在 DOM 中使用模板 (直接在一个 HTML 文件里撰写模板)，需要留意浏览器会把特性名全部强制转为小写：
rrreee修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
在接下来对 v-on 和 v-forrrreee여기에서 href는 v-bind 지시어는 요소의 href 속성을 url 표현식의 값에 바인딩합니다.
v-on 지시문입니다. rrreee
여기서 매개변수는 수신할 이벤트의 이름입니다. 또한 이벤트 처리에 대해 더 자세히 논의하겠습니다.
동적 매개변수🎜
🎜2.6.0 새로운 기능 🎜🎜2.6.0부터 대괄호로 묶인 JavaScript 표현식을 명령의 매개변수로 사용할 수 있습니다. 🎜rrreee🎜여기서
attributeName은 JavaScript 표현식으로 동적으로 처리됩니다. 얻은 값은 최종 매개변수로 사용됩니다. 예를 들어 Vue 인스턴스에 "href" 값이 있는 data 속성 attributeName이 있는 경우 이 바인딩은 < code>와 동일합니다. v-bind:href. 🎜🎜마찬가지로 동적 매개변수를 사용하여 핸들러 함수를 동적 이벤트 이름에 바인딩할 수 있습니다. 🎜rrreee🎜마찬가지로 eventName 값이 "focus"인 경우 < code>v-on:[eventName]는 v-on:focus와 동일합니다. 🎜🎜동적 매개변수 값에 대한 제약 조건🎜🎜동적 매개변수는 문자열로 평가되어야 하며 예외적인 경우 값은 null입니다. 이 특수 null 값을 사용하여 바인딩을 명시적으로 제거할 수 있습니다. 문자열이 아닌 다른 값은 경고를 트리거합니다. 🎜🎜동적 매개변수 표현식에 대한 제약 조건🎜🎜동적 매개변수 표현식에는 HTML 속성 이름에서 공백 및 따옴표와 같은 특정 문자가 유효하지 않기 때문에 일부 구문 제약 조건이 있습니다. 마찬가지로 DOM에서 템플릿을 사용할 때 키 이름을 대문자로 사용하지 않아야 합니다. 🎜🎜예를 들어 다음 코드는 유효하지 않습니다. 🎜rrreee🎜 해결 방법은 공백이나 따옴표가 없는 표현식을 사용하거나 이러한 복잡한 표현식을 계산된 속성으로 바꾸는 것입니다. 🎜🎜또한 DOM에서 템플릿을 사용하는 경우(HTML 파일에 직접 템플릿 작성) 브라우저가 모든 속성 이름을 소문자로 강제로 설정한다는 점에 유의해야 합니다. 🎜rrreee🎜🎜🎜
Modifier🎜🎜Modifier(수정자)는 반각 마침표를 지정하는 특수 접미사입니다. 특별한 바인딩 방법으로 명령을 지정해야 함을 나타냅니다. 예를 들어, v-bind 缩写 … v-on 缩写 … 它们看起来可能与普通的 HTML 略有不同，但 v-bind 약어 🎜v- 약어 🎜🎜🎜rrreee🎜…🎜🎜일반 HTML과 약간 다르게 보일 수 있지만 .prevent 수정자는 v-on 지시문에 트리거된 이벤트에 대해 event.preventDefault()를 호출하도록 지시합니다. 🎜rrreee🎜 다음 v-on🎜 및 v-for🎜와 같은 기능을 탐색하면서 수정자의 다른 예를 볼 수 있습니다. 🎜🎜🎜🎜🎜약어
v- 접두사는 템플릿의 Vue 관련 기능을 식별하는 시각적 단서 역할을 합니다. Vue.js를 사용하여 기존 태그에 동적 동작을 추가하는 경우 v- 접두사가 도움이 되지만, 자주 사용되는 일부 지시문의 경우 사용이 번거롭다는 느낌을 받으실 것입니다. 동시에 모든 것을 관리하는 단일 페이지 애플리케이션(SPA - 단일 페이지 애플리케이션)를 사용하는 템플릿에서는 v- 접두사도 덜 중요해집니다. 따라서 Vue는 가장 일반적으로 사용되는 두 가지 명령인 v-bind 및 v-on에 대한 특정 약어를 제공합니다: v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：: 与 @: 및 @는 모두 속성 이름에 적합한 문자이므로 모두 올바르게 구문 분석할 수 있습니다. Vue를 지원하는 브라우저 또한 최종 렌더링된 마크업에는 표시되지 않습니다. 약어 구문은 완전히 선택 사항이지만 해당 역할을 더 잘 이해하게 되면 해당 구문이 있다는 사실에 기뻐하게 될 것입니다. 🎜🎜🎜🎜🎜 🎜
