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. POJ2352 Stars [树状数组模板]

    题意:输入一n颗星星的x,y坐标,给定判断level的标准,即某颗星星左下边(不高于它,不超过他,相当于以他为基准的第三象限)星星的数目为level, 输出level从0到n的星星个数. //poj2 ...

  2. CPU时间分片、多线程、并发和并行

    1.CPU时间分片.多线程? 如果线程数不多于CPU核心数,会把各个线程都分配一个核心,不需分片,而当线程数多于CPU核心数时才会分片. 2.并发和并行的区别 并发:当有多个线程在操作时,如果系统只有 ...

  3. OpenCV 图像平滑处理

    #include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" us ...

  4. SHELL用法四（for语句）

    1.SHELL编程For语句案例实战 1)For语句固定的语法格式: For i in (表达式) do 动作1 done 2)For语句案例操作一: #!/bin/bash do echo “$NU ...

  5. 挑战中英实时语音翻译——Skype Translator 中文预览版登陆中国

    Translator 中文预览版登陆中国" title="挑战中英实时语音翻译--Skype Translator 中文预览版登陆中国"> 今天,我们正式宣布在中国 ...

  6. 不疯“模”不成活，海尔阿里II代电视将极致进行到底

    我去过很多现场,经历过很多新品发布,各种概念,各种颠覆,有点见怪不怪.这次受邀海尔阿里II代电视发布会,本也是带着一颗平常心. 2点30分发布会准时开场,当 "智慧模块"在讲解员手 ...

  7. Windows下使用swoole的环境搭建

    Cygwin 官方地址:http://www.cygwin.com/ swoole 官方下载地址:https://github.com/swoole/swoole-src/releases 方法/步骤 ...

  8. js 函数的防抖(debounce)与节流(throttle)

    原文:函数防抖和节流: 序言: 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频 ...

  9. MobX中@computed和自定义get函数的区别

    首先这两者解决方法都会得到一个相同的结果,但使用@computed的意义在于它能够由MobX进行更智能的优化. 如果我不使用computed属性,直接使用自定义的getTheValue函数的话,那么一 ...

  10. python返回值进行unpack

    最近在写yolov3,因为yolov3的多输出性质,所以我打算写适配多输出的工具函数,在numpy中可以在一个array中包含多个不同维度的array,但在tensorflow中一个tensor只能保 ...