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 相关文章推荐
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
vue中轮训器的使用
Jan 27 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
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
php使用百度天气接口示例
2014/04/22 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
php实现数据库的增删改查
2017/02/26 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
Python手机号码归属地查询代码
2016/05/04 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python占用的内存优化教程
2019/07/28 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
Python和Bash结合在一起的方法
2020/11/13 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
材料化学应届生求职信
2013/10/09 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
python 判断文件或文件夹是否存在
2022/03/18 Python
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫