个性化阅读
专注于IT技术分析

VueJS模板template完全使用教程

接上一节: Vue实例和组件component使用和原理详解,从上一节的学习中,我们知道如何将一些内容以文本的形式在屏幕上输出,在本节中,我们将学习如何将内容以HTML模板的形式输出到屏幕上。

1、VueJS显示html模板内容,下面是使用到的html内容:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VueJS模板使用</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <h2>{{author}}</h2>
        <h3>{{htmlcontent}}</h3>
    </div>
    <script type="text/javascript" src="js/template.js"></script>
</body>
</html>

template.js内容如下:

var app = new Vue({
    el: "#app",
    data: {
        title: "如何使用VueJS的模板?",
        author: "Once",
        htmlcontent: "<div><h3>VueJS模板语法</h3></div>"
    }
});

现在我们的目的是将htmlcontent中的html内容显示在页面上,但我们使用插件表达式{{}}时,这显然不是预期显示结果,下面是显示结果:

VueJS显示HTML内容

上面的结果显示,htmlcontent中的内容不是格式化输出的,Vue直接显示它的值了,这不是我们想要的,我们需要将它在浏览器显示为适当的HTML内容。

对这个问题,我们可以使用v-html指令,在指定的元素使用v-html指令,VueJS就知道如何输出这些HTML内容了,下面是加了v-html指令的代码:

<div id="app">
        <h1>{{title}}</h1>
        <h2>{{author}}</h2>
        <div v-html="htmlcontent"></div>
    </div>

使用v-html指令不需要使用{{}}插值表达式,使用v-html=”htmlcontent”即可,htmlcontent在template.js中的Vue实例中有定义,下面是使用v-html后的效果:

VueJS使用v-html显示html内容

2、VueJS给HTML元素属性赋值。现在我们看到了如何将HTML模板添加到DOM,就是使用v-html指令进行指定,现在我们继续看如何添加属性到已知的HTML元素上。作为例子,这里是给一个图片标签img上添加src属性,实现这个功能也是Vue的一部分,例子如下:

<div id="app">
        <h1>{{title}}</h1>
        <h2>{{author}}</h2>
        <div v-html="htmlcontent"></div>
        <img src="" width="400">
    </div>

在上面的代码中,img的src是空的,我们需要从template.js中给它的src赋值,下面我们在data中声明一个属性imgsrc,并给它赋值,如下:

var app = new Vue({
    el: "#app",
    data: {
        title: "如何使用VueJS的模板?",
        author: "Once",
        htmlcontent: "<div><h3>VueJS模板语法</h3></div>",
        imgsrc: "img/reading.jpg"
    }
});

如果我们使用插值表达式{{}}将imgsrc赋值给img的src,如下,输出图片将不显示,如下面:

<img src="{{imgsrc}}" width="400">
使用插值表达式给img的src赋值

此时我们看到的是损坏的图片,可以知道使用插值表达式无效。记住,给任何html元素分配或赋值,我们需要使用v-bind指令,下面我们可以使用v-bind指令给img图片的src赋值,使用方式为:v-bind:{html元素属性名}=”vue实例data的属性名”,使用代码如下:

<div id="app">
        <h1>{{title}}</h1>
        <h2>{{author}}</h2>
        <div v-html="htmlcontent"></div>
        <img v-bind:src="imgsrc" width="400">
    </div>

因为这里是给img标签的src属性赋值,所以使用的是v-bind:src,其它的属性使用类似,要注意,这里指定的属性值名是和vue实例中的data的属性名是相同的,下面是显示效果:

VueJS使用v-bind给img的src赋值

右键检查页面,查看使用v-bind的src,如下:

查看使用v-bind的src

以上是VueJS模板template的完全使用详解,学习了v-html指令和v-bind指令的使用。

赞(0) 打赏
未经允许不得转载:srcmini » VueJS模板template完全使用教程
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏