简单理解其实组件就是制作自定义的标签，这些标签在HTML中是没有的。

组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../vue2.2.js"></script>

    </head>

    <body>

        <div id="app">

            <my-component></my-component>

            <!--<my-component></my-component>-->

            <!--可重用性-->

            <!--<my-component2></my-component2>-->

            <!--此处不渲染-->

        </div>

        <!--<my-component></my-component>-->

        <!--此处不渲染-->

        <p>----------------分割线--------------------</p>

        <div id="app2">

            <my-component></my-component>

            <my-component2></my-component2>

            <my-component3></my-component3>

        </div>

        <my-component3></my-component3>

        <script>

            var myComponent = Vue.extend({

                template: "<div>这是我的第一个component</div>"

            })

            //全局组件

            Vue.component('my-component', myComponent)

            new Vue({

                el: "#app"

            })

            var hello = {

                template: "<div>这是我的第三个component</div>"

            }

            new Vue({

                el: '#app2',

                //局部组件

                components: {

                    "my-component2": {

                        template: "<div>这是我的第二个component</div>"

                    },

                    "my-component3": hello

                }

            })

        </script>

    </body>

</html>

全局注册：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../vue2.2.js"></script>

    </head>

    <body>

        <div id="app">

            <my-component></my-component>

        </div>

        <template id="myComponent">

            <div>这是一个component

                <p>123</p>

                <a>456</a>

            </div>

        </template>

        <script>

            //全局注册

            /*Vue.component("my-component",{

                template:"#myComponent"

            })*/

            var vm = new Vue({

                el: "#app",

                components: {

                    "my-component": {

                        template: "#myComponent"

                    }

                }

            })

        </script>

    </body>

</html>

局部注册：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../vue2.2.js"></script>

    </head>

    <body>

        <div id="app">

            <parent-component></parent-component>

        </div>

        <script>

        var Child = {

            template:"<p>This is a child Component</p>"

        }

        //var Parent = Vue.extend()

        Vue.component("parent-component",{

            //局部注册child组件，child组件只能在parent组件内使用。

            template:"<div><p>This is a parent Component</p><child-component></child-component></div>",

            components:{

                'child-component':Child

            }

        })

        new Vue({

            el:"#app"

        })

        </script>

    </body>

</html>

vue2.0 组件化的更多相关文章

  1. vue2.0 组件化及组件传值

    组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...

  2. vue2.0组件库

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  3. 通信vue2.0组件

    vue2.0组件通信各种情况总结与实例分析   Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...

  4. vue2.0组件传值

    props down   emit up 嘿嘿    如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...

  5. Vue2.0+组件库总结

    转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...

  6. 转：Vue2.0+组件库总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  7. Vue2.0组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

  8. Vue2.0组件之间通信（转载）

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  9. Vue2.0组件实现动态搜索引擎（一）

    原文链接:https://blog.csdn.net/qwezxc24680/article/details/74550556 从github上看到一个不错的开源项目:https://github.c ...

随机推荐

  1. form标签中id和name属性的区别

    HTML元素的ID和Name属性的区别 一直认为ID和NAME是一样的,两个又可以一起出现,甚是疑惑. 今天BAIDU了一下,才发现里面大有文章.发出来研究研究: 最classical的答案:ID就像 ...

  2. spring的PROPAGATION_REQUIRES_NEW事务，下列说法正确的是(D)

    A:内部事务回滚会导致外部事务回滚 B:内部事务回滚了,外部事务仍可以提交 C:外部事务回滚了,内部事务也跟着回滚 D:外部事务回滚了,内部事务仍可以提交 PROPAGATION_REQUIRES_N ...

  3. form之action的绝对路径与相对路径（转载）

    1.当你的form要提交到你自己的站点之外的URL的时候,就采取绝对路径: <form action="http://www.xxx.yyy:zzzz/mmm/nn/kkk.jsp&q ...

  4. 可用内存free不足 hadoop3 无法启动 手动释放缓存 cache

    [root@hadoop3 hadoop]# xlfg total used free shared buff/cache availableMem: 15 0 2 0 12 14Swap: 7 0 ...

  5. GoodUI:页面布局的技巧和设计理念

    http://goodui.org/ 中文翻译:http://www.cnblogs.com/Wayou/p/goodui.html 一年了,小小少年从幼年期过渡到成长期要开始加速冲刺了.毕竟钻头就是 ...

  6. MemCache在Windows下环境的搭建及启动

    sc create "memcached-11212" start= auto binPath= "D:\memcached_en32or64\x64\memcached ...

  7. 【黑金教程笔记之007】【建模篇】【Lab 06 SOS信号之二】—笔记

    控制模块的协调角色. 实验六用到了实验四的按键消抖模块debounce_module.v和实验五的sos_module.v. 设计思路: debounce_module.v看成一个输入,sos_mod ...

  8. bzoj 2750: [HAOI2012]Road【spfa+dfs】

    枚举起点做spfa,然后一条边在最短路上的条件是dis[e[i].to]==dis[u]+e[i].va,所以每次spfa完之后,dfs出a[i]表示经过i点的最短路的起点数,b[i]表示经过i点的最 ...

  9. Luogu P1462 通往奥格瑞玛的道路【二分/最短路】

    题目背景 在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量 有一天他醒来后发现自己居然到了联盟的主城暴风城 在被众多联盟的士兵攻击后,他决定逃回自己的家乡奥格瑞玛 题目描述 在艾泽拉斯, ...

  10. 《开源自主OdooERP部署架构指南》试读：第二章数据库服务构建

    文/开源智造联合创始人老杨 本文来自<开源自主OdooERP部署架构指南>的试读章节.书籍尚未出版,请勿转载.欢迎您反馈阅读意见. 使用apt.postgresql.org 您可以选择使用 ...