谷粒商城day27 -Vue-组件化

关注

原创最新推荐文章于 2026-09-11 16:14:22 发布 139 阅读 AI 写同款· GEO 优化 ›

产业园区如何高效对接企业技术需求与高校科研成果？.docx 科易网基于AI模型+行业大数据，在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，推出科技创新领域的AI+工具与数智化解决方案，推动科技创新与产业创新智能化发展。立即下载

全局组件与局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    
</head>
<body >
        <div id = "app">
            <h1>{{name}} 你好啊！</h1>
            <buttonadd></buttonadd>
        </br>
            <but_add></but_add>
           
        </div>
       
        

        <script>
            //全局组件
            Vue.component("but_add",{
                template:"<button @click = 'num++'  >{{num}}</button>",
                data(){
                    return {
                        num:1
                    }
                }
            });

            //局部组件
            const butaddzz = {
                template:"<button @click = 'num++'  >{{num}}</button>",
                data(){
                    return {
                        num:1
                    }
                }
            };
 
            new Vue({
                el:"#app",
                data:{
                    num:1
                },
                components:{
                    'buttonadd':butaddzz
                }
            });
        </script>
</body>
</html>

收录于