el 和 template 的区别：
页面中的：
<div id="app"></div>
会被main.js以下取代:
import Vue from 'vue'
new Vue({
el: '#app',
template: `
<div>
<h2>{{message}}</h2>
<button @click='btnClick'>按钮</button>
<h2>{{name}}</h2>
</div>
`,
data: {
message: 'Hello Webpack',
name: 'why'
},
methods: {
btnClick(){
}
}
})
如果实例中太多template也不好，可以换成组件以下写法：
const App = {
template: `
<div>
<h2>{{message}}</h2>
<button @click='btnClick'>按钮</button>
<h2>{{name}}</h2>
</div>
`,
data: {
message: 'Hello Webpack',
name: 'why'
},
methods: {
btnClick(){
}
}
}
new Vue({
el: '#app',
template: '<App/>',
components: {
App
}
})
创建vue文件夹app.js文件,把内容拿进去
export default {
template: `
<div>
<h2>{{message}}</h2>
<button @click='btnClick'>按钮</button>
<h2>{{name}}</h2>
</div>
`,
data: {
message: 'Hello Webpack',
name: 'why'
},
methods: {
btnClick(){
}
}
}
main.js 去掉const APP... 加上：
import App from './vue/app'
vue文件夹下面创建App.vue文件，可以把app.js的东西放进来：
<template>
<div>
<h2>{{message}}</h2>
<button @click='btnClick'>按钮</button>
<h2>{{name}}</h2>
</div>
</template>
<script>
export default {
name: 'App',
data: {
message: 'Hello Webpack',
name: 'coderwhy'
},
methods: {
btnClick(){
}
}
}
</script>
<style scoped>
/* 相应样式 */
</style>
main.js 去掉import App from './vue/app',换成import App from './vue/App.vue'
.vue文件名的首字母一般大写
组件套组件，就变成了树结构
