第一次使用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>
