单文件组件：dom高亮插件、在父组件中引入子组件、App.vue代码代码写法

输入<template>等dom为什么会有高亮显示？

• 下载Vetur插件： 

• 模板会自动帮你导出，但是js文件不会，需要你手动导出，
• 启动的服务器，只会热更新，如果想要刷新整个页面就自己手动刷新；
• 热更新：只会局部更新组件，页面不会重新刷新，所以页面中老的错误还在，不想显示了，就手动刷新

---

单文件组件的代码写法：在App.vue中写：

<template>
  <div>
    hello world--{{myname}}
  </div>
</template>

<script>
// export default是ES6的导出规范
// 可以写成ES6的代码，因为安装了babel，会自动帮你把ES6转换为ES5的，就少了很多兼容性问题了
export default {
  data () {
    return {
      myname: 'yiyi'
    }
  }
}
</script>
<style>
  div{
    background: skyblue;
  }
</style>

• dom、js和css都包含进来了，而且分的很清楚； 

---

如何在父组件中引入子组件？

• 有两种方式：一个是引入全局的子组件，另一个是引入局部的子组件；

（1）引入全局的子组件：

• 定义一个孩子组件：
• 跟App.vue同一个目录下，新建一个文件夹，里面放孩子组件文件；

（建议：文件夹用小写，组件用大写开头，好看方便；）

• 子组件：

• 在App.vue父组件中使用和导入子组件：

import navbarItem from './mycomponents/NavbarItem.vue'//引入子组件
import Vue from 'vue'//引入vue
Vue.component('navbar-item', navbarItem)//注册子组件

• import导入的navbarItem实际上是对象，因为在子组件里从template开始定义，并没有注册子组件，所以需要在App.vue父组件中注册子组件； 
• 这个子组件对象名可以随便起，以及这个子组件名：“navbar-item”，但是必须满足驼峰命名法或者加“-”的写法；

完整代码：

<template>
  <div>
    hello world--{{myname}}
    <navbar-item></navbar-item>
  </div>
</template>

<script>
import navbarItem from './mycomponents/NavbarItem.vue'
import Vue from 'vue'
Vue.component('navbar-item', navbarItem)

// export default是ES6的导出规范
// 可以写成ES6的代码，因为安装了babel，会自动帮你把ES6转换为ES5的，就少了很多兼容性问题了
export default {
  data () {
    return {

      myname: 'yiyi'
    }
  }
}
</script>
<style>
  div{
    background: skyblue;
  }
</style>

结果：

（2）引入局部的子组件：

• 子组件跟上面的一样；

import navbarItem from './mycomponents/NavbarItem.vue'

export default {
  data () {
    return {
      myname: 'yiyi'
    }
  },
  components: {
    navbarItem: navbarItem// 当key和value名称一样时，可以省略value
    // navbarItem
  }
}

• 注意：如果局部定义子组件名称的时候，如上图代码中是“navbarItem”，如果子组件名写成了“-”的形式出错了，就用驼峰写法； 

完整代码：

<template>
  <div>
    hello world--{{myname}}
    <navbar-item></navbar-item>
  </div>
</template>

<script>
import navbarItem from './mycomponents/NavbarItem.vue'
// import Vue from 'vue'
// Vue.component('navbar-item', navbarItem)

// export default是ES6的导出规范
// 可以写成ES6的代码，因为安装了babel，会自动帮你把ES6转换为ES5的，就少了很多兼容性问题了
export default {
  data () {
    return {
      myname: 'yiyi'
    }
  },
  components: {
    navbarItem: navbarItem// 当key和value名称一样时，可以省略value
    // navbarItem
  }
}
</script>
<style>
  div{
    background: skyblue;
  }
</style>

结果：