引言
我们在前面的章节中已经了解了如何在屏幕上以文本内容的形式获得输出。在本文中我们将学习如何在屏幕上以HTML模板的形式获得输出。我们先看一段代码好来帮助我们理解。
//index.html
<!DOCTYPE html>
<html lang="en">
<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>vue模板和组件</title>
</head>
<body>
<div id="vue_det">
<h1>姓名 : {{ name }}</h1>
<div>{{ htmlcontent }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
//js/app.js+
var vm = new Vue({
el: '#vue_det',
data: {
name: "孙悟空",
htmlcontent: "<div><h1>Vue Js Template</h1></div>"
}
})
使用live-server启动项目得到如下结果
因为我们使用了插值，也就是双括号，我们在浏览器中就真实的显示了html内容，这显然和我们想要渲染html是不同的，我们希望它在浏览器能显示html渲染的内容。
v-html
为了解决上面的问题，我们不得不适用v-html指令，只要我们将v-html属性分配给html元素，vue就会知道将其作为html内容输出，我们尝试下：
<div id="vue_det">
<h1>姓名 : {{ name }}</h1>
<div v-html="htmlcontent"></div>
</div>
得到了如下结果
从浏览器调试可以看出
与app.js中填写的html字符串表现得相同
属性分配
我们已经了解了如何将HTML模板添加到DOM。现在，我们将实现如何向现有的HTML元素添加属性。想象一下，我们在HTML文件中有一个图像标记，我们想要分配src属性，举例，直接看代码
<div id="vue_det">
<h1>姓名 : {{ name }}</h1>
<div v-html="htmlcontent"></div>
<img src="" width="300" height="250" />
</div>
img标签的src是空的，我们将src放到js的数据对象中
var vm = new Vue({
el: '#vue_det',
data: {
name: "孙悟空",
htmlcontent: "<div><h1>Vue Js Template</h1></div>",
imgsrc: './img/img.jpg'
}
})
然后我们修改index.html
<img src="{{ imgsrc }}" width="300" height="250" />
结果如下
好像哪里不对，其实不是，在vue中，我们绑定属性用v-bind指令
<img v-bind:src="imgsrc" width="300" height="250" />
可以看到我们浏览器中渲染的html
组件
Vue组件是VueJS的重要功能之一，可以创建自定义元素，可以在HTML中重复使用。让我们使用一个示例并创建一个组件。
//index.html <!DOCTYPE html> <html lang="en"> <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>vue模板和组件</title> </head> <body> <div id="component_test"> <testcomponent></testcomponent> </div> <div id="component_test1"> <testcomponent></testcomponent> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script type="text/javascript" src="js/app.js"></script> </body> </html>
//js/app.js
Vue.component('testcomponent', {
template: '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});
我们创建了两个div，id分别是component_test和component_test1，在app.js中我们创建了两个Vue实例，外加一个Vue组件，要想创建组件，它的语法是
Vue.component('nameofthecomponent',{ // options});
创建组件后，组件的名称将成为自定义元素，并且可以在创建的Vue实例元素中使用相同的名称，在app.js文件中创建的组件中，我们添加了一个模板，我们已为其分配了HTML代码。这是一种注册全局组件的方法，可以将其作为任何vue实例的一部分，我们发现这时候浏览器变成了
组件被赋予自定义元素标记，即<testcomponent> </ testcomponent>。但是，当我们在浏览器中检查相同内容时，我们发现结果没有自定义的元素，如以下屏幕截图所示。
我们也可以将组件作为vue实例的一部分
var vm = new Vue({
el: '#component_test',
components:{
'testcomponent': {
template : '<div><h1>This is coming from component</h1></div>'
}
}
});
这是本地注册组件，组件只是vue实例的一部分。到目前为止我们已经基本组件的实现。现在我们来继续扩展。
// js/app.js
Vue.component('testcomponent', {
template: '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
data: function () {
return {
name: "tom"
}
},
methods: {
changename: function () {
this.name = "bob";
},
originalname: function () {
this.name = "tom";
}
}
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});
在上面的app.js文件中，我们添加了一个函数，它返回一个对象。该对象具有name属性，该属性被赋值为'tom'。尽管这里data是函数，我们也可以像直接在Vue实例中使用其属性，此外这里还添加了两个函数，在changename中，我们更改name属性，在originalname中我们将其重置为原始名称，有关事件我们后面在讨论，这段代码的结果是：
因为分配了mouseover和mouseout事件，当鼠标悬停在tom上时，会将tom改成bob
动态组件
使用关键字<component> </ component>创建动态组件，并使用属性绑定，如下
<component v-bind:is = "view"></component>
//index.html <!DOCTYPE html> <html lang="en"> <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>vue模板和组件</title> </head> <body> <div id="databinding"> <component v-bind:is="view"></component> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script type="text/javascript" src="js/app.js"></script> </body> </html>
//app.js
var vm = new Vue({
el: "#databinding",
data: {
view: "component1"
},
components: {
component1: {
template:
'<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});
浏览器已显示值：