引言
在前一章中，我们已经学习了如何在屏幕上以文本内容的形式获得输出。在本文中，我们将学习如何在屏幕上以HTML模板的形式获得输出。让我们看一段代码来帮助我们理解。
//index.html
！DOCTYPE html
html lang=’en ‘
头
meta charset=’UTF-8′ /
元名称=’视口’内容=’宽度=设备宽度，初始比例=1.0′ /
元http-equiv=’X-UA-Compatible ‘内容=’ie=edge’ /
Titlevue模板和组件/标题
/head
身体
div id=’vue_det ‘
H1名称3360 {{name}}/h1
div{{ htmlcontent }}/div
/div
脚本src=’ https://cdn . jsdelivr . net/NPM/vue ‘/脚本
脚本类型=’ text/JavaScript ‘ src=’ js/app . js ‘/脚本
/body
/html
//js/app.js
var VM=new Vue({ 0
el: ‘#vue_det ‘，
数据： {
名称： ‘细蜡烛’，
html content : ‘ DivH1Vue Js Template/h1/div ‘
}
})
使用live-server启动项目，并获得以下结果。
因为我们使用插值，也就是双括号，所以我们实际上是在浏览器中显示html内容，这与我们想要呈现的html明显不同。我们希望它能在浏览器中显示html的渲染内容。
00-1010为了解决上述问题，我们不得不应用v-html指令。只要我们将v-html属性分配给html元素，vue就会知道将其作为html内容输出。让我们试试：
div id=’vue_det ‘
H1名称3360 {{name}}/h1
div v-html=’htmlcontent’/div
/div
得到以下结果。
从浏览器调试中可以看出
它的行为与app.js中填充的html字符串相同
v-html
我们已经学习了如何将HTML模板添加到DOM中。现在，我们将了解如何向现有的HTML元素添加属性。假设我们在HTML文件中有一个图像标签，我们想要分配src属性，例如，直接看代码。
div id=’vue_det ‘
H1名称3360 {{name}}/h1
div v-html=’htmlcontent’/div
img src=’宽度=’300 ‘高度=’250’ /
/div
img标签的src是空的，所以我们把src放入js的数据对象中。
var VM=new Vue({ 0
el: ‘#vue_det ‘，
数据： {
名称： ‘细蜡烛’，
html content : ‘ DivH1Vue Js Template/h1/div ‘，
imgsrc :’。/img/img.jpg ‘
}
})
然后我们修改index.html。
img src='{{ imgsrc }} ‘宽度=
“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赛车倍投方案们发现结果没有自定义的元素，如以下屏幕截图所示。
我们也可以将组件作为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>’
}
}
});
浏览器已显示值：
