Vue.js模板和插值

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 }}讓人想起Moustache / Handlebars模板插值,但這只是視覺上的提醒。

儘管在那些模板引擎中它們是“啞巴”,但在Vue中,您可以做更多的事情,它更加靈活。

您可以使用任何JavaScript表達式在插值中,但僅限於一個表達式:

{{ name.reverse() }}
{{ name === 'Flavio' ? 'Flavio' : 'stranger' }}

Vue提供對模板中某些全局對象的訪問,包括Math和Date,因此您可以使用它們:

{{ Math.sqrt(16) * Math.random() }}

最好避免在模板中添加複雜的邏輯,但事實是Vue可以為我們提供更大的靈活性,尤其是在嘗試時。

我們可以先嘗試將表達式放入模板中,然後再將其移動到計算的屬性或方法中。

任何插值中包含的值都將在其依賴的任何數據屬性發生更改時進行更新。

您可以使用v-once指示。

結果總是被轉義,因此輸出中不會包含HTML。

如果您需要HTML代碼段,則需要使用v-html指令代替。

免費下載我的Vue手冊


更多vue教程: