Sintaks templat


Dalam pelaksanaan asas, Vue menyusun templat ke dalam fungsi pemaparan DOM maya. Digabungkan dengan sistem responsif, Vue boleh mengira dengan bijak bilangan komponen yang perlu diberikan semula dan meminimumkan bilangan operasi DOM.

Jika anda biasa dengan DOM maya dan lebih suka kuasa mentah JavaScript, anda juga boleh melangkau templat dan tulis fungsi pemaparan secara terus, menggunakan sintaks JSX pilihan. 🎙


Ciri


Gunakan ungkapan JavaScript

Kurungan berganda akan mentafsir data sebagai teks biasa, bukannya HTML kod. Untuk mengeluarkan HTML sebenar, anda perlu menggunakan arahan v-html:

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Kandungan span ini akan digantikan dengan nilai atribut rawHtml, secara langsung sebagai HTML - pengikatan data dalam nilai atribut yang dihuraikan akan diabaikan. Ambil perhatian bahawa anda tidak boleh menggunakan v-html untuk mengarang templat separa kerana Vue bukan enjin templat berasaskan rentetan. Sebaliknya, untuk antara muka pengguna (UI), komponen lebih sesuai sebagai unit asas yang boleh digunakan semula dan boleh digubah. 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 的值是 nullundefinedfalse,则 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 sewenang-wenang yang diberikan secara dinamik pada tapak anda boleh menjadi sangat berbahaya kerana ia boleh membawa kepada XSS dengan mudah menyerang. Sila gunakan interpolasi HTML sahaja untuk kandungan yang dipercayai dan

jangan sekali-kali
gunakan interpolasi untuk kandungan yang disediakan pengguna.

Ciri-ciri

🎜🎜🎜Sintaks misai tidak boleh digunakan pada ciri HTML. vuejs.org/v2/api/#v-bind" target="_blank">arahan v-bind: 🎜
<a v-bind:href="url">...</a>
🎜Untuk sifat boolean (kehadirannya bermakna nilainya benar) , v-bind berfungsi sedikit berbeza, dalam contoh ini: 🎜
<a v-on:click="doSomething">...</a>
🎜Jika nilai isButtonDisabled ialah null, undefined atau false, atribut disabled tidak akan disertakan dalam elemen <button> yang diberikan. 🎜🎜🎜🎜

🎜🎜Menggunakan ungkapan JavaScript🎜🎜🎜🎜Setakat ini, dalam templat kami, kami hanya mengikat nilai kunci harta mudah. Tetapi sebenarnya, untuk semua pengikatan data, Vue.js menyediakan sokongan ekspresi JavaScript penuh. 🎜

<a v-bind:[attributeName]="url"> ... </a>
🎜Ungkapan ini akan dihuraikan sebagai JavaScript dalam skop data contoh Vue yang dimilikinya. Terdapat had bahawa setiap pengikatan hanya boleh mengandungi 🎜 satu ungkapan 🎜, jadi contoh 🎜 berikut tidak akan 🎜 berkuat kuasa. 🎜
<a v-on:[eventName]="doSomething"> ... </a>
🎜Ekspresi templat diletakkan dalam kotak pasir dan hanya boleh mengakses senarai putih pembolehubah global, seperti Math dan Date . Anda tidak seharusnya cuba mengakses pembolehubah global yang ditentukan pengguna dalam ungkapan templat. 🎜
🎜🎜🎜

🎜Arahan🎜🎜


🎜Arahan (Arahan) disertakan dengan < Istimewa sifat awalan kod>v-
. Nilai atribut arahan dijangka menjadi 🎜ungkapan JavaScript tunggal🎜 (v-for adalah pengecualian, tetapi kami akan membincangkannya kemudian). Tanggungjawab arahan adalah untuk menggunakan kesan yang berkaitan secara reaktif pada DOM apabila nilai ungkapan berubah. Melihat kembali contoh yang kita lihat dalam pengenalan: 🎜
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
🎜Di sini, arahan v-if akan memasukkan/mengalih keluar dilihat ><p> elemen. 🎜🎜🎜🎜🎜🎜🎜parameter🎜🎜🎜

Sesetengah arahan boleh menerima "parameter", diwakili oleh titik bertindih selepas nama arahan. Sebagai contoh, arahan v-bind boleh digunakan untuk mengemas kini ciri HTML secara responsif: 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()

rrreee

在接下来对 v-onv-forrrreeeDi sini href ialah parameter, memberitahu v-bind Arahan mengikat atribut href elemen kepada nilai ungkapan url.

Contoh lain ialah arahan v-on, yang digunakan untuk mendengar acara DOM:

rrreee
Parameter di sini ialah nama acara yang akan didengari. Kami juga akan membincangkan pengendalian acara dengan lebih terperinci.

🎜🎜🎜

Parameter dinamik🎜

🎜2.6.0 Baharu 🎜
🎜Bermula dari 2.6.0, ungkapan JavaScript yang disertakan dalam kurungan segi empat sama boleh digunakan sebagai parameter bagi arahan: 🎜rrreee🎜 attributeName di sini akan dianggap secara dinamik sebagai ungkapan JavaScript Evaluate, dan nilai yang diperoleh akan digunakan sebagai parameter akhir. Contohnya, jika tika Vue anda mempunyai atribut data attributeName dengan nilai "href", maka pengikatan ini akan bersamaan dengan < code> v-bind:href. 🎜🎜Begitu juga, anda boleh menggunakan parameter dinamik untuk mengikat fungsi pengendali kepada nama acara dinamik: 🎜rrreee🎜Begitu juga, apabila nilai eventName ialah "focus" , < code>v-on:[eventName] akan bersamaan dengan v-on:focus. 🎜🎜Kekangan pada nilai parameter dinamik🎜🎜Parameter dinamik dijangka dinilai kepada rentetan dan nilainya null dalam kes luar biasa. Nilai null khas ini boleh digunakan untuk mengalih keluar ikatan secara eksplisit. Sebarang nilai bukan rentetan lain akan mencetuskan amaran. 🎜🎜Kekangan pada ungkapan parameter dinamik🎜
🎜Ungkapan parameter dinamik mempunyai beberapa kekangan sintaks, kerana aksara tertentu, seperti ruang dan tanda petikan, tidak sah dalam nama atribut HTML. Begitu juga, anda perlu mengelak daripada menggunakan huruf besar nama kunci apabila menggunakan templat dalam DOM. . 🎜🎜Selain itu, jika anda menggunakan templat dalam DOM (tulis templat terus dalam fail HTML), anda perlu ambil perhatian bahawa penyemak imbas akan memaksa semua nama atribut kepada huruf kecil: 🎜rrreee🎜🎜🎜

< span style="font-size: 18px;">Pengubahsuai🎜🎜Pengubah suai (pengubah suai) ​​ ialah akhiran khas yang ditentukan dengan noktah separuh lebar Ia digunakan untuk menunjukkan bahawa arahan harus ditentukan dengan cara khas untuk mengikat. Sebagai contoh, pengubah suai .prevent memberitahu arahan v-on untuk memanggil event.preventDefault() untuk peristiwa yang dicetuskan: 🎜rrreee🎜 Seterusnya untuk v-on🎜 dan v-for🎜. 🎜🎜🎜🎜🎜

Singkatan


Awalan v- berfungsi sebagai isyarat visual untuk mengenal pasti ciri khusus Vue dalam templat. Apabila anda menggunakan Vue.js untuk menambah gelagat dinamik pada teg sedia ada, awalan v- amat membantu Walau bagaimanapun, untuk beberapa arahan yang kerap digunakan, anda akan merasakan bahawa menggunakan Cumbersome. Pada masa yang sama, apabila membina Aplikasi halaman tunggal (SPA - aplikasi halaman tunggal), awalan v- juga menjadi kurang penting. Oleh itu, Vue menyediakan singkatan khusus untuk dua arahan yang paling biasa digunakan: v-bind dan v-on: v- 前缀作为一种视觉提示,用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时,v- 前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时,v- 前缀也变得没那么重要了。因此,Vue 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:


v-bind 缩写

rrreee


v-on 缩写

rrreee

它们看起来可能与普通的 HTML 略有不同,但 :@


v-bind singkatan

🎜🎜rrreee🎜…🎜🎜🎜🎜

🎜v- on abbreviations 🎜🎜🎜rrreee🎜…🎜🎜Ia mungkin kelihatan berbeza sedikit daripada HTML biasa, tetapi : dan @ ialah kedua-dua aksara yang sah untuk nama harta, Ia boleh dihuraikan dengan betul dalam semua pelayar yang menyokong Vue. Selain itu, mereka tidak akan muncul dalam penanda akhir yang diberikan. Sintaks singkatan adalah pilihan sepenuhnya, tetapi apabila anda memahami peranan mereka dengan lebih baik, anda akan gembira anda memilikinya. 🎜🎜🎜🎜🎜 🎜