Vue2.0 【第二季】第6节 Component 初识组件

第6节 Component 初识组件

前言（废话）：component组件是Vue学习的重点！所以你必须学好Vue component。其实组件就是制作自定义的标签，这些标签在HTML中是没有的。比如：<da0sy></da0sy>，那我们就开始学习这种技巧吧。

一、全局化注册组件

全局化就是在构造器的外部用Vue.component来注册，我们注册一个da0sy组件来体验一下。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>component-1</title>

    <script type="text/javascript" src="../assets/js/vue.js"></script>

</head>

    <body>

        <h1>component-1</h1>

        <hr>

        <div id="app">

            <da0sy></da0sy>  //必须放在vue作用域里，这里是app

        </div>

        <script type="text/javascript">

            Vue.component('da0sy',{   ////只能定义一个

                template:'<div style="color:red">我是全局的da0sy组件</div>'

            })

            var app = new Vue({

                el:'#app',

            })

        </script>

    </body>

</html>

浏览器效果：

我们在javascript里注册了一个组件，在HTML中调用了它。这就是最简单的一个组件的编写方法，并且它可以放到多个构造器的作用域里。

二、局部注册组件局部

局部注册组件和全局注册组件是相对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="../assets/js/vue.js"></script>

    <title>component-1</title>

</head>

<body>

    <h1>component-1</h1>

    <hr>

    <div id="app">

      <monkey></monkey>

    </div>

    <script type="text/javascript">

        var app=new Vue({

            el:'#app',

            components:{   //可以定义多个

                "monkey":{   //这块必须是字符串，不然相当于没定义

                    template:`<div style="color:green;">局部注册的monkey标签</div>`

                }

            }

        })

    </script>

</body>

</html>

浏览器效果：

从代码中你可以看出局部注册其实就是写在构造器里，但是你需要注意的是，,构造器里的components 是加s的，而全局注册是不加s的。

三、组件和指令的区别

组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，这只是个人观点。

Vue2.0 【第二季】第6节 Component 初识组件的更多相关文章

  1. Vue2.0 【第二季】第8节 Component 父子组件关系

    目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...

  2. vue 专题 vue2.0各大前端移动端ui框架组件展示

    Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...

  3. vue2.0 自定义 图片上传（UpLoader）组件

    1.自定义组件 UpLoader.vue <!-- 上传图片 组件 --> <template> <div class="vue-uploader"& ...

  4. vue2.0 之 douban （三）创建header组件

    1.分析 首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题.我们先不做有搜索框的h ...

  5. vue2.0 之 douban （二）创建自定义组件tabbar

    1.大体布局 这个组件分为两部分:第一个是组件的外层容器,第二个是组件的子容器item,子组件里面又分为图片和文字组合.子组件有2个状态,一个默认灰色的状态,一个选中状态,我们来实现一下这个组件的布局 ...

  6. vue2.0 自定义 饼状图 （Echarts）组件

    1.自定义  图表  组件 Echarts.vue <!-- 自定义 echart 组件 --> <template> <div> <!-- echart表格 ...

  7. Component 初识组件

    component组件是Vue学习的重点.重点.重点,重要的事情说三遍.所以你必须学好Vue component.其实组件就是制作自定义的标签,这些标签在HTML中是没有的.比如:<diy> ...

  8. vue的生命周期（又称钩子函数）----以及vue1.0版本与vue2.0版本生命周期的不同

    vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1  vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...

  9. Vue2.0 【第二季】第9节 Component 标签

    目录 Vue2.0 [第二季]第9节 Component 标签 第9节 Component 标签 1.我们先在构造器外部定义三个不同的组件,分别是componentA,componentB和compo ...

随机推荐

  1. mpvue框架的小程序和H5同时开发

    demo链接1.样式统一为了达到共用一套样式,采用px2rem-loader和px2rpx-loader进行代码的打包,细节如下: 由于UI设计图是在蓝湖上标注,宽度750,选择像素 PX 样式中直接 ...

  2. [LC] 82. Remove Duplicates from Sorted List II

    Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...

  3. java中字符串相等判断

    字符串的判断有2种: 1.判断地址是否相等  用:== 2.判断值是否相等  用:equals方法 Object类作为所有类的超类,而Object类的equals方法是直接比较地址的,源码如下: pu ...

  4. Nginx笔记总结六:Nginx location配置

    语法规则:location [= | ~ | ~* | ^~] /uri/ {....} = 表示精确匹配 ^~ 表示uri以某个常规字符串开头 ~ 表示区分大小写的正则表达式 ~* 表示不区分大小写 ...

  5. 推荐几位jenkins发布war包和jar包大佬的博客

    jenkins部署tomcat的war包和jar包 https://blog.csdn.net/liuxiaoming1109/article/details/89311696  

  6. MyBatis基本使用步骤

    MyBatis是一个数据持久层(ORM)框架.把实体 类和SQL语句之间建立了映射关系,是一种半自 动化的ORM实现.MyBATIS需要开发人员自己来写sql语句,这可以增加了程序的灵活性,在一定程度 ...

  7. github常用命令汇总

    创立版本库 mkdir Baiducd Baidugit init SSHssh-keygen -t -rsa -C "TaylorApril947939@gmail"(在gith ...

  8. 吴裕雄--天生自然 R语言开发学习：高级数据管理

    #-----------------------------------# # R in Action (2nd ed): Chapter 5 # # Advanced data management ...

  9. ibator使用

    一.ibator是一个ibatis的代码生成工具,它能根据数据表自动生成javabean.sqlmap. ibator的官方地址是 http://ibatis.apache.org/ibator.ht ...

  10. vue2.0一个弹窗组件