<!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. Kafka 学习之路（二）—— 基于ZooKeeper搭建Kafka高可用集群

    一.Zookeeper集群搭建 为保证集群高可用,Zookeeper集群的节点数最好是奇数,最少有三个节点,所以这里搭建一个三个节点的集群. 1.1 下载 & 解压 下载对应版本Zookeep ...

  2. 【JDK基础】java基础的一些资料

    工具:https://blog.csdn.net/javazejian/article/details/72828483 类加载器:https://blog.csdn.net/X5fnncxzq4/a ...

  3. Java多线程（三）：volatile

    volatile volatile是一种轻量同步机制.请看例子 MyThread25类 public class MyThread25 extends Thread{ private boolean ...

  4. 搭建CentOS 7本地源仓库

    CentOS 7离线包及其依赖 推荐使用yumdownloader --resolve --destdir=path python-pip,--resolve下载所有依赖,--destdir指定软件包 ...

  5. 24 | 紧跟时代步伐：微服务模式下API测试要怎么做？

  6. Python基础-使用range创建数字列表以及简单的统计计算和列表解析

    1.使用函数 range() numbers = list(range[1,6]) print (numbers) 结果: [1,2,3,4,5] 使用range函数,还可以指定步长,例如,打印1~1 ...

  7. spring源码深度解析— IOC 之 循环依赖处理

    什么是循环依赖 循环依赖其实就是循环引用,也就是两个或则两个以上的bean互相持有对方,最终形成闭环.比如A依赖于B,B依赖于C,C又依赖于A.如下图所示: 注意,这里不是函数的循环调用,是对象的相互 ...

  8. STL库的应用

    容器分为两类:序列式容器和关联式容器. 序列式容器,其中的元素不一定有序,但都可以被排序.如:vector.list.deque.stack.queue.heap.priority_queue.sli ...

  9. 关于过两级mux的时序约束的添加（一个非常经典的时序约束问题）

    非常开心自己的微信公众号: <数字集成电路设计及EDA教程> 关注者超过了1700 里面主要讲解数字IC前端.后端.DFT.低功耗设计以及验证等相关知识,并且讲解了其中用到的各种EDA工具 ...

  10. Java编程思想：XML

    /* 本次实验需要在www.xom.nu上下载XOM类库 */ import nu.xom.*; import java.io.BufferedOutputStream; import java.io ...