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 滑入滑出效果实现代码
Mar 27 Javascript
javascript 精粹笔记
May 09 Javascript
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
去除html代码里面的script正则方法
May 19 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
python Flask实现restful api service
2017/12/04 Python
Django中的Model操作表的实现
2018/07/24 Python
Python 中的lambda函数介绍
2018/10/10 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
资产经营总监岗位职责范文
2013/12/01 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
体现团队精神的口号
2014/06/06 职场文书
书法社团活动总结
2015/05/07 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python