VueJS - 模板

在前面的章節中，我們學習瞭如何在螢幕上以文字內容的形式獲得輸出。在本章中，我們將學習如何在螢幕上以HTML模板的形式獲得輸出。

為了理解這一點，讓我們考慮一個例子，並在瀏覽器中檢視輸出。

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div>{{htmlcontent}}</div>
      </div>
      <script type = "text/javascript" src = "js/vue_template.js"></script>
   </body>
</html>

vue_template.js

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

現在，假設我們想在頁面上顯示html內容。如果我們碰巧用插值法使用它，即用雙大括號，我們將在瀏覽器中得到以下結果。

如果我們看到html內容的顯示方式與我們在變數htmlcontent中給出的方式相同，這不是我們想要的，我們希望它在瀏覽器上以正確的HTML內容顯示。

為此，我們將不得不使用v-html指令。一旦我們將v-html指令分配給html元素，VueJS就知道它必須將其作為HTML內容輸出。讓我們在.html檔案中新增v-html指令，看看有什麼不同。

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
      </div>
      <script type = "text/javascript" src = "js/vue_template.js"></script>
   </body>
</html>

現在，我們不需要雙大括號來顯示HTML內容，而是使用了v-html = ”htmlcontent”，其中htmlcontent在js檔案中定義如下：

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

瀏覽器中的輸出如下：

如果我們檢查瀏覽器，我們將看到內容與在.js檔案中定義的變數htmlcontent : "<div><h1>Vue Js Template</h1></div>"相同。

讓我們看一下瀏覽器中的檢查元素。

我們已經看到了如何將HTML模板新增到DOM。現在，我們將看到如何向現有的HTML元素新增屬性。

假設我們在HTML檔案中有一個影像標籤，我們想分配src，它是Vue的一部分。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
         <img src = "" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

檢視上面的img標籤，src是空的。我們需要從vue js中新增src。讓我們看看如何操作。我們將img src儲存在.js檔案中的data物件中，如下所示：

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>",
      imgsrc : "images/img.jpg"
   }
})

如果我們按如下方式分配src，則瀏覽器中的輸出將如下圖所示。

<img src = "{{imgsrc}}" width = "300" height = "250" />

我們得到一張損壞的圖片。要向HMTL標籤分配任何屬性，我們需要使用v-bind指令。讓我們使用v-bind指令將src新增到影像。

這是它在.html檔案中分配的方式。

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
         <img v-bind:src = "imgsrc" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

我們需要在src前加上v-bind:src = ”imgsrc”和具有src的變數的名稱。

以下是瀏覽器中的輸出。

讓我們檢查並檢視使用v-bind的src是什麼樣的。

如上面的螢幕截圖所示，src在其上沒有分配任何vuejs屬性。

列印頁面