使用全局定义
vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。
component---组件（就是对象）
代码详情
<body>
<div id="app">
<!-- 相当于标签 -->
<mnav></mnav>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
//1.使用全局定义 component---组件（就是对象）
Vue.component("mnav", {
//template 配置？
template: "<ul><li>首页</li><li>{{msg}}</li></ul>",
// 在组件中data必须是一个函数？
data() {
return {
msg: "helloworld"
}
}
})
const app = new Vue({
el: "#app",
data: {
}
})
</script>
</body>为什么data是个函数？？
通过函数生成了不同的对象, 属性的改变不会再互相影响
vue中data必须是函数是为了保证组件的独立性和可复用性，data是一个函数，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，你实例化几次，就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。
