Vue组件化

分手后的思念是犯贱 2021-07-25 02:52 484阅读 0赞

# 一 点睛 #

通过定义组件就可以通过组件名组件标签进行组件模板复用。

# 二 代码 #

<!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>

# 三 效果 #

![20201022193024377.png][]

[20201022193024377.png]: /images/20210724/5c75a816d28d4a099ab30d115a8e3938.png

发表评论取消回复

表情：

评论列表（有 0 条评论，484人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 组件化开发

文章目录前言组件化开发底部菜单 TabMenu 父子组件相互传数据父传子：自定义属性子传父：自定义事件

待我称王封你为后i/ 2023年10月13日 09:50/ 0 赞/ 39 阅读

相关 Day66 Vue组件化开发

　1. json简介 JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAS

矫情吗；*/ 2023年08月17日 15:29/ 0 赞/ 112 阅读

相关 java开发组件化,Vue组件化开发思考

一般说到组件，我首先想到的是弹窗，其他就大脑空白了。因为觉得这个是在项目中最常用的功能，提取出来方便复用的才是组件～然而我才发现这个想法是有问题的。我发觉可能从意识

深藏阁楼爱情的钟/ 2022年11月12日 09:53/ 0 赞/ 244 阅读

相关 Vue组件化的基本使用

效果图： ![在这里插入图片描述][202102081923598.jpg_pic_center] 组件化的基本使用步骤： 1、创建组件构造器对象 2、注册组件

水深无声/ 2022年10月29日 05:23/ 0 赞/ 191 阅读

相关 Vue学习（二）Vue组件化编程

文章目录一、模块与组件相关概念说明二、Vue 中使用组件的三大步骤三、非单文件组件四、单文件组件 4.1 Vue 单文件组件的

迈不过友情╰/ 2022年10月22日 13:56/ 0 赞/ 281 阅读

相关 VUE.JS 组件化开发实践

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 前言公司目前制作一个H5活动，特别是有一定统

r囧r小猫/ 2022年03月26日 02:40/ 0 赞/ 330 阅读

相关 Vue组件化应用构建

组件化应用构建组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽

小鱼儿/ 2021年10月19日 23:54/ 0 赞/ 406 阅读

相关 vue 组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。 ![70][] 在 Vue 里，一个组件本质上是一个拥

叁歲伎倆/ 2021年09月15日 09:38/ 0 赞/ 381 阅读

相关 Vue.js 组件化开发

三、组件化开发 1.1 组件化的实现和使用步骤组件注册步骤解析 1.2 全局组件和局部组件 1.3 父组件和子组件 1.4 注册组件

悠悠/ 2021年09月07日 10:16/ 0 赞/ 394 阅读

相关 Vue组件化

一点睛通过定义组件就可以通过组件名组件标签进行组件模板复用。二代码 <!DOCTYPE html> <html lang="en">

分手后的思念是犯贱/ 2021年07月25日 02:52/ 0 赞/ 485 阅读