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
- interpolasi
-
- Bentuk pengikatan data yang paling biasa ialah menggunakan sintaks "Mustache" ( Interpolasi teks bagi pendakap berganda):
<span>Message: {{ msg }}</span>
Tag misai akan digantikan dengan nilai atributmsg
pada atribut yang sepadan objek data. Apabila sifatmsg
pada objek data terikat berubah, kandungan pada titik interpolasi dikemas kini. Dengan menggunakan arahan v-sekali , anda juga boleh melakukan interpolasi sekali apabila Apabila data berubah, kandungan pada interpolasi tidak akan dikemas kini. Tetapi sila ambil perhatian bahawa ini akan menjejaskan pengikatan data lain pada nod: <span v-once>这个将不会改变: {{ msg }}</span>
HTML asal
- Bentuk pengikatan data yang paling biasa ialah menggunakan sintaks "Mustache" ( Interpolasi teks bagi pendakap berganda):
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
的值是 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 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 kod> 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 kod> ><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-on
和 v-for
rrreeeDi 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) yang menguruskan semua templat dengan Vue a>, 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. 🎜🎜🎜🎜🎜 🎜
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 插值,绝不要对用户提供的内容使用插值。
true
),v-bind
工作起来略有不同,在这个例子中:isButtonDisabled
的值是 null
、undefined
或 false
,则 disabled
特性甚至不会被包含在渲染出来的 <button>
元素中。模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如 Math
和 Date
。你不应该在模板表达式中试图访问用户定义的全局变量。
v-
前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for
是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。回顾我们在介绍中看到的例子:v-if
指令将根据表达式 seen
的值的真假来插入/移除 <p>
jangan sekali-kali
gunakan interpolasi untuk kandungan yang disediakan pengguna.
v-bind
berfungsi sedikit berbeza, dalam contoh ini: 🎜<a v-on:click="doSomething">...</a>🎜Jika nilai
isButtonDisabled
ialah null
, undefined kod> 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 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()
:
在接下来对 v-on
和 v-for
rrreeeDi sini href
ialah parameter, memberitahu v-bind
Arahan mengikat atribut href
elemen kepada nilai ungkapan url
.
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
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
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) yang menguruskan semua templat dengan Vue a>, 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 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. 🎜🎜🎜🎜🎜 🎜