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. 实例理解scala 隐式转换(隐式值，隐式方法，隐式类)

    作用 简单说,隐式转换就是:当Scala编译器进行类型匹配时,如果找不到合适的候选,那么隐式转化提供了另外一种途径来告诉编译器如何将当前的类型转换成预期类型.话不多说,直接测试 ImplicitHel ...

  2. Ananconda常用指令

    Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项,可用于解决开发过程中遇到python版本需要切换的问题. conda有一点好处是,如 ...

  3. web前端校招笔试题集锦

    写一个求和的函数sum,达到下面的效果 // Should equal 15 sum(1, 2, 3, 4, 5); // Should equal 0 sum(5, null, -5); // Sh ...

  4. java String、StringBuilder

    Java中的String和StringBuilder类: 1.String对象是不可变的.每一个看起来修改了String值的方法,实际上都是创建了全新的String对象.代码示例如下: String ...

  5. IDEA 中tomcat上面有个x 而且找不到配置tomcat的选项

    在使用idea时候,准备启动服务器,tomcat突然上面有个xx 解决方式 在 File-settings-plugins 搜索tomcat 如果插件后面有 就重新取消之后再勾选,然后点应用就可以解决 ...

  6. tomcat一闪而过

    JAVA_HOME should point to a JDK not a JRE |vista tomcat 有的朋友在启动Tomcat的时候会出现问题. 1例如: 手动点击startup.bat ...

  7. 20181026_队测_Brick Game

    题目描述 给出一个\(n\)行\(m\)列的矩阵,矩阵中每个格子有一个非负整数,现在要求你去除其中的个格子,使得剩下的格子中的数的总和最大.另外,去除\(k\)个格子后,剩下的格子必须满足以下几个性质 ...

  8. spring参数拼装

    -- 知道轮子是怎么造的 -- 自己试着造一造轮子 ,这样才可以更好地利用轮子,轮子的缺陷和优点才能明确. spring参数拼装,需要用到set函数,参考文档: http://coderec.cn/2 ...

  9. Matplotlib简单回顾

    import numpy as np from pylab import * from matplotlib import pyplot as plt x = [1, 2, 3, 4] y = [3, ...

  10. 蚂蚁金服招聘-无线测试开发（20k-36k/月）

    蚂蚁金服-支付宝国际事业部-高级测试开发工程师/测试专家 工作年限:三年以上学历要求:本科期望层级:P6/P7工作地点:上海,杭州,深圳等为什么选择加入我们? 我们的岗位有何不同?1.国际化远景:随着 ...