官方文档：https://cn.vuejs.org/v2/guide/components.html
全局组件创建及全局组件data的使用：
1.基本示例(script中写主体）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.bgcolor{
background: #F4F456;
padding: 20px;
width: 100%;
height: 100px;
text-align: center;
line-height: 100px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div class="bgcolor" id="app">
<!-- 当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建 -->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
</body>
<script type="text/javascript">
// 定义一个名为 button-counter 的新组件
// 组件如果采用驼峰命名，上文使用时要转成“短横线+小写”
// 组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等
Vue.component("buttonCounter",{
data:function(){
return{
count:0
}
},
template:'<button v-on:click="count++"> You clicked me {{count}} times. </button>'
})
var vm = new Vue({
el: '#app',
// 数据
data:{}
});
</script>
</html>
效果：
2.基本示例(body中写主体）
<body>
<!-- 注意template 书写位置 -->
<template id="multiplication">
<div>
<input type="text" v-model="multiplierA" />
<input type="text" v-model="multiplierB">
<button @click="result = multiplierA*multiplierB">The anwser is {{ result }}</button>
</div>
</template>
<div class="bgcolor" id="app">
<div>
<do-multiplication></do-multiplication>
</div>
</div>
</body>
<script type="text/javascript">
Vue.component("doMultiplication",{
data:function(){
return{
multiplierA: 0,
multiplierB: 0,
result: 0
}
},
template: "#multiplication"
})
var vm = new Vue({
el: '#app',
// 数据
data:{}
});
</script>
效果：
4.注意
1.data 必须是一个函数
当我们定义这个 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：
data: {
count: 0
}
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
data: function () {
return {
count: 0
}
}
正是因为 Vue 有这条规则，所以上述示例才不会点击一个按钮就影响到其它所有实例。
2.组件是可复用的 <Vue 实例>
它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
