在项目中碰见的问题（vue+elementUI）

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

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

由于经过Scoped slot 能够获取到row，column，$index和store（table内容的状态管理）的数据。

二、首次进入页面的时候，页面没内容

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

2.一、在写登陆界面的时候，有帐号和密码登陆，在翻转以后有透视效果，问题缘由翻转以后第一层的模块没有彻底的挡住第二层，设置第一层不透明， 或者第二层opacity为0。

三、SVG的学习

3.一、是指可伸缩的矢量图形。

3.二、用来定义用于网络基于矢量图形。

3.三、使用XML格式定义图形，描述2D图形的语言。

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

在HTML中使用

一、<embed>标签：定义嵌入的内容，好比插件。全部浏览器都支持。

二、<object>标签：HTML代码添加一个对象。全部浏览器都支持。

三、<iframe>标签：会建立包含另一个文档的内联框架。全部浏览器都支持，容许使用脚本，可是只能在HS中。

经常使用的属性：

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

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

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

3.一、align：定义viewport和viewbox的对齐方式，分为x，y轴两个方向，x轴（y轴）方向有三种方式：左边（顶边）重合。

3.二、meetOrSlice：定义SVG是内嵌（meet）、裁剪（slice）或是none。

meet（默认值）：保持纵横比缩放viewBox适应viewport，使SVG尽量的显示在viewport里，会在scale_x和scale_y中选择最小的值做为缩放标准。

slice：保持纵横比同事比例小的方向放大填满viewport使svg彻底铺满viewport，会在scale_x和scale_y中选择最大的值做为缩放标准。

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

图形：

一、rect——矩形

二、circle——圆

三、ellipse——椭圆

四、line——线条

五、clipPath——裁剪

六、g——分组

七、use——深度复用

八、defs——模板

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

一、v-enter：定义进入过渡的开始状态，在元素被插入以后的下一帧移除。

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

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

三、v-enter-to：定义进入过渡的结束状态，在元素被插入以后下一帧生效（与此同时v-enter被移除）在过渡/动画完成以后移除。

四、v-leave：定义离开过渡的开始状态，在离开过渡被触发时马上生效，下一帧被移除。

五、v-leave-active：定义离开过渡生效时的状态，在整个离开过渡的阶段中应用，在离开过渡被触发时马上生效，在过渡/动画完成以后移除，这个类能够被用来定义离开过渡的

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

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

Vue页面之间的传值

1、父子之间主键传值：（主要是在父主件里的子组件传递参数，而后在子主件里用props接收）

2、页面转跳经过路由带参数传递数据

一、经过params来传递参数

this.$router.push({

　　name:'Describe',

　　params:{

　　　　id:id

　　}

})

对应的路由配置：

{ path:'/describe',

name:'Describe',

component:'Describe'

}

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

二、经过query来传递参数

this.$router.push({

　　path：'/describe',

　　　　query：{

　　　　　 id：id

 　　　　}

})

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

3、使用vuex进行数据传递

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

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

二、不能直接改变store中的状态，改变store中的状态的惟一途径就是显式的提交mutation，这样使得能够方便的跟踪每个状态的变化。

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

一、state，驱动应用的数据源。

二、view，以声明方式将state映射到视图。

三、actions，响应在view上的用户输入致使的状态变化。

Actions→State→View→Actions