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内容显示在页面上，但我们使用插件表达式{{}}时，这显然不是预期显示结果，下面是显示结果：

上面的结果显示，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后的效果：

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

此时我们看到的是损坏的图片，可以知道使用插值表达式无效。记住，给任何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的属性名是相同的，下面是显示效果：