GuLi商城-前端基础Vue-组件化基础

﹏ヽ暗。殇╰゛Y 2024-03-24 18:30 173阅读 0赞

![bba1f225220f43b79695dff7885dc057.png][]

![1b4ce995bbec4d6394314ad125f7eb95.png][]![0b4b4bc1b3034a7a92871004e32c7a61.png][]

![d064ceff628441d8883cfc847649c1d0.png][]

![61af95b7734741e481b418bc8b0a76d2.png][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
    
        <div id="app">
            <button v-on:click="count++">我被点击了 {
       {count}} 次</button>
    
            <counter></counter>
            <counter></counter>
            <counter></counter>
            <counter></counter>
            <counter></counter>
    
            <button-counter></button-counter>
        </div>
        <script src="../node_modules/vue/dist/vue.js"></script>
    
    
        <script>
            //1、全局声明注册一个组件
            Vue.component("counter", {
                template: `<button v-on:click="count++">我被点击了 {
       {count}} 次</button>`,
                data() {
                    return {
                        count: 1
                    }
                }
            });
    
            //2、局部声明一个组件
            const buttonCounter = {
                template: `<button v-on:click="count++">我被点击了 {
       {count}} 次~~~</button>`,
                data() {
                    return {
                        count: 1
                    }
                }
            };
    
            new Vue({
                el: "#app",
                data: {
                    count: 1
                },
                components: {
                    'button-counter': buttonCounter
                }
            })
        </script>
    </body>
    
    </html>

![b86862835b814755bceecc38b0aefc25.png][]

[bba1f225220f43b79695dff7885dc057.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/28c1704673094eb48848f45fed2bd35f.png
[1b4ce995bbec4d6394314ad125f7eb95.png]: https://img-blog.csdnimg.cn/1b4ce995bbec4d6394314ad125f7eb95.png
[0b4b4bc1b3034a7a92871004e32c7a61.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/95c44864ef69497da092e72e3d9c9384.png
[d064ceff628441d8883cfc847649c1d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/35760b005964447895c4b7432689ccde.png
[61af95b7734741e481b418bc8b0a76d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/958e90af5588467db688ae88452fb124.png
[b86862835b814755bceecc38b0aefc25.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/910c7190ee5a499b9918760d52ab8812.png