开发学院

您的位置：首页>教程>正文

教程正文

VueJS 模板

VueJS 模板

  在前面的章节中我们已经学到了如何在屏幕上以文本内容的形式输出内容。 在本章中将学习如何在屏幕上以HTML模板的形式输出。

  要理解这一点，先看一个例子，首先创建一个文件：template.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.jpg

  如果看到html内容的显示方式与在htmlcontent中给出的方法相同，那么这不是我们想要的，我们希望它在浏览器中显示在正确的HTML内容中。

  为此，可以通过使用v-html指令。 当将v-html指令分配给html元素时，VueJS知道它必须以HTML内容的形式输出。现在通过template.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"，其中html内容在vue_template.js文件中定义如下 -

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

  再次使用浏览器打开template.html，输出效果如下所示：

htmlcontent.jpg

  如果查看浏览器，我们会看到内容的添加方式与在.js文件中定义的变量htmlcontent相同："<div><h1>Vue Js Template</h1></div>"。

  下面来看看浏览器中的inspect元素，如下图所示：

template.jpg

  我们已经看到如何将HTML模板添加到DOM。 现在来看看如何为现有的HTML元素添加属性。

考虑一下，在HTML文件中有一个图像标签，并为src属性分配一个值，它是Vue的一部分。


例子

  参考以下代码(template-example1.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 src = "" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

  上面的img标签，src属性的值是空的。所以我们需要从vuejs中添加src属性的值。 如何可以做到这一点？在template-example1.js文件中的数据对象中存储imgsrc，如下所示：

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.jpg

  但是这样做并不能显示图像。要将任何属性分配给HTML标签，需要使用v-bind指令。 用v-bind指令将src添加到img标签中。这是在template-example1.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的变量名称。以下是浏览器中的输出结果

inspect.jpg

捐赠

友情链接