srcmini接上一节： 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的属性名是相同的，下面是显示效果：
右键检查页面，查看使用v-bind的src，如下：
以上是VueJS模板template的完全使用详解，学习了v-html指令和v-bind指令的使用。
评论前必须登录！
注册