elementUI界面布局

1.创建 HeadBar 组件

HeadBar.vue

<template>

  <el-row>

    <el-col :span="2"> </el-col>

    <el-col :span="4" style='background:#f9fafc;font-size:2em;'><i class="el-icon-menu"></i>宠物空间</el-col>

    <el-col :span="10" style='background:#f9fafc;'>

      <el-input

        placeholder="请输入搜索关键词"

        icon="search"

      ></el-input>

    </el-col>

    <el-col :span="6" style='background:#f9fafc;'>

      <el-button type="success">登录/注册</el-button>

    </el-col>

    <el-col :span="2"> </el-col>

  </el-row>

</template>

2.引用

3.效果图

vue.js+koa2项目实战（二）创建 HeadBar 组件的更多相关文章

  1. vue.js+koa2项目实战（一）创建项目和elementUI配置

    前端采用vuex+element-ui: 后端采用koa2+restfulAPI+sequlize: (一)项目介绍 宠物社区 1.社区 2.好友 3.说说 4.宠粮 5.健康 (二)项目框架 1.V ...

  2. vue.js+koa2项目实战（四）搭建koa2服务端

    搭建koa2服务端 安装两个版本的koa 一.版本安装 1.安装 koa1 npm install koa -g 注:必须安装到全局 2.安装 koa2 npm install koa@2 -g 二. ...

  3. vue.js+koa2项目实战（五）axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  4. vue.js+koa2项目实战（三）登录注册模态框

    登录注册模态框 注: [Vue warn]: Do not use built-in or reserved HTML elements as component id: diaLog 原因:diaL ...

  5. vue.js+koa2项目实战（六）数据库建表

    数据库建表 1.打开 MySQL 终端 2.查看所有数据库 show databases 3.创建数据库 create database pet 4.进入数据库 use pet 5.创建数据表 cre ...

  6. vue.js及项目实战[笔记]— 03 vue.js插件

    一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...

  7. vue.js的项目实战

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云+社区专栏 需求背景 组件库是做UI和前端日常需求中经常用到的,把一个按钮,导航,列表之类的元素封装起来,方便日常使用, ...

  8. vue.js及项目实战[笔记]— 02 vue.js基础

    一. 基础 1. 注册全局组件 应用场景:多出使用的公共性能组件,就可以注册成全局组件,减少冗余代码 全局APIVue.component('组件名','组件对象') 2.附加功能:过滤器&监 ...

  9. vue.js及项目实战[笔记]— 01 vue.js

    一. vue基础 1. 历史介绍 angular 09年,年份较早,一开始大家是拒绝的 react 2013年,用户体验较好,直接拉到一堆粉丝 vue 2014年,用户体验较好 前端框架与库的区别 j ...

随机推荐

  1. jquery操作select(取值，设置选中

    比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector" ...

  2. Callable、Future、FutureTask_笔记

    参考:http://blog.csdn.net/javazejian/article/details/50896505 1.Callable<V>接口 Runnable接口 public ...

  3. 【bzoj3277/bzoj3473】串/字符串 广义后缀自动机

    题目描述 字符串是oi界常考的问题.现在给定你n个字符串,询问每个字符串有多少子串(不包括空串)是所有n个字符串中至少k个字符串的子串(注意包括本身). 输入 第一行两个整数n,k.接下来n行每行一个 ...

  4. vuemock数据

    http://www.jianshu.com/p/ccd53488a61b dev.server.js 61 行 app.use('/mock',express.static('./mock'))

  5. 微信小程序底部弹框动画

    在写小程序的时候,一般会碰到底部弹出动画,就像下面这样的效果 直接进入正题 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.ht ...

  6. 【01】react 之 hello world

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西 ...

  7. iOS资讯详情页实现—WebView和TableView混合使用（转）

    iOS资讯详情页实现—WebView和TableView混合使用 如果要实现一个底部带有相关推荐和评论的资讯详情页,很自然会想到WebView和TableView嵌套使用的方案. 这个方案是WebVi ...

  8. 【HDOJ5517】Triple（二维BIT）

    题意:给你n个二元组<a,b>, m个三元组<c,d,e>. 如果d = e,那么<a,c,d>会组成一个新的三元组集合G. 问G中有多少个三元组在凸点.(没有其它 ...

  9. win8.1 uefi引导

    装上win8后,感觉似乎开机比win7要慢一些,但实际掐表又发现几乎无差别,但是看网上别人都说 win8可以10秒以内开机,然后又说他们是采用uefi引导,而不是bios引导,那我也试试吧,如下: 1 ...

  10. poj 3693 Maximum repetition substring 重复次数最多的连续子串

    题目链接 题意 对于任意的字符串,定义它的 重复次数 为:它最多可被划分成的完全相同的子串个数.例如:ababab 的重复次数为3,ababa 的重复次数为1. 现给定一字符串,求它的一个子串,其重复 ...