Vue实战记录(1)---仅供自己参考

2019.10.1------底部标签栏

1、公共组件标签栏使用vant的Tabbar标签栏

首先需要安装vant依赖并在main.js里面按需引入

不要永远只写静态布局，把标签元素里面使用的属性存在组件的data里面（数组里面存放对象，方便获取），利用v-for以及属性绑定的方式生成页面结构。

2、编程式导航实现路由的跳转

这个vant标签栏自带to属性实现路由跳转我们自己运用编程式的方式实现（这个标签栏自带change事件切换标签时触发）

change事件方法实现路由跳转方法是this.$router.replace(‘路由‘)其中active的值是被点击标签的name属性值

在标签指定name属性的情况下，v-model的值为当前标签的name 下面的代码就是实现了点击标签跳转到与标签名一致的路由

3.使用这个独立的Tabbar组件，在根组件App中，结构是

< router-view />

在此之前需要做的事情是将公共组件Tabbar引入并且注册，上面的创建才会有效

4、建立路由组件

在views里面创建Home、Recommend以及User文件夹，并在其文件下分别新建index.jx文件（会默认去找这个文件夹）

5、在router文件夹里面的index.js文件中引入路由组件以及建立路由表规则

原文地址：https://www.cnblogs.com/zyl0123/p/11615495.html

时间： 2024-10-10 21:19:00

Vue实战记录(1)---仅供自己参考的相关文章

webpack构建速度优化-记录一次公司项目build优化(不完全记录)仅供翻阅参考

打包速度转化AST—>遍历树—>转化回代码(具体语法配置参考webpack,这边只是个人的一些过程记录,并不包含详细过程)1.缓存 cache-loader2.多核 happypack threads3.抽离 DllPlugin.externals4.拆分 Docker 优化项目:测量插件speed-measure-webpack-plugin 用法: 优化前:可以看到我们公司的项目还是比较残暴的!!开启AOT(Angular5项目)之后,线上构建达到了41分钟! 测量出现的问题:raw-l

kinect2跑高博的orbslam2的过程（仅供自己参考记录）

首先感谢高博的无私奉献!http://www.cnblogs.com/gaoxiang12/p/5161223.html 程序所在的目录为:/home/zty/catkin_ws/src/iai_kinect2/kinect2_viewer /src/kinect2_orb.cpp为修改的程序文件 /include/目录下面的头文件即为ORB_SLAM2/目录里面的头文件, kinect2_orb.cpp中将原来的#include "orbslam2/System.h"改为现在的#in

PostgreSQL 创建分区表（转仅供自己参考）

典型使用场景随着使用时间的增加,数据库中的数据量也不断增加,因此数据库查询越来越慢. 加速数据库的方法很多,如添加特定的索引,将日志目录换到单独的磁盘分区,调整数据库引擎的参数等.这些方法都能将数据库的查询性能提高到一定程度. 对于许多应用数据库来说,许多数据是历史数据并且随着时间的推移它们的重要性逐渐降低.如果能找到一个办法将这些可能不太重要的数据隐藏,数据库查询速度将会大幅提高.可以通过DELETE来达到此目的,但同时这些数据就永远不可用了. 因此,需要一个高效的把历史数据从当前查询中隐藏

Vue实战记录（2）

2019.10.2----路由组件.静态布局 1.继续使用vant完成部分页面布局以及手写一个页面布局,对于vant需要现在main.js里面进行全局注册 2.对于需要重复出现在多个页面的部分进行独立成公共组件,建立好组件之后在main.js里面进行全局注册,然后那里需要就在哪里使用.注册全局组件如下 3.路由嵌套,某个路由组件下面还有<router-view>时,建立的路由列表要注意是一级还是二级,是应在存在于哪个<router-view>中例如我建立的商品详情组件是属于一级

C,Go,Rust,Nim 4语回文数大战！仅供娱乐参考！

联想笔记本 inter i7,2.4GHz,16G,win10 C语言(应该是全C,vs2015编译) #include<stdio.h> #include<stdlib.h> #include<time.h> bool ishuiwen(int n) { int sn = 0; sn = n; int tn = 0; while (sn != 0) { tn = tn * 10 + sn % 10; sn

mathJax基础语法-0基础开始，（这是网上抄来的如果有权限和版权问题联系本人处理，仅供学术参考）

（whh仅供自己参考）进行ip网络请求的步骤

这个过程大致是这个样子: 1 添加通知 2 发送网络请求里边有一个发送通知的操作 3 执行发送通知的具体操作代码如下: 1 在VC添加通知 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(receivingYM1:) name:@"YM1" object:nil]; 2 在SYNDispatchProcessor.m 中进行发送通知 -(void) delayTimeGCDbuild

c#简单的ajax显示方法，仅供新人参考，大神勿喷！

通过后台拼接的方式实现ajax显示后台代码: public string IndexDo2() { StringBuilder str = new StringBuilder(); //引用命名空间 System.Text List<Hmodel> list = bll.SentSayShow(); foreach (var reg in list) { str

java经典编程（1）（要点而已，仅供自己参考）

一重定向输出流实现程序日志 1.setOut()方法改变输出流,因为system类的out,err,in成员变量是final类型. 二自动类型转换与强制类型转换三加密可以这样简单(位运算) import java.util.Scanner; public class Example{ public static void main(String[] args){ Scanner scan = new Scanner(System.in); System.out.println("请输入一