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. Mate20 pro实现H265 (HEVC)实时硬件编码

    谁能告诉我手机上用H265实时编码有什么鸟用? 一.先看看手机支持哪些codec ALL_CODECS REGULAR_CODECS mine-type 选择mime-type为video/hevc, ...

  2. phpcms数组处理后键值插入（php自带库函数）和自己处理办法比较。

    phpcms处理: public function insert($data, $table, $return_insert_id = false, $replace = false) {  if(! ...

  3. Kinect_V1在Debian testing的配置指北

    在Linux下驱动Kinect V1现在有两种方式,一种是使用OpenNI + SensorKinect + Nite的方案,一种是使用OpenNI2 + libfreenect的方案,第一种我没有尝 ...

  4. 重复测量的方差分析|Mauchly's Test of Sphericity|

    生物统计学-重复测量的方差分析 之前的方差分析应用条件要求组之间是独立的,即某种因素下相同时段测量的结果数据,但4月与5月数据是有关系的,所以必须考虑某种因素下不同时段测量的结果数据,即使用重复测量的 ...

  5. inventor安装未完成，某些产品无法安装的解决方法

    inventor提示安装未完成,某些产品无法安装该怎样解决呢?,一些朋友在win7或者win10系统下安装inventor失败提示inventor安装未完成,某些产品无法安装,也有时候想重新安装inv ...

  6. java 通过数据库名获得 该数据所有的表名以及字段名、字段类型

    package com.nf.lc.sql_meta_data; import java.sql.*; import java.util.HashMap; import java.util.Map; ...

  7. 通用 mapper的简单使用

    通用 MAPPER的简单使用 官方  https://mapperhelper.github.io/docs/2.use/ 依赖 <dependency> <groupId>t ...

  8. toString()和强制类型转换(String)的用法

    原来是String类型的才可以强转到String,不然会报 ClassCastException异常: 所有的引用类型都从Object类继承了toString方法.

  9. 微软Project Oxford帮助开发人员创建更智能的应用

    Oxford帮助开发人员创建更智能的应用" title="微软Project Oxford帮助开发人员创建更智能的应用"> 假设你是一名对关于健身的应用充满奇思妙想 ...

  10. 量化投资学习笔记34——《Python机器学习应用》课程笔记08

    岭回归 解决某些训练样本线性相关,导致回归结果不稳定的情况. 它是一种用于共线性数据分析的有偏估计回归方法.是一种改良的最小二乘估计法. 在sklearn中使用sklearn.linear_model ...