/

Vue.js模板和內插

Vue.js模板和內插

Vue.js使用的是一種HTML的超集的模板語言。任何HTML都是有效的Vue.js模板，除此之外，Vue.js還提供了兩個強大的功能：內插和指令。

Vue.js使用的是一種HTML的超集的模板語言。

任何HTML都是有效的Vue.js模板，除此之外，Vue.js還提供了兩個強大的功能：內插和指令。

以下是一個有效的Vue.js模板：

1
<span>Hello!</span>

這個模板可以放在明確聲明的Vue組件內：

1
2
3
new Vue({
  template: '<span>Hello!</span>'
})

也可以放在單文件組件內：

1
2
3
<template>
  <span>Hello!</span>
</template>

第一個例子非常基礎。下一步是使其輸出組件狀態的一部分，例如名字。

使用內插就可以實現這一點。首先，我們在組件中添加一些數據：

1
2
3
4
5
6
new Vue({
  data: {
    name: 'Flavio'
  },
  template: '<span>Hello!</span>'
})

然後，我們可以使用雙大括號語法將其添加到模板中：

1
2
3
4
5
6
new Vue({
  data: {
    name: 'Flavio'
  },
  template: '<span>Hello {{name}}!</span>'
})

這裡有一個有趣的事情。看到了嗎？我們只使用了name而不是this.data.name？

這是因為Vue.js執行了一些內部綁定，使得模板可以像使用本地屬性一樣使用該屬性。非常方便。

在單文件組件中，可以這樣寫：

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <span>Hello {{name}}!</span>
</template>

<script>
export default {
  data() {
    return {
      name: 'Flavio'
    }
  }
}
</script>

在導出時，我使用了一個普通函數。為什麼不使用箭頭函數？

這是因為在data中，我們可能需要訪問組件實例的一個方法，如果this未綁定到組件，則無法實現，所以無法使用箭頭函數。

我們可以使用箭頭函數，但是在使用this時，我需要記住切換到普通函數。更保險，我認為這樣更好。

現在，回到內插。

{{ name }}使人想起Mustache/Handlebars模板內插，但這只是一個視覺提醒。

在這些模板引擎中，它們是“愚蠢”的，而在Vue中，你可以做很多事情，它更靈活。

你可以在插值中使用任何JavaScript表達式，但只能使用一個表達式：

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

Vue提供了對一些全局對象的訪問，包括Math和Date，所以你可以使用它們：

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

最好避免在模板中添加復雜的邏輯，但是Vue允許這樣做，這給予我們更多的靈活性，尤其是在嘗試事物的時候。

我們可以首先嘗試在模板中放置一個表達式，然後稍後將其移到一個計算屬性或方法中。

任何內插中包含的值都會在其依賴的任何數據屬性更改時更新。

您可以使用v-once指令避免此響應式更新。

結果總是被轉義，因此無法在輸出中包含HTML。

如果需要有HTML片段，則需要使用v-html指令。

tags: [“Vue.js”, “template”, “interpolation”, “directives”]