<!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. 高并发 Nginx+Lua OpenResty系列（9）——HTTP服务

    此处我说的HTTP服务主要指如访问京东网站时我们看到的热门搜索.用户登录.实时价格.实时库存.服务支持.广告语等这种非Web页面,而是在Web页面中异步加载的相关数据.这些服务有个特点即访问量巨大.逻 ...

  2. 如何使用jQuery可以让滚轮滚到底部可以自动加载所需内容

    话不多说先上代码 $(window).scroll(function() {   var scrollTop = $(this).scrollTop(); //滚动高度  var windowHeig ...

  3. Django 强大的ORM之增删改查

    Django orm         Django——orm进阶 测试Django中的orm 表结构: models.py class User(models.Model): name = model ...

  4. SQL Server 2012完全备份、差异备份、事务日志备份和还原操作；

    SQL Server 2012完全备份.差异备份.事务日志备份和还原操作: 1.首先,建立一个测试数据库,TestA:添加一张表,录入二条数据:备份操作这里我就不详细截图和讲解了.相信大家都会备份,我 ...

  5. 浅入深出Vue：数据绑定

    上一篇我们使用了简单的数据渲染,那么如果说我们想要动态渲染标签的 class 可以这么操作么? 为什么绑定 简单的数据渲染,包括表达式.函数在内.其实都只是在标签中渲染,如果遇到以下情况怎么办呢: 需 ...

  6. mysql开启日志查询功能

    set global general_log_file='/tmp/general.lg';set global general_log=on; show global variables like ...

  7. Java学习笔记——Linux下安装配置tomcat

    朝辞白帝彩云间,千里江陵一日还. 两岸猿声啼不住,轻舟已过万重山. ——早发白帝城 首先需要安装配置JDK,这里简单回顾下.Linux下用root身份在/opt/文件夹下创建jvm文件夹,然后使用ta ...

  8. （2）Linux文件和目录操作命令

    简单就是高效 pwd cd -/~/.. tree–a/d/f/i/L mkdir–p/v/m touch ls –l/a//i/h/F cp –r/p/d/a mv rm –f/r/i rmdir ...

  9. Mac iTerm2使用lrzsz上传和下载文件

    Mac iTerm2使用lrzsz对服务器上传和下载文件 安装工具 首先需要安装iTerm2和homebrew,在终端中执行(打开终端,使用搜索(command + space),输入terminal ...

  10. 记一次SQL优化。

    程序是数据库的用户,为打造良好的用户体验,我们一直在努力. 此次介绍一个基于SQL的数据库优化.SQL的优劣对数据库的性能影响非常关键. 查询只涉及如下表结构中的三个字段.如下 开发原始SQL SEL ...