Vuejs教程-Vue.js模板
在之前的Vue.js实例章节中，我们学习了如何以文本内容的形式在屏幕上输出。在本章中，我们将学习如何以HTML模板的形式在屏幕上输出。Vue.js使用基于HTML的模板语法，使Vue.js开发者能够将渲染后的DOM声明性地绑定到底层Vue实例的数据上。所有的Vue.js模板都是有效的HTML，可以被符合规范的浏览器和HTML解析器解析。
如果你选择了简单的插值方法，即使用双花括号来显示HTML内容在Web浏览器上，那么它会显示错误的结果。
让我们来看一个简单的例子，以了解这个概念。
Index.html文件：
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Template</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Firstname: {{ firstname }}</h1>
<h1>Lastname: {{ lastname }}</h1>
<div>{{ htmlcontent }}</div>
</div>
<script src="index.js"></script>
</body>
</html>Index.js文件：
var vm = new Vue({
el: '#app',
data: {
firstname: "Albert",
lastname: "Pinto",
htmlcontent: "<div><h1>This is Vue.js Template Example</h1></div>"
}
});我们使用一个简单的CSS文件来美化输出。
Index.css文件：
html, body {
margin: 5px;
padding: 0;
}在程序执行后，你将看到以下输出：
输出：
Firstname : Albert
Lastname : Pinto
<div><h1>This is Vue.js Template Example</h1></div>
在上面的例子中，你可以看到HTML内容没有按照你期望的方式显示在浏览器上。HTML内容被显示为你在htmlcontent变量中指定的方式，而不是以正确的HTML内容显示在浏览器上。
为了解决这个问题，我们需要使用v-html指令。当我们给HTML元素赋予v-html指令时，Vue.js知道它必须将其作为HTML内容输出。
现在，将v-html指令添加到.html文件中，看看在下面的例子中的差异。
语法：
<div v-html="htmlcontent"></div>示例2：
Index.html文件：
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Template</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Firstname: {{ firstname }}</h1>
<h1>Lastname: {{ lastname }}</h1>
<div v-html="htmlcontent"></div>
</div>
<script src="index.js"></script>
</body>
</html>Index.js文件：
var vm = new Vue({
el: '#app',
data: {
firstname: "Albert",
lastname: "Pinto",
htmlcontent: "<div><h1>This is Vue.js Template Example</h1></div>"
}
});在程序执行后，你将看到以下输出：
输出：
Firstname : Albert
Lastname : Pinto
This is Vue.js Template Example
在上面的例子中，可以看到在使用v-html指令后，你可以成功地将HTML模板添加到DOM中。现在，让我们看看如何给现有的HTML元素添加属性。
添加属性到HTML元素
假设我们在HTML文件中有一个图像标签，并且我们希望为它分配Vue.js的一部分，比如src。请看下面的例子：
Index.html文件：
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Template</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Firstname: {{ firstname }}</h1>
<h1>Lastname: {{ lastname }}</h1>
<div v-html="htmlcontent"></div>
<img src="" width="300" height="250" />
</div>
<script src="index.js"></script>
</body>
</html>Index.js文件：
var vm = new Vue({
el: '#app',
data: {
firstname: "Albert",
lastname: "Pinto",
htmlcontent: "<div><h1>This is Vue.js Template Example</h1></div>",
imgsrc: "https://www.fiordalisa.ch/wp-content/uploads/2017/12/IMG_4610.jpg"
}
});在程序执行后，你将看到以下输出：
输出：
在上面的例子中，你会发现图像无法加载。所以，我们必须使用v-bind指令来将任何属性分配给HTML标签。
让我们使用v-bind指令为img标签添加src。请看下面的例子：
示例3：
Index.html：
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Template</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Firstname: {{ firstname }}</h1>
<h1>Lastname: {{ lastname }}</h1>
<div v-html="htmlcontent"></div>
<img v-bind:src="imgsrc" width="300" height="250" />
</div>
<script src="index.js"></script>
</body>
</html>Index.js：
var vm = new Vue({
el: '#app',
data: {
firstname: "Albert",
lastname: "Pinto",
htmlcontent: "<div><h1>This is Vue.js Template Example</h1></div>",
imgsrc: "https://www.fiordalisa.ch/wp-content/uploads/2017/12/IMG_4610.jpg"
}
});在程序执行后，你将看到以下输出：
输出：
你可以看到，在为img的src属性添加了v-bind指令后，图片已经完整加载。
