1、什么是组件？

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

定义组件一般有以下三种方式

组件形式一：使用script标签

示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>组件的学习</title>

</head>

<style>

    .box{

        border: 3px solid silver;

        padding: 0.3em 1em;

        border-radius: 3px;

    }

    /*选择第一个之外的

      :not(:first-child):not(:last-child) 选择非第一个和最后一个

    */

    .box:not(:first-child){margin-top: 10px;}

    .box h2{margin: 0.2em 0;}

</style>

<body>

<div id="app">

    <h2 style="text-align: center">{{title}}</h2>

    <my-box id="0" text="让世界听见你的声音" imgurl="https://static.lagou.com/i/image/M00/87/08/CgpFT1rTS-qALi_kAACPA5oPfFY927.PNG"></my-box>

    <my-box id="1" text="拉钩,梦想集市" imgurl="https://static.lagou.com/i/image2/M00/44/CE/CgotOVrNhbCANCTNAACCViwPdyI789.JPG"></my-box>

    <my-box id="2" text="下班后多一份收入" imgurl="https://static.lagou.com/i/image/M00/41/7E/CgpEMllUxC2AOU7wAABZXy04ZTg283.JPG"></my-box>

</div>

<script type="text/x-template" id="template">

    <div class="box" @click='getinfo(id)'>

        <img width="120" v-bind:src="imgurl"/>

        <h2>{{text}}</h2>

    </div>

</script>

<script src="http://lib.baomitu.com/vue/2.5.17-beta.0/vue.min.js"></script>

<script>

    Vue.component("my-box",{

        template:"#template",

        props:[

            "id",

            "text",

            "imgurl"

        ],

        methods:{

            getinfo(e){

                alert(e)

            }

        },

    });

    var app = new Vue({

        el:'#app',

        data:{

            title:"组件学习",

        },

    })

</script>

</body>

</html>

运行效果：

注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。

组件形式二：使用template标签

示例代码：

1、

<div id="app">

    <h2 style="text-align: center">{{title}}</h2>

    <my-box id="0" text="让世界听见你的声音" imgurl="https://static.lagou.com/i/image/M00/87/08/CgpFT1rTS-qALi_kAACPA5oPfFY927.PNG"></my-box>

    <my-box id="1" text="拉钩,梦想集市" imgurl="https://static.lagou.com/i/image2/M00/44/CE/CgotOVrNhbCANCTNAACCViwPdyI789.JPG"></my-box>

    <my-box id="2" text="下班后多一份收入" imgurl="https://static.lagou.com/i/image/M00/41/7E/CgpEMllUxC2AOU7wAABZXy04ZTg283.JPG"></my-box>

</div>

<template id="template">

    <div class="box" @click='getinfo(id)'>

        <img width="120" v-bind:src="imgurl"/>

        <h2>{{text}}</h2>

    </div>

</template>

<script src="http://lib.baomitu.com/vue/2.5.17-beta.0/vue.min.js"></script>

<script>

    Vue.component("my-box",{

        template:"#template",

        props:[

            "id",

            "text",

            "imgurl"

        ],

        methods:{

            getinfo(e){

                alert(e)

            }

        },

    });

    var app = new Vue({

        el:'#app',

        data:{

            title:"组件学习",

        },

    })

</script>

2、

<div id="app">

    <h2 style="text-align: center">{{title}}</h2>

    <my-box id="0" text="非常精美的人护手霜" imgurl="./images/1.png"></my-box>

    <my-box id="1" text="非常精美的洗面奶" imgurl="./images/2.png"></my-box>

    <my-box id="2" text="非常精美的洗衣粉" :imgurl="errorurl"></my-box>

</div>

<script>

    //创建组件构造器

    let probox = Vue.extend({

        props:[

            "id",

            "text",

            "imgurl"

        ],

        template:`<div class="box" @click='getinfo(id)'>

                        <img width="60" v-bind:src="imgurl"/>

                        <h2>{{text}}</h2>

                        </div>`,

        methods:{

            getinfo(e){

                alert(e)

            }

        },

    });

    var app = new Vue({

        el:"#app",

        data:{

            title:'组件的学习',

            errorurl:"./images/3.png"

        },

        components:{

            "my-box":probox,

        },

    })

</script>

运行效果：

组件形式三：使用vue文件

这种方法常用在vue单页应用（SPA）中。详情看官网：https://cn.vuejs.org/v2/guide/single-file-components.html
创建.vue后缀的文件,组件Hello.vue，放到components文件夹中

Vue学习—组件的学习的更多相关文章

  1. vue的组件(先学习其他的ES6知识,之后再看这个) (未完)

    https://blog.csdn.net/qq20004604/article/details/56965703

  2. iCOM组件（iComponent，应用或学习组件）

    iCOM(英文全称:i + component,应用或学习组件,或iCOM组件),为学习资源的一种表现形式,是面向不同类型的学习对象(某一知识点或某一类知识点,如词汇.句子)专门开发的.在外部可重用的 ...

  3. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

  4. 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function

    解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...

  5. vue学习指南：第七篇(详细) - Vue的 组件通信

    Vue 的 父传子 子传父 一.父组件向子组件传值: 父传子 把需要的数据 传递给 子组件,以数据绑定(v-bind)的形式,传递到子组件内部,供子组件使用  缩写是(:) 1.创建子组件,在src/ ...

  6. vue初级学习--组件的使用(自定义组件)

    一.导语 突然冒出四个字,分即是合,嗯,优点道理....................... 二.正文 在搞的仿淘宝demo,之前加入购物车是与商品详情一块的,今天把它单独拆出来,复用性高点,那这样 ...

  7. vue学习—组件的定义注册

    组件的定义注册 效果: 方法一: <div id="box"> <v-header></v-header> <hr /> <b ...

  8. node+vue进阶【课程学习系统项目实战详细讲解】打通前后端全栈开发(1)：创建项目，完成登录功能

    第一章 建议学习时间8小时·分两次学习      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章]) 视频教程地 ...

  9. 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架（asp.net core 2.X+Vue）模板项目学习之路（一） C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布，并能正常访问

    中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...

随机推荐

  1. HTML是什么与基础格式

    html 又称 超文本标记语言. 网页的本质其实就是html代码,通过浏览器,将html转换翻译成用户可以看得懂的展现丰富的页面. 所以制作网站的本质,其实就是编写html代码. HTML基础格式 & ...

  2. Zookeeper JAVA API的使用

    0. 前言 zookeeper安装及使用  http://www.cnblogs.com/rocky-fang/p/7880309.html 1. 开发环境配置 1.1 idea创建一个maven工程 ...

  3. 最小树形图--朱刘算法([JSOI2008]小店购物)

    题面 luogu Sol 首先设一个 \(0\) 号点,向所有点连边,表示初始价值 显然这个图的一个 \(0\) 为根的最小有向生成树的边权和就是每个买一次的最小价值 再买就一定能优惠(包含 \(0\ ...

  4. ztree 获取当前选中节点的子节点集合

    功能:获取当前选中节点的子节点id集合. 步骤:1.获取当前节点 2.用ztree的方法transformToArray()获取当前选中节点(含选中节点)的子节点对象集合. 3.遍历集合,取出需要的值 ...

  5. windows10（本机）与VirtualBox中CentOS7(虚拟机）互相访问总结

    先把我这里的环境说下: 本机(windows10),发布了一个tomcat服务:http://192.168.0.106:8080/axis/services/VPMService?wsdl 如下图: ...

  6. Hello,world的几种写法！

    这是我的第一篇文章!开个玩笑~~“你知道回字的四种写法吗”? printf("Hello,world!"); cout<<"Hello,world!" ...

  7. [转]开源日志库<log4cplus+VS2008使用>整理

    转 开源日志库<log4cplus+VS2008使用>整理 转http://pyhcx.blog.51cto.com/713166/143549 一.简介     log4cplus是C+ ...

  8. OllyDbg的基本使用

    注:内容整理自<逆向工程核心原理>,结合我的OllyDbg版本修改了一些内容 1. OllyDbg常用命令及其快捷键 指令 快捷键 含义 Restart Ctrl+F2 重新开始调试 St ...

  9. String类型的学习

    一 :关于两个string类型变量是否相等: 请运行以下示例代码StringPool.java,查看其输出结果.如何解释这样的输出结果?从中你能总结出什么? 分析: 首先为s0开辟空间,然后给s1开辟 ...

  10. SQL SERVER占用CPU过高优化S

    https://www.cnblogs.com/yuekong2010/p/6628001.html 然后使用下面语句看一下各项指标是否正常,是否有阻塞,正常情况下搜索结果应该为空. 1 SELECT ...