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的实现简单的表格中增加或删除下一行
Aug 01 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
给js文件传参数(详解)
Jul 13 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 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
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
详解a++和++a的区别
2017/08/30 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
python利用datetime模块计算时间差
2015/08/04 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
python利用tkinter实现屏保
2019/07/30 Python
python numpy库np.percentile用法说明
2020/06/08 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
精彩自我鉴定
2014/01/16 职场文书
开业庆典主持词
2014/03/21 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
python 判断文件或文件夹是否存在
2022/03/18 Python
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis