.vue的使用

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文件名的首字母一般大写

组件套组件，就变成了树结构