<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <title></title>

        <style type="text/css">

        </style>

    </head>

    <body>

        <div id="app">

            <custom-button></custom-button>

            <my-button></my-button>

        </div>

        <script>

            //全局定义组件

            Vue.component('my-button',{

                template:'<button>this is my button</button>'

            });

            //局部组件 ,需要在vue对象中进行注册

            const customButton={

                template:'<button>this is a custom component</button>'

            };

            var app = new Vue({

                el: '#app',

                data: {

                    isVisible:true,

                },

                components:{

                    customButton

                }

            });

        </script>

    </body>

</html>

【前端全套视频教程】https://m.tb.cn/h.eR5xKOJ  点击链接，再选择浏览器咑閞；或椱ァ製这段描述￥EgZvYRaMUoS￥后到><

vue教程二 vue组件(1)的更多相关文章

  1. vue教程二 vue组件(3)

    给属性传递数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  2. vue教程二 vue组件(2)

    每个组件都可以有自己的data.methods.computed和您之前看到的所有内容—就像Vue实例本身一样. 您可能已经注意到了组件和Vue实例之间的一个细微差别:Vue实例上的数据属性是一个对象 ...

  3. vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  4. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  5. vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用

    vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...

  6. vue教程2-02 vue防止花括号{{}}闪烁，v-text和v-html、v-cloak

    vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html.v-cloak 一.v-text和v-html <span>{{msg}}</span>  --& ...

  7. vue教程3-02 vue动画

    vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...

  8. vue教程2-04 vue实例简单方法

    vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...

  9. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

随机推荐

  1. sentinel 滑动窗口统计机制

    sentinel的滑动窗口统计机制就是根据当前时间,获取对应的时间窗口,并更新该时间窗口中的各项统计指标(pass/block/rt等),这些指标被用来进行后续判断,比如限流.降级等:随着时间的推移, ...

  2. 小白也能看懂的 Laravel 核心概念讲解

    自动依赖注入 什么是依赖注入,用大白话将通过类型提示的方式向函数传递参数. 实例 1 首先,定义一个类: /routes/web.php class Bar {} 假如我们在其他地方要使用到 Bar  ...

  3. RDS数据库磁盘满导致实例锁定

    问题描述: 阿里云RDS空间不足,进行报警.收到报警后.对数据库中不重要的数据备份后执行delete删除操作.执行成功后发现数据删掉了.但是数据库的空间并没有释放.数据占用空间反而越来越大,最后RDS ...

  4. Codeforces 781A：Andryusha and Colored Balloons（DFS染色）

    http://codeforces.com/contest/782/problem/C 题意:给一棵树染最少的颜色,使得相邻距离为2的点都是不同的颜色,问最少是多少种颜色并输出每个点的颜色. 思路:比 ...

  5. AD域和LDAP协议

    随着我们的习大大上台后,国家在网络信息安全方面就有了很明显的改变!所以现在好多做网络信息安全产品的公司和需要网络信息安全的公司都会提到用AD域服务器来验证,这里就简单的研究了一下! 先简单的讲讲AD域 ...

  6. 【风哥干货】快速解决Oracle数据库故障必备的20个脚本与命令

    1.操作系统性能(通常故障出现时最先检查的内容)top.topas.vmstat.iostat.free.nmon 2.万能重启方法 如应急情况,需要重启数据库:tail -100f <对应路径 ...

  7. ServiceFabric极简文档-5.0 Service Fabric有状态与无状态

    Service Fabric 应用程序方案 2017/08/14 作者 Edward Chen Jack Zeng Azure Service Fabric提供了一个可靠而灵活的平台,可用于编写和运行 ...

  8. 在rman恢复中incarnation的概念

    摘要 本文主要介绍incarnation的由来,在rman恢复中的作用,以及相关rman恢复的注意事项. 概念说明 从10g开始,incarnation被引入,用于跨越resetlogs进行恢复,由此 ...

  9. SpringCloud-Alibaba-Sentinel(1)初探

    Sentinel 是什么? Sentinel 具有以下特征: 丰富的应用场景:Sentinel 承接了阿里巴巴近 10 年的双十一大促流量的核心场景,例如秒杀(即突发流量控制在系统容量可以承受的范围) ...

  10. 个人永久性免费-Excel催化剂功能第86波-人工智能之图像OCR文本识别全覆盖

    在上一年中,Excel催化剂已经送上一波人工智能系列功能,鉴于部分高端用户的需求,再次给予实现了复杂的图像OCR识别,包含几乎所有日常场景,让公司个人手头的图像非结构化数据瞬间变为可进行结构化处理分析 ...