<!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. express+gulp+gulp-nodemon+browser-sync自动刷新

    express自动生成项目.不在赘述 1.在项目根目录下新建终端,依次运行如下命令 npm install gulp --save-dev npm install gulp-nodemon --sav ...

  2. OpenGL开发学习指南二（glfw+glad）

    版权声明:本文为博主原创文章,未经博主允许不得转载.blog.liujunliang.com.cn https://blog.csdn.net/qq_33747722/article/details/ ...

  3. 解决GP服务产生的结果无法自动发布为地图服务的问题

    在ArcGIS for Javascript API或REST API调用GP服务时,常常会遇到这样一种情况:GP服务运行以后,执行成功,也能够生成结果,然而结果并没有直接产生动态的地图服务供API调 ...

  4. ionic cordova screenshot 使用和操作

    如何调用cordova 中的screenshot插件进行截图 首先添加 ionic cordova plugin add com.darktalker.cordova.screenshot npm i ...

  5. LeetCode 883 Projection Area of 3D Shapes 解题报告

    题目要求 On a N * N grid, we place some 1 * 1 * 1 cubes that are axis-aligned with the x, y, and z axes. ...

  6. springboot注入properties配置到javabean

    一.再application.properties中添加 二. @Value("${field}")在字段上面加个注解

  7. gpg签名用法

    – 在CentOS 6上生成公钥/私钥对 [root@localhost ~]# gpg --gen-key gpg (GnuPG) ; Copyright (C) Free Software Fou ...

  8. Spring加载classpath与classpath*的过程剖析

    使用spring-boot 1.5.7 在resource目录下创建i18n文件夹 使用spring的默认配置没有加载到文件 # INTERNATIONALIZATION (MessageSource ...

  9. 利用session防止表单重复提交

    转自:http://www.cnblogs.com/xdp-gacl/p/3859416.html 利用Session防止表单重复提交 对于[场景二]和[场景三]导致表单重复提交的问题,既然客户端无法 ...

  10. vue项目引用 iView 组件——全局安装与按需加载

    框架的热度,出现了不少基于Vue的UI组件库,这次项目用到了 iView 这个组件库.使用方法官网很详细. 官网:https://www.iviewui.com/ 这篇文章主要是记录一下npm 全局安 ...