<!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. prometheus: celery, redis-export

    https://github.com/nlighten/tomcat_exporter https://github.com/prometheus/jmx_exporter https://vexxh ...

  2. Xcode编辑器之基本使用(一)

    前言. 苹果原生xcode使用介绍文档 1.Xcode IDE概览 说明: 从左到右,依次是“导航窗格(Navigator)->边列(Gutter)->焦点列(Ribbon)->代码 ...

  3. Java之旅_面向对象_重写和重载

    参考并摘自:http://www.runoob.com/java/java-override-overload.html 重写(Override) 子类对父类(允许访问的)方法的实现过程进行重新编写, ...

  4. 预备作业2 ：学习基础和C语言基础调查

    剑网三毒经pk心得: 看完标题的你真的没有进错,这里是博客园. 想到写这篇文章的原因一部分是自己的确没啥技能比超过90%以上的人还好,还有一部分是受到了作业提示的指引...... 如果你有类似的技能获 ...

  5. ubuntu64位系统编译时头文件找不到的问题（可以查看g++ -v路径，设置export C_INCLUDE_PATH，CPLUS_INCLUDE_PATH）

    今天编译webrtc时出现以下错误: ninja -C out/Debug Allninja: Entering directory `out/Debug'[1/6] CXX obj/talk/app ...

  6. Java基础知识之集合

    Collection集合 特点:长度可变,只能存储引用类型,可以存储不同的类型的元素 list 特点:元素有序(存储和取出的顺序一致),元素可以重复.list除了可以用迭代器循环遍历之外,因为其是有序 ...

  7. websocketd

    https://www.cnblogs.com/tinywan/p/6826125.html https://www.jianshu.com/p/63afd0099565

  8. 500 G JAVA视频网盘分享(JEECG开源社区)

    500 G JAVA视频网盘分享(JEECG开源社区)   [涵盖从java入门到深入架构,Linux.云计算.分布式.大数据Hadoop.ios.Android.互联网技术应有尽有]   [转载:h ...

  9. redis 的消息队列 VS kafka

    redis push/pop VS pub/sub (1)push/pop每条消息只会有一个消费者消费,而pub/sub可以有多个 对于任务队列来说,push/pop足够,但真的在做分布式消息分发的时 ...

  10. left join 太神奇了

    概念: 把left join左边的表的记录全部找出来.系统会先用表A和表B做个笛卡儿积,然后以表A为基表,去掉笛卡儿积中表A部分为NULL的记录.最后形成你的结果. 进行左连接时,就有涉及到主表.辅表 ...