directives

Vue.js 使用一種超集的 HTML 樣板語言。我們可以使用插值和指令。本文將解釋指令。 v-text v-once v-html v-bind 使用 v-model 雙向綁定 使用運算式 條件語句 循環 事件 顯示或隱藏 事件指令修飾符 自定義指令 在Vue.js 模板和插值中，我們看到了如何在 Vue 模板中嵌入數據。 本文將解釋 Vue.js 在模板中提供的另一種技術：指令。 指令基本上就像是添加在模板內的 HTML 屬性。它們都以 v- 開頭，表示它們是 Vue 的特殊屬性。 讓我們逐一看一下每個 Vue 指令的詳細用法。 v-text 可以使用 v-text 指令來替代插值，它執行相同的工作： <span v-text="name"></span> v-once 你知道 {{ name }} 是綁定到組件數據的 name 屬性的。當你的組件數據中的 name 發生變化時，Vue 會在瀏覽器中更新該值。 除非使用 v-once 指令，它基本上就像是一個 HTML 屬性： <span v-once>{{ name }}</span> v-html 當你使用插值來打印數據屬性時，HTML 會被轉義。這是 Vue 自動保護免受 XSS 攻擊的一種很好的方式。 然而，有時你想要輸出 HTML 並讓瀏覽器解釋它。你可以使用 v-html 指令：...

Vue.js使用的是一種HTML的超集的模板語言。任何HTML都是有效的Vue.js模板，除此之外，Vue.js還提供了兩個強大的功能：內插和指令。 Vue.js使用的是一種HTML的超集的模板語言。 任何HTML都是有效的Vue.js模板，除此之外，Vue.js還提供了兩個強大的功能：內插和指令。 以下是一個有效的Vue.js模板： <span>Hello!</span> 這個模板可以放在明確聲明的Vue組件內： new Vue({ template: '<span>Hello!</span>' }) 也可以放在單文件組件內： <template> <span>Hello!</span> </template> 第一個例子非常基礎。下一步是使其輸出組件狀態的一部分，例如名字。 使用內插就可以實現這一點。首先，我們在組件中添加一些數據： new Vue({ data: { name: 'Flavio' }, template: '<span>Hello!</span>' }) 然後，我們可以使用雙大括號語法將其添加到模板中： new Vue({ data: { name: 'Flavio' }, template: '<span>Hello {{name}}!</span>' }) 這裡有一個有趣的事情。看到了嗎？我們只使用了name而不是this.data.name？ 這是因為Vue.js執行了一些內部綁定，使得模板可以像使用本地屬性一樣使用該屬性。非常方便。 在單文件組件中，可以這樣寫： <template> <span>Hello {{name}}!</span> </template> <script> export default { data() { return { name: 'Flavio' } } } </script> 在導出時，我使用了一個普通函數。為什麼不使用箭頭函數？ 這是因為在data中，我們可能需要訪問組件實例的一個方法，如果this未綁定到組件，則無法實現，所以無法使用箭頭函數。 我們可以使用箭頭函數，但是在使用this時，我需要記住切換到普通函數。更保險，我認為這樣更好。 現在，回到內插。 {{ name }}使人想起Mustache/Handlebars模板內插，但這只是一個視覺提醒。 在這些模板引擎中，它們是“愚蠢”的，而在Vue中，你可以做很多事情，它更靈活。 你可以在插值中使用任何JavaScript表達式，但只能使用一個表達式： {{ name....