阿里矢量图的应用--flex布局--vue中$router和$route的方法

1、阿里矢量图字体图标的用法

2、flex布局

  • display:flex;设置父容器为伸缩盒子,会使每一个子元素自动变成伸缩项

接着设置子元素主轴方向上的排列方式

  • justify-content: flex-start让子元素从父容器的起始位置开始排列;

flex-end:让子元素从父容器的结束位置开始排列; ? center:让子元素从父容器的中间位置开始排列; ? space-between:左右对齐父容器的开始和结束,中间平均分页,产生相同的间距; ? space-around:将多余的空间平均的分页在每一个子元素的两边 margin:0 auto.造成中间盒子

的间距是左右两边盒子间距的两倍。

  • flex-flow是是flex-wrap和flex-direction的综合,例如flex-flow:wrap column

    flex-wrap:控制子元素是否换行显示,默认不换行 ? nowrap:不换行--则收缩 ? wrap:换行 ? wrap-reverse:翻转,原来是从上到下,翻转后就是从下到上来排列

    flex-direction:设置子元素的排列方向:就是用来设置主轴方向,默认主轴方向是row(水平方向) ? row:水平排列方向,从左到右 ? row-reverse:水平排列方向,从右到左 ? column:垂直排列方向,从上到下 ? column-reverse:垂直排列方向,从下到上

  • flex-grow:可以来扩展子元素的宽度:设置当前元素应该占据剩余空间的比例值,

    比例值计算 :当前空间的flex-grow/所有兄弟元素的flex-grow的和 ? flex-grow的默认是0:说明子元素并不会去占据剩余的空间

  • flex-shrink: 定义收缩比例,通过设置的值来计算收缩空间 ? 比例值计算 :当前空间的flex-shrink*宽度/所有兄弟元素的flex-shrink乘以宽度的和 ? 默认值为1
  • flex : 设置当前伸缩项占据剩余空间的比例值 剩余空间 :用父元素减去没有设置flex的盒子的总和

如果主轴 是column ? justify-content(主轴): 设置的纵向排列方式 ? align-items(侧轴):设置的横向排列方式

如果主轴 是row ? justify-content(主轴): 设置的横向排列方式 ? align-items(侧轴):设置的纵向排列方式

设置弹性盒子元素在垂直方向上(纵轴)的对齐方式。其中align-items属性用于弹性容器,而align-self用于弹性项目。

align-items: flex-start | flex-end | center | baseline | stretch;

align-self: auto | flex-start | flex-end | center | baseline | stretch;

 3、vue中的$router和$route有关的方法

1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。

举例:history对象

$router.push({path:‘home‘});本质是向history栈中添加一个路由,在我们看来是 切换路由,但本质是在添加一个history记录

方法:

$router.replace({path:‘home‘});//替换路由,没有历史记录

2.route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等

我们可以从vue devtools中看到每个路由对象的不同

原文地址:https://www.cnblogs.com/susu-yee/p/10398539.html

时间: 2024-10-10 07:32:47

阿里矢量图的应用--flex布局--vue中$router和$route的方法的相关文章

阿里矢量图怎么用(转)

一.准备工作 1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源,然后直接下载使用,或者建立图标库然后再使用,例如这里以删除的图标为例 a) 搜索删除图标 b) 选择需要的图标,然后可以执行三种操作:添加入库.收藏或者直接下载,可以根据自己的实际情况来选择相应操作,这里选择添加入库,操作完可以看到图标已经添加进右上角的购物车里了 c) 点击右上角的购物车,可以看到

weex用阿里矢量图

首先这段代码来自 zwwill在github上的 weex网易严选项目 他是在utils下封装了一个方法 let utilFunc = { initIconFont () { let domModule = weex.requireModule('dom'); domModule.addRule('fontFace', { 'fontFamily': "iconfont", 'src': "url('http://at.alicdn.com/t/font_630973_b31

vue中router以及route的使用

路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ] router可以理解为一个容器,或者说一种机制,它管理了一组route.简单来说,route只是进行了URL和函数的映射,而在当接收到一个URL之后,去路由映射表中查找相应的函

vue中$router以及$route的使用

路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ] router可以理解为一个容器,或者说一种机制,它管理了一组route.简单来说,route只是进行了URL和函数的映射,而在当接收到一个URL之后,去路由映射表中查找相应的函

vue中$router和$route的区别

$router是VueRouter的实例,在script标签中想要导航到不同的URL,使用$router.push方法. 返回上一个历史history用$router.to(-1) $route为当前router跳转对象.里面可以获取当前路由的name,path,query,parmas等. 嗯,就酱~~ 参考:https://www.cnblogs.com/yangguoe/p/9974793.html 原文地址:https://www.cnblogs.com/jin-zhe/p/105064

jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验

jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验 一丶bootstrap的使用 下载资源文件: bootstrap官网 导入 // 1.导入样式 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> // 2.导入bootstrap的js,依赖jquery,先导入jquer <script

(转)30 分钟学会 Flex 布局

原文链接:https://zhuanlan.zhihu.com/p/25303493 最简单实用的 Flex 布局教程,30 分钟让你学会 Flex 语法基础. 为什么我要写这一篇关于 Flex 布局的教程? 因为它十分简单灵活,区区简单几行代码就可以实现各种页面的的布局,以前我在学习页面布局的时候我深受其 float.display.position 这些属性的困扰.然而学习 Flex 布局,你只要学习几个 CSS 属性,就可以写出简洁优雅复杂的页面布局. 本教程适合人群: 前端小白,不太明白

微信小程序之Flex布局

微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动态的或者不确定的大小的.Flex布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间. flex布局 Flex布局的特点: 任意方向的伸缩,向左,向右,向下,向上 在样式层可以调换和重排顺序 主轴和侧轴方便配置 子元素的空间拉伸和填充 沿着容器对齐 微信小程序实

flex 布局 初次接触这个好使又不是特别好用的布局方法

刚开始学前端的童鞋们应该也是一样先学习的table然后再学习了盒子模型,感觉终于学会了简单的网页布局,使用各种display,float,position绞尽脑汁给页面布局成自己想要的页面样式,然而,当自己把页面放缩时....画风就莫名其妙的变了,没错 ,就是变了,变得很乱很丑,再把网页放到手机上:卧槽这是哪个战斗力五颗渣的家伙写的啊,整个页面一坨一坨的堆积在一起. 然后就钻研js响应式布局,写着写着,哎呀我去,这是哪一个的宽啊,这是哪一个元素的高啊,这个比例等下设置为多少,跟上一个需不需要一样