vue.js template模板的使用(仿饿了么布局)


Posted in Javascript onAugust 13, 2018

使用template实现如下页面(仿饿了么布局)

vue.js template模板的使用(仿饿了么布局)

如上图.使用了4个组件,分别是header.vue,goods.vue,ratings.vue,seller.vue

header.vue代码如下

<template>
   <div class="header">
     我是header头部
  </div>
 </template>
 <script type="text/ecmascript-6">
   export default {
  };
 </script>
<style lang="stylus" rel="stylesheet/stylus">
   .header
     color:#fff
     background:rgba(7,17,27,0.5)
     text-align:center
     height:40px
     line-height:40px
 </style>
goods.vue的代码如下,其他两个类似
<template>
   <div class="goods">
     我是goods组件
  </div>
 </template>
 <script type="text/ecmascript-6">
   export default {
  };
 </script>
<style lang="stylus" rel="stylesheet/stylus">
 </style>

在App.vue文件中,我们使用到了<router-link>标签和<router-view>

代码如下

<template>
   <div id="app">
     <!--头部组件-->
     <v-header></v-header>
     <div class="tab border-1px">
       <div class="tab-item">
         <router-link to="/goods/goods">商品</router-link>
       </div>
       <div class="tab-item">
         <router-link to="/ratings/ratings">评价</router-link>
       </div>
       <div class="tab-item">
         <router-link to="/seller/seller">商家</router-link>
       </div>
     </div>
     <!-- keep-alive:缓存所有的页面,防止重复渲染DOM -->
     <keep-alive>
       <router-view></router-view>
     </keep-alive>
   </div>
 </template>
 <script type="text/ecmascript-6">
   // 引人组件
  import header from '@/components/header/header';
   export default {
     components: {
       'v-header': header
     }
   };
 </script>
<style lang="stylus" rel="stylesheet/stylus">
   @import "./common/stylus/mixin.styl";
  .tab
     display:flex
     width:100%
     height:40px
     line-height:40px
     border-1px(rgba(7,17,27,0.1))
     .tab-item
       flex:1
       text-align:center
       & > a
         display:block
         font-weight:700
         text-decoration:none
         font-size:14px
         color:rgb(77,85,93)
         &.active
           color:yellow
 </style>

 index.js中这样写

import Vue from 'vue';
 import VueRouter from 'vue-router';
 import VueResource from 'vue-resource';
 //引入自定义的组件
import Goods from '@/components/goods/goods';
 import Ratings from '@/components/ratings/ratings';
 import Seller from '@/components/seller/seller';
Vue.use(VueRouter);
 Vue.use(VueResource);
const routers = [{
   path:'/goods/goods',
   name:'goods',
   component:Goods
 },{
   path:'/ratings/ratings',
   name:'ratings',
   component:Ratings
 },{
   path:'/seller/seller',
   name:'seller',
   component:Seller
 }];
const router =new VueRouter({
   mode:'history', //如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化为 #! 开头。
   routes:routers,
   linkActiveClass : 'active' // 设置 链接激活时使用的 CSS 类名,默认值: "router-link-active"
 });
 export default router;

总结

以上所述是小编给大家介绍的vue.js template模板的使用(仿饿了么布局),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 #Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 #Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 #Javascript
jQuery实现图片简单轮播功能示例
Aug 13 #jQuery
vue.js 实现评价五角星组件的实例代码
Aug 13 #Javascript
Vue.js实现数据响应的方法
Aug 13 #Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 #jQuery
You might like
escape unescape的php下的实现方法
2007/04/27 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
django自带调试服务器的使用详解
2019/08/29 Python
Django发送邮件功能实例详解
2019/09/02 Python
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
普师专业个人自荐信范文
2013/11/26 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
说明书格式及范文
2014/05/07 职场文书
英文推荐信格式范文
2014/05/09 职场文书
认真学习保证书
2015/02/26 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
小型婚礼主持词
2015/06/30 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL