<!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. 在java项目启动时就执行某操作

    在java启动时大概有四种,此处只介绍3种 1.在启动的方法上使用通过@PostConstruct方法实现初始化bean进行操作 2.通过bean实现InitializingBean接口 @Overr ...

  2. linux配置多个tomcat

    1.修改tomcat目录下面conf/server.xml,修改shutdown的port和http port 2.修改bin/catalina.sh 在最前面加上 export CATALINA_B ...

  3. yii DAO操作总结

    数据库代码: /* Navicat MySQL Data Transfer Source Server         : lonxom Source Server Version : 50524 S ...

  4. Fish and Oh My Fish in Ubuntu

    After install Fish shell, then install Oh My Fish . Oh My Fish(shortly OMF) can make our Fish shell ...

  5. redis整合springboot的helloworld

    引入依赖 compile 'org.springframework.boot:spring-boot-starter-data-redis' 使用redis有两种方法 1.Jedis Jedis je ...

  6. [转]sublime text3在指定浏览器上本地服务器(localhost)运行文件(php)

    昨天在使用sublime text3时,发现能在本地服务器上运行php文件,于是百度了一下有关知识, 终于成功了,今天总结一下. 首先要让sublime text3 出现侧边栏sidebar,不会的可 ...

  7. Java 代码界 3% 的王者？看我是如何解错这 5 道题的

    前些日子,阿里妹(妹子出题也这么难)发表了一篇文章<悬赏征集!5 道题征集代码界前 3% 的超级王者>——看到这个标题,我内心非常非常激动,因为终于可以证明自己技术很牛逼了. 但遗憾的是, ...

  8. springboot+redis实现session共享

    1.场景描述 因项目访问压力有点大,需要做负载均衡,但是登录使用的是公司统一提供的单点登录系统,需要做session共享,否则假如在A机器登录成功,在B机器上操作就会存在用户未登录情况. 2. 解决方 ...

  9. git分支创建与切换

    1. 场景描述 新版本迭代上线完成,为了保持当前版本稳定性及可回退等需求,需要切换新的分支用于下一版本的迭代开发. 2. 解决方案 2.1 切换前工作. 因发布上线当天有可能存在临时更改文件而未上传g ...

  10. Redis HyperLogLog用法简介

    (1)HyperLogLog简介 在Redis 在 2.8.9 版本才添加了 HyperLogLog,HyperLogLog算法是用于基数统计的算法,每个 HyperLogLog 键只需要花费 12 ...