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. Python---8函数（函数的参数&递归函数）

    一.函数的参数 Python的函数定义非常简单,但灵活度却非常大.除了正常定义的必选参数外,还可以使用默认参数.可变参数和关键字参数,使得函数定义出来的接口,不但能处理复杂的参数,还可以简化调用者的代 ...

  2. 启动Tomcat报WEB-INF\lib\j2ee.jar jar not loaded异常的解决办法

    今天加载工程时突然发现Tomcat报: 2010-7-1 12:11:38 org.apache.catalina.loader.WebappClassLoader validateJarFile 信 ...

  3. RxSwift学习笔记之Subject

    本文为原创文章,转载请标明出处 AsyncSubject 一个AsyncSubject只在原始Observable完成后,发射来自原始Observable的最后一个值.它会把这最后一个值发射给任何后续 ...

  4. 吴裕雄--天生自然HTML学习笔记：HTML 表单和输入

    HTML 表单用于收集不同类型的用户输入. <!DOCTYPE html> <html> <head>  <meta charset="utf-8& ...

  5. 解决Eclipse和MyEclipsejava.lang.OutOfMemoryError Java heap space的错误

    Eclipse和MyEclipse出现错误:java.lang.OutOfMemoryError: Java heap space的错误,很熟悉的错误信息,可咋就想不起来在哪里设JVM的参数啊.请看下 ...

  6. 吴裕雄--天生自然 人工智能机器学习实战代码：线性判断分析LINEARDISCRIMINANTANALYSIS

    import numpy as np import matplotlib.pyplot as plt from matplotlib import cm from mpl_toolkits.mplot ...

  7. 前端学习之路CSS基础学习一

    CSS CSS定义如何显示HTML元素,当浏览器读到一个样式表,它就按照这个样式表来对文档进行格式化. CSS实例 每个CSS样式由两个组成部分:选择器和声明.声明又包括包括属性和属性值.每个声明之后 ...

  8. 网络编程OSI介绍

    网络编程 软件开发架构 c/s架构(client/server) c:客户端 s:服务端 客户端和服务器端架构,这种架构是从用户层划分的,一般客户端就是在用户电脑上安装的应用程序,而服务端就是公司里的 ...

  9. OSX编译安装Python3及虚拟开发环境Virtualenv

    0X00.前言 因为工作原因,最近主要做Python开发,刚好电脑系统重装之后所有的东西都需要重新配置.此文主要记录OSX下通过源码编译安装Python3以及安装虚拟开发环境Virtualenv. 0 ...

  10. 安卓之父造手机：该紧张的只有iPhone？

    近日,"安卓之父" Andy Rubin正式带来他潜心打造的新款智能手机--Essential.这款设计新颖.配置强大的手机刚一发布,就引起全球科技界的广泛关注.对iPhone.三 ...