VueJS模板template完全使用教程

接上一节： Vue实例和组件component使用和原理详解，从上一节的学习中，我们知道如何将一些内容以文本的形式在屏幕上输出，在本节中，我们将学习如何将内容以HTML模板的形式输出到屏幕上。
【VueJS模板template完全使用教程】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="http://img.readke.com/220411/0Z32CS5-0.jpg">< /script> < /head> < body> < div id="app"> < h1>{{title}}< /h1> < h2>{{author}}< /h2> < h3>{{htmlcontent}}< /h3> < /div> < script type="text/javascript" src="http://www.srcmini.com/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="http://www.srcmini.com/{{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="http://www.srcmini.com/imgsrc" width="400"> < /div>

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