在項目中碰見的問題（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