Vuejs单文件写法--es6写法

第一次使用Vuejs，选择了vue-cli 来构建项目。写起来略微蛋疼，官方文档都是es5的写法，要用es6做项目还需要不断的找资料来完善才行。

入口文件==> main.js源码

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

App.vue源码

//app.vue --- template部分
<template>
    <div>
        <!-- 这里如果是这样<AppHeader></AppHeader> 或者 <AppHeader /> 这样写就会报错 -->
        <app-header></app-header>  <!-- 插入组件 -->
                <app-side-menu></app-side-menu>
    </div>
</template>

//app.vue--- script部分
import AppHeader from './components/Header.vue'      //导入其它组件
import AppSideMenu from './components/SideMenu.vue'   //导入其它组件
export default {
    components: {  //配置多个是这样写的，貌似官方文档里面写的是伪代码
        'app-header': AppHeader,  
        'app-side-menu': AppSideMenu
    },
    name: 'app'
}

Header.vue源码

// Header.vue ---template部分
<template>
  <div v-on:mouseenter="show" v-on:mouseleave="hide" :class="{ active }">
</template>
// Header.vue ---script部分
<script>
  export default {
    name: 'app-header',
    data () {
      return {
        active: false
      }
    },
    methods: {
      show: function () {
        this.active = true
      },
      hide: function () {
        this.active = false
      }
    },
    created: () => {
      console.log(this)
    },
    watch: {
      active: function (val, oldVal) {
        console.log(val, oldVal)
      }
    }
  }
</script>