Vue中的template配置項

BLBALDMAN發表於2024-07-05
Vue

1、簡單介紹：

在 Vue.js 中，template 配置項是一個非常有用的特性，允許你直接在 Vue 例項或元件的定義中嵌入 HTML 模板字串。這可以讓你更方便地定義元件的結構，而不需要外部的 HTML 檔案或者 <template> 標籤對。

2、template的一些注意事項：

  • template中只能有一個根標籤
<!DOCTYPE html>
<html lang="en">
<head>
<!--  option物件中的data-->
  <meta charset="UTF-8">
  <title>Vue中的template模板</title>
  <script src="./jsdocument/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
  new Vue({
    data:{
      message:"Hello Vue!"
    },
    template:'<h1>{{message}}</h1><h1>{{message}}</h1>'
  }).$mount("#app")
</script>
</body>
</html>

可以看到報錯：

正確的結果應該是：
template:'<div><h1>{{message}}</h1><h1>{{message}}</h1></div>'

  • template 編譯後進行渲染時會將掛載位置的元素替換。
  • template 後面的程式碼如果需要換行的話， 建議將程式碼寫到``符號當中， 不建議使用 + 進行字串的拼接
<!DOCTYPE html>
<html lang="en">
<head>
<!--  option物件中的data-->
  <meta charset="UTF-8">
  <title>Vue中的template模板</title>
  <script src="./jsdocument/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
  new Vue({
    data:{
      message:"Hello Vue!"
    },
    template: `
            <div>
              <h1>{{message}}</h1>
              <h1>{{message}}</h1>
            </div>
            `
  }).$mount("#app")
</script>
</body>
</html>
  • template可以省，同時程式碼直接寫到html中
<!DOCTYPE html>
<html lang="en">
<head>
  <!--  option物件中的data-->
  <meta charset="UTF-8">
  <title>Vue中的template模板</title>
  <script src="./jsdocument/vue.js"></script>
</head>
<body>

<div id="app">
  <h1>{{message}}</h1>
  <h1>{{message}}</h1>
</div>

<script>
  new Vue({
    data:{
      message:"Hello Vue!"
    }
  }).$mount("#app")
</script>

</body>
</html>

注意：
這種方式不會產生像 template 那種的元素替換。雖然是直接寫到 HTML 程式碼當中的， 但以上程式中的

<div id="app">
  <h1>{{message}}</h1>
  <h1>{{message}}</h1>
</div>

已經不是 HTML 程式碼了， 它是具有 Vue 語法特色的模板語句。 這段內容在 data 發生改變後都是要重新編譯的。

  • vue在掛載時，可以不用$mount("#app")，可以直接使用，el選項。el 是 element 單詞的縮寫， 翻譯為“元素”，el 配置項主要是用來指定 Vue 例項關聯的容器。也就是說 Vue 所管理的容器是哪個。
<!DOCTYPE html>
<html lang="en">
<head>
  <!--  option物件中的data-->
  <meta charset="UTF-8">
  <title>Vue中的template模板</title>
  <script src="./jsdocument/vue.js"></script>
</head>
<body>

<div id="app">
  <h1>{{message}}</h1>
  <h1>{{message}}</h1>
</div>

<script>
  new Vue({
    data:{
      message:"Hello Vue!"
    },
    el:'#app'
  })
</script>

</body>
</html>

相關文章