Vue.js 模板



Vue.js 模板

在上一章Vue.js实例章节中,我们学习了如何在屏幕上获取文本内容形式的输出。在本章中,我们将学习如何在屏幕上以HTML模板的形式获取输出。 Vue.js使用基于HTML的模板语法,该语法有助于Vue.js开发人员以声明方式将渲染的DOM绑定到基础Vue实例的数据。所有
Vue.js 模板都是有效的HTML,可以由符合规范的浏览器和
HTML 解析器。
如果您选择简单的插值方法,即使用双大括号在Web浏览器上显示HTML内容,将会显示错误的结果。
让我们举一个简单的示例,并查看输出以很好地理解此概念。
Index.html文件:
 <html>
   <head>
      <title>Vue.js Template</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id = "app">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div>{{htmlcontent}}</div>
      </div>
      <script src="index.js"></script>
   </body>
</html>

Index.js文件:
 var vm = new Vue({
   el: '#app',
   data: {
      firstname : "Albert",
      lastname : "Pinto",
      htmlcontent : "<div><h1>This is Vue.js Template Example</h1></div>"
   }
})

让我们使用简单的
CSS 文件使输出更具吸引力。
Index.css文件:
 html, body {
    margin: 5px;
    padding: 0;
}

程序执行后,您将看到以下输出:
输出:
 Firstname : Albert
Lastname : Pinto
<div><h1>This is Vue.js Template Example</h1></div>

Vue.js 模板_https://bianchenghao6.com_【vue教程】_第1张

在上面的示例中,您可以看到html内容不是要显示在浏览器上。 html内容的显示方式与变量htmlcontent中指定的方式相同。这不是您想要的。我们希望在浏览器上以适当的HTML内容显示它。
要解决此问题,我们将必须使用
v-html 指令。当我们将v-html指令分配给html元素时,Vue.js知道它必须将其输出为HTML内容。
现在,将
v-html 指令添加到.html文件,然后在下面的示例中查看区别。
语法:
 <div v-html = "htmlcontent"></div> 

示例2:

Index.html文件:
 <html>
   <head>
      <title>Vue.js Template</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id = "app">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
      </div>
      <script src="index.js"></script>
   </body>
</html>

Index.js文件:
 var vm = new Vue({
   el: '#app',
   data: {
      firstname : "Albert",
      lastname : "Pinto",
      htmlcontent : "<div><h1>This is Vue.js Template Example</h1></div>"
   }
})

程序执行后,您将看到以下输出:
输出:
 Firstname : Albert
Lastname : Pinto
This is Vue.js Template Example

Vue.js 模板_https://bianchenghao6.com_【vue教程】_第2张

在上面的示例中,使用v- html指令,您可以成功将HTML模板添加到DOM。现在,让我们看一下如何向现有的HTML元素添加属性。

向HTML元素添加属性

假设我们在HTML文件中有一个图像标签,我们要分配
src ,它是Vue.js的一部分。请参见以下示例:
Index.html文件:
 <html>
   <head>
      <title>Vue.js Template</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id = "app">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
          <img src = "" width = "300" height = "250" />
      </div>
      <script src="index.js"></script>
   </body>
</html>

Index.js文件:
 var vm = new Vue({
   el: '#app',
   data: {
      firstname : "Albert",
      lastname : "Pinto",
      htmlcontent : "<div><h1>This is Vue.js Template Example</h1></div>",
      imgsrc : "https://www.fiordalisa.ch/wp-content/uploads/2017/12/IMG_4610.jpg"
   }
})

程序执行后,您将看到以下输出:
输出:

Vue.js 模板_https://bianchenghao6.com_【vue教程】_第3张

在上面的示例中,您可以看到图像已损坏。因此,我们必须使用
v-bind指令将任何属性分配给HMTL标签。
让我们使用v-bind指令将
src 添加到图像中。请参见以下示例:

示例3:

Index.html:
 <html>
   <head>
      <title>Vue.js Template</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id = "app">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
          <img v-bind:src = "imgsrc" width = "300" height = "250" />
      </div>
      <script src="index.js"></script>
   </body>
</html>

Index.js:
 var vm = new Vue({
   el: '#app',
   data: {
      firstname : "Albert",
      lastname : "Pinto",
      htmlcontent : "<div><h1>This is Vue.js Template Example</h1></div>",
      imgsrc : "https://www.fiordalisa.ch/wp-content/uploads/2017/12/IMG_4610.jpg"
   }
})

程序执行后,您将看到以下输出:
输出:

Vue.js 模板_https://bianchenghao6.com_【vue教程】_第4张

您看到将v-bind指令添加到img src后,图像已完全加载。