Vue组件的理解

template模板和dom同时写，template模板会覆盖当前这个dom节点，要有根节点包裹

组件化的优点：

1.代码可以复用，2.降低代码的耦合性。

div的id为app是我们要挂载到Vue实例的一个dom节点；

src文件会整个打包成一个js文件；

模板-->编译-->ast-->数据-->render函数-->虚拟dom-->真实html

直接写render函数会减少编译过程，提高效率，但是写起来比较麻烦

1.全局组件：

1.写一个server.vue

2.在main.js中定义成全局组件

import Server from "./server.vue"
//app-server组件名,Server配置项
Vue.component("app-server",Server)

3.在App.vue中引用

<app-server></app-server>

2.局部组件：

1.写一个status.vue

2.在server.vue中：先引入、接着注册、最后使用

<template>
<app-status></app-status>
</template>
<script>
//引入
import Status from "./status.vue"
export default{
  //注册
  components:{
    "app-status":Status
  }

}

</script>

3.我们不能把所有的组件文件都直接放在src文件夹下，所以我们要根据自己需要新建不同的文件夹来区分这些组件文件，方便我们以后查找文件。

4.我们写样式是全局样式，如果希望每个组件之间不会互相影响，我们可以在style标签上加上scoped属性，会使得style标签

里面写的样式都变成属性选择器