<!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. AngularJs 常用指令标签

    1.ng-app:告诉Angular他应该管理页面的那一部分,可以放在html元素上也可以放在div等标签上 例:<html ng-app="problem"> 2.n ...

  2. HZAU2018年十大阅读之星演讲稿

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  3. 《mongoDB》索引

    一:基础操作 创建单列索引 语法: >db.collection.createIndex(keys, options) 语法中 Key 值为你要创建的索引字段,1 为指定按升序创建索引,如果你想 ...

  4. 使用Apache CXF根据wsdl文件生成代码

    1.去官网下载,我用的是apache-cxf-2.5.10.zip 2.解压 3.通过命令行进入Apache CXF的bin目录,如我的目录是D:\BIS\axis2\apache-cxf-2.7.1 ...

  5. 检测到目标URL存在http host头攻击漏洞

    检测到目标URL存在http host头攻击漏洞 1.引发安全问题的原因 为了方便的获得网站域名,开发人员一般依赖于HTTP Host header.例如,在php里用_SERVER["HT ...

  6. FCN-全卷积网络

    全卷积网络 Fully Convolutional Networks CNN 与 FCN 通常CNN网络在卷积层之后会接上若干个全连接层, 将卷积层产生的特征图(feature map)映射成一个固定 ...

  7. NYOJ 61 传纸条(一)

    双线DP #include<iostream> #include<algorithm> #include<ctype.h> #include<string&g ...

  8. React篇-报错信息：warning: Can't call setState (or forceUpdate) on an unmounted component.

    报错信息是: Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but ...

  9. vue常用插件汇总

    UI-框架element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量 ...

  10. jQuery-velocity.js 插件的简易使用

    初识Velocity动画,感觉它并没有那么强大,但是渐渐感觉它的ui动画可以让我们简易的使用到我们的项目中. Velocity动画的简介: 下载地址:http://www.julian.com/res ...