Vue.js 模板
在上一章Vue.js实例章节中，我们学习了如何在屏幕上获取文本内容形式的输出。在本章中，我们将学习如何在屏幕上以HTML模板的形式获取输出。 Vue.js使用基于HTML的模板语法，该语法有助于Vue.js开发人员以声明方式将渲染的DOM绑定到基础Vue实例的数据。所有
Vue.js 模板都是有效的HTML，可以由符合规范的浏览器和
HTML 解析器。
如果您选择简单的插值方法，即使用双大括号在Web浏览器上显示HTML内容，将会显示错误的结果。
让我们举一个简单的示例，并查看输出以很好地理解此概念。
Index.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>"
}
})
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 指令。当我们将v-html指令分配给html元素时，Vue.js知道它必须将其输出为HTML内容。
现在，将
v-html 指令添加到.html文件，然后在下面的示例中查看区别。
语法:
<div v-html = "htmlcontent"></div>
示例2:
Index.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文件中有一个图像标签，我们要分配
src ，它是Vue.js的一部分。请参见以下示例:
Index.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指令将任何属性分配给HMTL标签。
让我们使用v-bind指令将
src 添加到图像中。请参见以下示例:
示例3:
Index.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"
}
})
程序执行后，您将看到以下输出:
输出:
您看到将v-bind指令添加到img src后，图像已完全加载。
