学习如何在屏幕上以HTML模板的形式获取输出。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
要理解这一点，让我们先看看一个例子，并在浏览器中看到输出。创建一个文件：template.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
<html>
<head>
<meta charset="utf-8" />
<title>VueJs模板</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h2>名字 : {{name}}</h2>
<h2>城市 : {{city}}</h2>
<div>{{htmlcontent}}</div>
</div>
<script type = "text/javascript" src = "js/vue_template.js"></script>
</body>
</html>
再创建另一个文件：vue_template.js -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
var vm = new Vue({
el: '#vue_det',
data: {
name : "Maxsu",
city : "海口",
htmlcontent : "<div><h1>Vue Js Template</h1></div>"
}
})
现在，假设要在页面上显示html内容。 如果使用了插值，也就是使用双括号，在浏览器中得到的结果如下所示 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
如果看到html内容的显示方式与在htmlcontent中给出的方法相同，那么这不是我们想要的，我们希望它在浏览器中显示在正确的HTML内容中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
为此，可以通过使用v-html指令。 当将v-html指令分配给html元素时，VueJS知道它必须以HTML内容的形式输出。现在通过template.html文件中添加v-html指令并查看之上面显示的结果有什么不同。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
<html>
<head>
<meta charset="utf-8" />
<title>VueJs模板</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h2>名字 : {{name}}</h2>
<h2>城市 : {{city}}</h2>
<div v-html = "htmlcontent"></div>
</div>
<script type = "text/javascript" src = "js/vue_template.js"></script>
</body>
</html>
现在，不需要使用双括号来显示HTML内容，而是使用了v-html ="html content"，其中html内容在vue_template.js文件中定义如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
var vm = new Vue({
el: '#vue_det',
data: {
name : "Maxsu",
city : "海口",
htmlcontent : "<div><h1>Vue Js Template</h1></div>"
}
})
再次使用浏览器打开template.html，输出效果如下所示 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
如果查看浏览器，我们会看到内容的添加方式与在.js文件中定义的变量htmlcontent相同："<div><h1>Vue Js Template</h1></div>"。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
下面来看看浏览器中的inspect元素，如下图所示 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
我们已经看到如何将HTML模板添加到DOM。 现在来看看如何为现有的HTML元素添加属性。
考虑一下，在HTML文件中有一个图像标签，并为src属性分配一个值，它是Vue的一部分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
示例一
参考以下代码(template-example1.html) -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
<html>
<head>
<meta charset="utf-8" />
<title>VueJs模板</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h2>名字 : {{name}}</h2>
<h2>城市 : {{city}}</h2>
<div v-html = "htmlcontent"></div>
<img src = "" width = "300" height = "250" />
</div>
<script type = "text/javascript" src = "js/template-image.js"></script>
</body>
</html>
看看上面的img标签，src属性的值是空的。所以我们需要从vuejs中添加src属性的值。 如何可以做到这一点？在template-example1.js文件中的数据对象中存储imgsrc，如下所示 —文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
var vm = new Vue({
el: '#vue_det',
data: {
name : "Maxsu",
city : "海口",
htmlcontent : "<div><h2>Vue Js Template</h2></div>",
imgsrc : "images/mydog.jpg"
}
})
如果按如下所示分配src属性的值，浏览器中的输出将如下图所示 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
<img src = "{{imgsrc}}" width = "300" height = "250" />
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
但是这样做并不能显示图像。要将任何属性分配给HTML标签，需要使用v-bind指令。 用v-bind指令将src添加到img标签中。这是在template-example1.html文件中分配的。参考以下代码 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html
<html>
<head>
<meta charset="utf-8" />
<title>VueJs模板</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h2>名字 : {{name}}</h2>
<h2>城市 : {{city}}</h2>
<div v-html = "htmlcontent"></div>
<img v-bind:src = "imgsrc" width = "300" height = "250" />
</div>
<script type = "text/javascript" src = "js/template-image.js"></script>
</body>
</html>
需要在src属性前添加v-bind:src = "imgsrc"和src的变量名称。以下是浏览器中的输出结果 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5948.html