组件分为

  • 全局组件

  • 局部组件

    全局组件

  • // 语法---Vue.component('组件名', {组件参数})
    Vue.component('com1', {
    template: '<button @click="count++">你点了我{{count}}次</button>',
    data() {
    return {
    count: 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>我是测试vue</title>
    <!-- 01-引入vue -->
    <script src="./node_modules/vue/dist/vue.js"></script>
    </head> <body>
    <!-- 02创建一个div,ID为app -->
    <div id="app"> <!-- 02-使用组件 --><com></com>
    </div>
    <script>//01-创建全局组件
    Vue.component('com', {
    template: '<button @click="add">你点击了我{{count}}次</button>',
    data() {
    return {
    count: 0
    }
    },
    methods: {
    add() {
    this.count++
    }
    }
    })
    const vm = new Vue({
    el: '#app',//对应的操作区,必填
    data: {
    msg: ''
    },//数据
    methods: {}//方法
    });
    </script>
    </body> </html>

    说明:

    • 组件没有el参数, 原因是组件不会和具体的页面元素绑定

    • 组件必须有template参数, 原因是组件需要渲染页面, template就是需要渲染的html

    • 组件也是一个Vue的实例, 所以在组件中也有data/methods等

    • data必须是一个函数, 并返回一个对象

    局部组件

    1. 组件的html部分是在template标签中渲染

    2. 组件的js部分就是组件参数(对象)

    示例:

    <!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>
    <script src="./node_modules/vue/dist/vue.js"></script>
    </head> <body>
    <div id="app">
    <!-- 04-使用组件 -->
    <son></son>
    <abc></abc>
    </div> <!-- 02-局部组件的样式在这里实现 -->
    <template id="jubu">
    <div>
    <button @click="count++">你点击了{{count}}次</button>
    </div>
    </template> <script>
    //01-定义局部组件
    const jubu = {
    template: '#jubu',
    data() {
    return {
    count: 0
    }
    },
    } const vm = new Vue({
    el: '#app',
    data: {},
    methods: { },
    //03- 挂载局部组件
    components: {
    // 定义组件---组件名:组件参数对象
    son: jubu,
    abc: jubu
    }
    });
    </script>
    </body> </html>

Vue基础学习 --- 全局组件与局部组件的更多相关文章

  1. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  2. Vue 组件&组件之间的通信 之全局组件与局部组件

    在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...

  3. vue -全局组件和局部组件

    1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...

  4. Vue – 基础学习(2):组件间 通信及参数传递

    Vue – 基础学习(2):组件间 通信及参数传递

  5. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  6. 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  7. vue中的全局组件和局部组件的应用

    1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...

  8. TZ_16_Vue定义全局组件和局部组件

    1.定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <co ...

  9. VUE3 之 全局组件与局部组件

    1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法  <body> < ...

随机推荐

  1. JavaScript HTML DOM元素节点常用操作接口

    在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

  2. FreeRTOS互斥信号量

    API函数 #if( configSUPPORT_DYNAMIC_ALLOCATION == 1 ) #define xSemaphoreCreateMutex() xQueueCreateMutex ...

  3. C语言内存管理(内存池)

    C语言可以使用alloc从栈上动态分配内存. 内存碎片 Malloc/free或者new/delete大量使用会造成内存碎片,这种碎片形成的机理如下: 内存碎片一般是由于空闲的内存空间比要连续申请的空 ...

  4. linux一些配置

    ifconfig 查询.设置网卡和ip参数 ifup ens33 启动网卡 ifdown 关闭网卡 systemctl restart/start/stop network 重启.开始.关闭 网络服务 ...

  5. destoon二次开发-用户名、邮箱、手机账号中间字符串以*隐藏 扩展

    因为dt里面有用户名.邮箱.手机账号等,所以想办法进行隐藏保护用户隐私,所以个人就试着写了这个代码. 在api/extend.func.php文件下增加以下代码: //用户名.邮箱.手机账号中间字符串 ...

  6. nodejs保存图片至本地

    const request = require("request"); const fs = require("fs"); for(let i = 1; i & ...

  7. 图解TCP/IP笔记

  8. K-means: optimization objective(最小化cost function来求相应的参数)

    类似于linear regression,K-means算法也optimization objective或者是试图使cost function求最小值. 了解K-means算法的optimizati ...

  9. win 10 VMware与Hyper-v共存

    管理员身份运行命令提示符 cmd bcdedit /copy {current} /d "Windows10 no Hyper-V bcdedit /set {XXXXXXXX-XXXX-X ...

  10. DBUtils框架ResultSetHandler接口学习

    今儿在学习spring框架的时候,让我想起来之前做项目时一直搁置的一个问题,就是DBUtils框架的做数据库操作的使用,当时制作项目的时候就是通过实例打了一遍,由于时间原因也并没有仔细去了解这一方面. ...