zoukankan      html  css  js  c++  java
  • 在项目中遇见的问题(vue+elementUI)

    1、在写埋点监控项目的时候,需求是表格里面的数据后台传递过来为0,但是要求显示的时候为—,

    在elementUI判断,将prop去掉在下面加上<template slot-scope="scope"></template>里面在写vue的判断,

    因为通过Scoped slot 可以获取到row,column,$index和store(table内容的状态管理)的数据。

    2、首次进入页面的时候,页面没内容

    因为进入首页是,路径是'/',写了{path:'/',component:Home},vue报错,两个路径指向同一个地方了,用重定向解决了。

    2.1、在写登录界面的时候,有账号和密码登录,在翻转之后有透视效果,问题原因翻转之后第一层的模块没有完全的挡住第二层,设置第一层不透明, 或者第二层opacity为0。

    3、SVG的学习

    3.1、是指可伸缩的矢量图形。

    3.2、用来定义用于网络基于矢量图形。

    3.3、使用XML格式定义图形,描述2D图形的语言。

    3.4、图像在放大或改变尺寸的情况下其图形质量不会有所损失。

    在HTML中使用

    1、<embed>标签:定义嵌入的内容,比如插件。所有浏览器都支持。

    2、<object>标签:HTML代码添加一个对象。所有浏览器都支持。

    3、<iframe>标签:会创建包含另外一个文档的内联框架。所有浏览器都支持,允许使用脚本,但是只能在HS中。

    常用的属性:

    1、viewport:指的是x,y,width,height这四个属性在页面上固定的矩形区域,SVG标签所占的区域的大小。

    2、viewbox:指的是,svg标签在viewport中的实际占位。注意:svg中子标签是不能带单位的,单位在svg标签中初始化

    3、preserveAspectRatio:用来定义viewport和viewbox互相对齐的方式。

    3.1、align:定义viewport和viewbox的对齐方式,分为x,y轴两个方向,x轴(y轴)方向有三种方式:左边(顶边)重合。

    3.2、meetOrSlice:定义SVG是内嵌(meet)、裁剪(slice)或是none。

    meet(默认值):保持纵横比缩放viewBox适应viewport,使SVG尽可能的显示在viewport里,会在scale_x和scale_y中选择最小的值作为缩放标准。

    slice:保持纵横比同事比例小的方向放大填满viewport使svg完全铺满viewport,会在scale_x和scale_y中选择最大的值作为缩放标准。

    none:扭曲纵横比以充分适应viewport。

    图形:

    1、rect——矩形

    2、circle——圆

    3、ellipse——椭圆

    4、line——线条

    5、clipPath——裁剪

    6、g——分组

    7、use——深度复用

    8、defs——模板

    过渡的类型:在进入/离开的过渡中,会有6个class切换

    1、v-enter:定义进入过渡的开始状态,在元素被插入之后的下一帧移除。

    2、v-enter-active:定义进入过渡生效时的状态,在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除,这个类可以被用来

    定义进入过渡的过程时间,延迟和曲线函数。

    3、v-enter-to:定义进入过渡的结束状态,在元素被插入之后下一帧生效(与此同时v-enter被移除)在过渡/动画完成之后移除。

    4、v-leave:定义离开过渡的开始状态,在离开过渡被触发时立刻生效,下一帧被移除。

    5、v-leave-active:定义离开过渡生效时的状态,在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除,这个类可以被用来定义离开过渡的

    过程时间,延迟和曲线函数。

    6、v-leave-to:定义离开的过渡的结束状态,在离开过渡被触发之后下一帧生效,在过渡/动画完成之后移除。

    Vue页面之间的传值

    一、父子之间主键传值:(主要是在父主件里的子组件传递参数,然后在子主件里用props接收)

    二、页面转跳通过路由带参数传递数据

    1、通过params来传递参数

    this.$router.push({

      name:'Describe',

      params:{

        id:id

      }

    })

    对应的路由配置:

    { path:'/describe',

    name:'Describe',

    component:'Describe'

    }

    获取参数:this.$route.params.id

    2、通过query来传递参数

    this.$router.push({

      path:'/describe',

        query:{

          id:id

         }

    })

    获取参数:this.$route.query.id

    三、使用vuex进行数据传递

    vuex:每一个vuex应用的核心就是store(仓库),store基本上就是一个容器,它包含着你的应用中大部分的状态,vuex和单纯的全局对象有两点不同。

    1、Vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会相应地得到高效更新。

    2、不能直接改变store中的状态,改变store中的状态的唯一途径就是显式的提交mutation,这样使得可以方便的跟踪每一个状态的变化。

    vuex是一个专为vue.js应用程序开发的状态管理模式,状态自管理应用包含几个部分

    1、state,驱动应用的数据源。

    2、view,以声明方式将state映射到视图。

    3、actions,响应在view上的用户输入导致的状态变化。

    Actions→State→View→Actions

  • 相关阅读:
    Mac 删除Openfire
    FMDB使用
    豆瓣restful api 状态和错误码
    豆瓣开放api
    常用文字配色方案
    电商网站参考
    HP后端跨域HEADER头
    PHP统计 图表实现方法
    PHP 全过程教程和测试网
    Ajax技术在购物车中的应用(PHP篇)
  • 原文地址:https://www.cnblogs.com/qrf1997/p/11009478.html
Copyright © 2011-2022 走看看