第一次使用Vuejs痊班，選擇了vue-cli 來構(gòu)建項目勤婚。寫起來略微蛋疼，官方文檔都是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' //導(dǎo)入其它組件
import AppSideMenu from './components/SideMenu.vue' //導(dǎo)入其它組件
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>
