开发手册 欢迎您!
软件开发者资料库

VueJS - 模板

VueJS模板 - 学习简单轻松的步骤Vue​​JS从基础到高级的概念开始的例子包括概述,环境设置,简介,实例,模板,组件,计算机属性,观看属性,绑定,活动,渲染,过渡和动画,指令,路由,混合,渲染功能,反应接口,示例。

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

为了理解这一点,让我们考虑一个示例并在浏览器中查看输出.

         VueJs Instance                           

Firstname : {{firstname}}

         

Lastname : {{lastname}}

         
{{htmlcontent}}
      
         


vue_template.js

var vm = new Vue({   el: '#vue_det',   data: {      firstname : "Ria",      lastname  : "Singh",      htmlcontent : "

Vue Js Template

"   }})


现在,假设我们想要在页面上显示html内容.如果我们碰巧使用插值,即使用双花括号,这就是我们将在浏览器中获得的内容.

Content

如果我们看到html内容的显示方式与我们在变量htmlcontent中给出的方式相同,那么这不是我们想要的,我们希望它以适当的HTML显示浏览器上的内容.

为此,我们必须使用 v-html 指令.我们将v-html指令分配给html元素的那一刻,VueJS知道它必须将其作为HTML内容输出.让我们在 .html 文件中添加v-html指令并查看差异.

         VueJs Instance                           

Firstname : {{firstname}}

         

Lastname : {{lastname}}

         
               


现在,我们不需要使用双花括号来显示HTML内容,而是使用了v-html ="htmlcontent",其中定义了htmlcontent在 js 文件中如下 :

var vm = new Vue({   el: '#vue_det',   data: {      firstname : "Ria",      lastname  : "Singh",      htmlcontent : "

Vue Js Template

"   }})


浏览器中的输出如下 :

HTMLContent

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

让我们看一下浏览器中的inspect元素.

Template

我们已经看到了如何将HTML模板添加到DOM中.现在,我们将看到如何向现有HTML元素添加属性.

考虑一下,我们在HTML文件中有一个图像标记,我们想要分配src,这是Vue的一部分.

示例

         VueJs Instance                           

Firstname : {{firstname}}

         

Lastname : {{lastname}}

                                 


看看上面的img标签,src是空白的.我们需要从vue js添加src.我们来看看如何做到这一点.我们将img src存储在 .js 文件中的数据对象中,如下所示 :

var vm = new Vue({   el: '#vue_det',   data: {      firstname : "Ria",      lastname  : "Singh",      htmlcontent : "

Vue Js Template

",      imgsrc : "images/img.jpg"   }})


如果我们按如下方式分配src,浏览器中的输出将如下面的屏幕截图所示.

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

Imgsrc

我们破了图片.要将任何属性分配给HMTL标记,我们需要使用 v-bind 指令.让我们用v-bind指令将src添加到图像中.

这是在 .html 文件中分配的方式.

         VueJs Instance                           

Firstname : {{firstname}}

         

Lastname : {{lastname}}

                                 


我们需要在src前加上 v-bind:src ="imgsrc"和src变量的名称.

以下是浏览器中的输出.

Img Display

让我们检查并检查src与v-bind的相似之处.

Inspect

如上面的屏幕截图所示,src的分配没有任何vuejs属性.


ck: "Jzndc69N7BtnPgpT" }) >