<!DOCTYPE html>
<html lang="en">
<div>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue的组件,优点：提高复用</title>
    <style>
        .head{border:2px solid slategray;width:300px;text-align: center;font-family: 楷体;height:100px;color: tomato;margin: 0px auto;border-radius: 30px 30px 30px 30px;background:#4b0d22}
   
        .body{border:2px solid slategray;width:500px;text-align: center;font-family: 楷体;height:350px;color: tomato;float: left;background:#4b0d22}
        .larm{border:2px solid slategray;width:100px;text-align: center;font-family: 楷体;height:200px;color: tomato;float:left;margin-left: 400px;background:#4b0d22}
        .rarm{border:2px solid slategray;width:100px;text-align: center;font-family: 楷体;height:200px;color: tomato;float: left;background:#4b0d22}
        .lleg{border:2px solid slategray;width:100px;text-align: center;font-family: 楷体;height:240px;color: tomato;float: left;margin-left:505px;background:#4b0d22}
        .rleg{border:2px solid slategray;width:100px;text-align: center;font-family: 楷体;height:240px;color: tomato;float: left;margin-left:295px;background:#4b0d22}
        .lfoot{border:2px solid slategray;width:100px;text-align: center;font-family: 楷体;height:50px;color: tomato;float: left;margin-left:505px;background:#4b0d22}
        .rfoot{border:2px solid slategray;width:100px;text-align: center;font-family: 楷体;height:50px;color: tomato;float: left;margin-left:295px;background:#4b0d22}  
    </style>
    <script src="../js/vue.js"></script>
    <script>
    window.onload = function(){
        // 声明vue的组件头部,mycom组件名称
        Vue.component("mycom",{
            // 定义网页模板template
            // 里面放的html标签
            template:'<div class="head"><h1>我来组成头部</h1></div>'
        });
        // 声明vue的组件身体,mybody组件名称
        Vue.component("mybody",{
            // 定义网页模板template
            // 里面放的html标签
            template:'<div class="body"><h1>我来组成身体</h1><div>'
        });    
        // 声明vue的组件左胳膊,
        Vue.component("larm",{
            // 定义网页模板template
            // 里面放的html标签
            template:'<div class="larm"><h1>我来组成左胳膊</h1><div>'
        });   
        Vue.component("rarm",{
            // 定义网页模板template
            // 里面放的html标签
            template:'<div class="rarm"><h1>我来组成右胳膊</h1><div>'
        });  
        Vue.component("lleg",{
            // 定义网页模板template
            // 里面放的html标签
            template:'<div class="lleg"><h1>我来组成左腿</h1><div>'
        });
        Vue.component("rleg",{
            // 定义网页模板template
            // 里面放的html标签
            template:'<div class="rleg"><h1>我来组成右腿</h1><div>'
        });
        Vue.component("lfoot",{
            // 定义网页模板template
            // 里面放的html标签
            template:'<div class="lfoot"><h1>左脚</h1><div>'
        });
        Vue.component("rfoot",{
            // 定义网页模板template
            // 里面放的html标签
            template:'<div class="rfoot"><h1>右脚</h1><div>'
        });
        // 创建vue对象,es6用let声明
        let app = new Vue({
            el:"#app",
        });
    }
    </script>
</head>
<body>
    <div id="app">
        <!-- 调用组件 -->
        <div><mycom></mycom></div>
        <div>
            <larm></larm>
            <mybody></mybody>
            <rarm></rarm>
        </div>
        <div>
            <lleg></lleg>
            <rleg></rleg>
        </div>
        <div>
            <lfoot></lfoot>
            <rfoot></rfoot>
        </div>
    </div>
</body>
</html>
 
 
 
 
 
 
运行效果图：

如何用vue组件做个机器人?有趣味的代码的更多相关文章

  1. 极客时间_Vue开发实战_05.Vue组件的核心概念(1)：属性

    05.Vue组件的核心概念(1):属性 代码地址: https://github.com/tangjinzhou/geektime-vue-1/blob/master/%E6%BC%94%E7%A4% ...

  2. 封装Vue组件的一些技巧

    封装Vue组件的一些技巧 本文同步在个人博客shymean.com上,欢迎关注 写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式.以弹窗组件为例,一种实现是在需 ...

  3. vue组件如何引入外部.js/.css/.scss文件

    可在相应的单vue组件引入相应文件. 1.引入外部.js文件. 2.引入外部.css文件. 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到 ...

  4. 6. vue组件详解(一)

    主要内容: 1. 组件的基本使用 2. 全局组件和局部组件 3. 父组件和子组件 4. 组件语法糖的写法 5. 组件data关联的写法 6. 父子组件的通信 组件系统是 Vue 的一个重要概念,因为它 ...

  5. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  6. JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  7. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  8. vue组件的那些事($children,$refs，$parent)的使用

    如果项目很大,组件很多,怎么样才能准确的.快速的寻找到我们想要的组件了?? 1)$refs 首先你的给子组件做标记.demo :<firstchild ref="one"&g ...

  9. 关于vue组件的一个小结

    用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...

随机推荐

  1. kafka集群扩容后的topic分区迁移

    https://www.cnblogs.com/honeybee/p/5691921.html kafka集群扩容后,新的broker上面不会数据进入这些节点,也就是说,这些节点是空闲的:它只有在创建 ...

  2. Flink - CoGroup

    使用方式, dataStream.coGroup(otherStream) .where(0).equalTo(1) .window(TumblingEventTimeWindows.of(Time. ...

  3. Oracle 分区表 收集统计信息 参数granularity

    GRANULARITY Determines the granularity of statistics to collect. This value is only relevant for par ...

  4. jquery基础学习之动画篇（四）

    一,动画效果 hide() show() 隐藏与显示 hide(options) 隐藏 对应display:none,有参数就会变成动画, $(document).click(function () ...

  5. HSSF与XSSF导出excel文档

    Apache POI Apache POI 是用Java编写的免费开源的跨平台的 Java API,它可以创建和维护操作各种符合Office Open XML(OOXML)标准和微软的OLE 2复合文 ...

  6. Linux下高并发socket最大连接数各种限制的调优

    1.修改用户进程可打开文件数限制 在Linux平台上,无论编写客户端程序还是服务端程序,在进行高并发TCP连接处理时,最高的并发数量都要受到系统对用户单一进程同时可打开文件数量的限制(这是因为系统为每 ...

  7. 多周期MACD趋势共振制作的方法

    我浏览了创幻论坛.理想论坛,来到MACD股市技术分析俱乐部,真正找到自己的乐土. 做人要厚道!指标之王MACD既然被先辈们创造了出来,就应由我辈发扬光大!自吹自擂者.吝啬者都应自觉退出论坛既然来到这里 ...

  8. open()：打开文件

    1.open():使用指定的模式和编码打开文件,返回文件读写对象 2.使用说明: (1)使用格式:open(filename [, mode [, bufsize]])(2)打开一个文件,返回一个fi ...

  9. 0703-spring cloud config-git配置属性加解密之对称加密

    一.概述 可以使用{cipher} *格式的加密值,只要有一个有效的密钥,那么它们将在主应用程序上下文获取环境之前被解密.要在应用程序中使用加密功能,您需要在您的类路径中包含Spring Securi ...

  10. python的map函数

    map:对指定序列做映射 python3中的: map(function, iterable, ...) map(lambda x, y: x + y, [1, 3, 5, 7, 9], [2, 4, ...