<!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. uint16，uint32是什么？

    记得之前在刷笔试题的时候就看见过这个问题,发现当时上网百度后又忘了. 最近在看CryEngine3引擎代码的时候又晕了,趁现在赶紧记下来~ 在查看CE3的代码时我发现了这个变量,TFlowNodeId ...

  2. 微信小程序ES6方法Promise封装接口

    为何要封装接口? 有小程序开发的经验者,相信对微信API Request很熟悉了.对接接口时,有大部分的开发者都是直接调用request方法,去请求后台接口并渲染数据.诚然,直接使用api发起请求对接 ...

  3. PATA 1011 World Cup Betting (20)

    1011. World Cup Betting (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Wit ...

  4. Oracle insert all用法简介

    insert all是oracle中用于批量写数据的 现在直接通过例子学习一下,比较简单直观,例子来自<收获,不止SQL优化>一书 环境准备 create table t as selec ...

  5. linux命令---grep命令使用

    grep 常用参数: -w 精准匹配 -r 递归匹配 -l 列出匹配内容的文件名称-v 排除 结合sed,批量替换文件内容 sed 's#10.151.30.165#10.0.3.162#g' -i ...

  6. （一）C#编程基础复习——开启编程之旅

    回想当年学习编程,刚开始学习是非常艰苦的,可能是因为文科生原因,刚开始接触工科类的知识不是很擅长,上去大学第一年基本没有好好学习编程,入门C#编程基础一窍不通,也许那时年少无知,第二学期开始奋发图强, ...

  7. linux 多主机间快速跳转脚本

    #!/usr/bin/env python #coding=utf8 ''' 用于多机器间相互跳转,如有新机器加入,需要更新ip_list文件 ''' from prettytable import ...

  8. 每天学点node系列-zlib

    永不放弃,永不放弃又有两个原则,第一个原则是永不放弃,第二个原则就是:当你想放弃时回头看第一个原则. 概览 做过web性能优化的同学,对性能优化大杀器gzip应该不陌生.浏览器向服务器发起资源请求,比 ...

  9. TPL DataFlow .Net 数据流组件，了解一下

    回顾上文 作为单体程序,依赖的第三方服务虽不多,但是2C的程序还是有不少内容可讲: 作为一个常规互联网系统,无外乎就是接受请求.处理请求,输出响应. 由于业务渐渐增长,数据处理的过程会越来越复杂和冗长 ...

  10. JSON.stringify() 的深入理解

    目录 序言 语法 深入理解 序言 最近在看<你所不知道的javascript>[中卷]一书,第一部分是类型和语法.本文是基于这部分的产物.在强制类型转换->抽象值操作-> to ...