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内容。

1604671879301

如果我们看到html内容的显示方式这不是我们想要的,我们希望将其以适当的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>"
   }
})

浏览器中的输出如下

1604671894862

如果检查浏览器,我们将看到内容以与.js文件中定义的方式相同的方式添加到变量htmlcontent:"<div> <h1> Vue Js Template </ h1> </ div>"

让我们看看浏览器中的inspect元素。

1604727435282

我们已经看到了如何将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 文件的数据对象中,如下所示-

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

1604671970414

我们得到了损坏的图像。要将任何属性分配给HTML标签,我们需要使用 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-binb:src =” imgsrc” ,并在变量名称前加上src。

以下是浏览器中的输出。

1604671981219

让我们检查并检查v-bind的src元素。
1604671986522

如上面的屏幕快照所示,src的分配没有任何vuejs属性。

取消
感谢您的支持,我会继续努力的!
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by bytekits.com,汇天下文字,成非凡梦想!!!