極客書

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內容。如果我們碰巧將它與插值一起使用，即與雙花括號一起使用，這就是我們在瀏覽器中得到的結果。

Content

如果我們看到html內容的顯示方式與變量html content中給出的相同，這不是我們想要的，我們希望它在瀏覽器上以適當的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=「HTML content」，其中htmlcontent在js文件中定義如下−

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

瀏覽器中的輸出如下所示−

HTMLContent

如果我們檢查瀏覽器，我們將看到內容以與.js文件中定義的相同方式添加到變量htmlcontent:「<div><h1>Vue js Template<h1><div>」。

讓我們看看瀏覽器中的inspect元素。

Template

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

考慮一下，我們在HTML文件中有一個圖像標記，我們希望分配src，它是Vue的一部分。

Example

<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文件中的數據對象中，如下所示−

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" />
Imgsrc

我們得到了一個破碎的圖像。要將任何屬性分配給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的變量名。

以下是瀏覽器中的輸出。

Img Display

讓我們檢查一下v-bind的src是什麼樣子的。

Inspect

如上面的螢幕截圖所示，src是在沒有任何vuejs屬性的情況下分配給它的。