<!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. TIC Read Status此类网络活动提醒隐藏

    这个方法会使得NSLog输出失效,printf正常工作 不推荐使用,应该是很多操作均被关闭,需要详细了解该参数意义 OS_ACTIVITY_MODE = disable

  2. XPC connection interrupted

    用Analysis 静态分析代码,发现了一些问题,修改之后,然后用Instrument -> Leaks对内存做动态分析,发现一个错误: 控制台报错:XPC connection interru ...

  3. Chrome浏览器如何调试移动端网页信息

    Chrome浏览器如何调试移动端网页信息 2017年08月12日 12:42:20 阅读数:835 最近在弄项目,用WebView加载一个页面,想追踪页面中一个按钮的点击事件.这个可能就需要调试这个页 ...

  4. Multiple SSH keys for different accounts on Github or Gitlab

    [inside this square brackets give a name to the followed acc.] name = github_username email = github ...

  5. 转：Java 集合详解

    原文地址:https://www.cnblogs.com/ysocean/p/6555373.html 一.集合的由来 通常,我们的程序需要根据程序运行时才知道创建多少个对象.但若非程序运行,程序开发 ...

  6. gitee 使用

    gitee 使用 首先在码云仓库创建对应的仓库 当你输入错误用户名和密码 需要清掉配置 git config --system --unset credential.helper 设置账号 git c ...

  7. 洛谷P3724 大佬 [AH2017/HNOI2017] dp+bfs

    正解:dp+bfs 解题报告: 传送门! 这题看起来很复杂的样子其实真的很复杂 但是仔细看一下题目,会发现其实操作只有两个目的嘛,一个是保证自己不死,一个是让对手减血 而且保证自己不死只有一种操作 而 ...

  8. 程序------>算法

    一.算法: 1.算法的定义:   算法是解决特定问题求解步骤的描述,在计算机中表现为指令的有序序列,并且每条指令表示一个或多个操作.即算法是描述解决问题的方法.(对于给定的问题是可以有多种 算法进行解 ...

  9. 报错解决——pytesseract.pytesseract.TesseractError: (1,’Error opening data file /usr/local/share/tessdata/eng.traineddata’)

    解决方法:(原文地址http://stackoverflow.com/questions/14800730/tesseract-running-error) $ wget https://tesser ...

  10. 015-线程同步-synchronized几种加锁方式、Java对象头和Monitor、Mutex Lock、JDK1.6对synchronized锁的优化实现

    一.synchronized概述基本使用 为确保共享变量不会出现并发问题,通常会对修改共享变量的代码块用synchronized加锁,确保同一时刻只有一个线程在修改共享变量,从而避免并发问题. syn ...