vue元件筆記

昭光發表於2019-02-28
Vue元件筆記

一般來說，vue 元件分成三類：

1、 由vue-router 產生的每個頁面，它本質上也是一個元件（.vue），主要承載當前頁面的html 結構，會包含資料獲取、資料整理、資料展示等業務操作，在實際專案開發中，我們寫的大部分程式碼都是這類元件，在協同開發時，每人維護自己的路由頁面，很少有交集。這類相對也是最好寫的，能完成需求就行。

2、 不包含業務，是個獨立、具體的功能基礎元件，比如模態框、日期選擇器。獨立元件的開發難度要高於第一類元件，它側重點是API的設計、相容性、效能、以及複雜的功能，也會包含非常多的技巧，比如在不依賴vuex 的情況下，各元件間的通訊。一個具有資料校驗功能的輸入框。

3、 業務元件，在業務中被多個頁面複用，會包含頁面元素，通用性要差一些，（依託於專案，可以使用專案中的技術棧，如vuex、axios等）。通用彈層

一個再複雜的元件，都是由三部分組成：prop、event、slot 。 Props 最好用物件的寫法，這樣可以針對每個屬性設定型別、預設值或自定義校驗屬性值。 


JavaScript模組化方案

在es6之前，js 並沒有原生的模組。模組化方案的三個階段過程：

1、全域性變數+名稱空間 （window.XX ,以及自執行函式等操作）

2、AMD&commonjs 各類規範帶到前端

AMD模組類似：

define(function(require){
    const bar = require('./bar')
    return function(){}
})複製程式碼

commonJs 規範，它本不適合瀏覽器環境，但依賴現代打包工具進行轉換之後就可以在瀏覽器中執行。commonjs 規範格式更加簡潔，（nodejs 模組正在使用的就是commonjs 規範）

const bar = require('./bar')
module.exports = function(){
// ....
}複製程式碼

3、es6模組

模組化方案

import bar from './bar'
export default function(){
 // ...
}複製程式碼

webpack 與gulp 有什麼本質區別

gulp 是工具鏈，構建工具，可以配合各種外掛做js 壓縮，css 壓縮，less 壓縮，替代手工實現自動化工作。 1、 構建工具 2、自動化、3、提高效率

webpack 是檔案打包工具，把專案的各種js ,css 打包合併成一個或多個檔案，主要用於模組化打包，。1、打包工具 2、模組化識別 3、編譯模組程式碼 

技巧記錄

顯示寬高相等的圖片，寬度為螢幕寬度，高度與寬度相等

<div class="image-header">
  <img :src="food.image"/>
</div>

.image-header
    position: relative
    width:100%
    height: 0
    padding-top : 100%
    img
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%
複製程式碼

重點是父元素的height設為0，padding-top設為100%

非父子元件傳值 ☆

主要通過事件匯流排傳值

在根節點給 Vue 掛載一個空的 Vue 物件

Vue.prototype.bus = new Vue();
複製程式碼

需要傳送事件的元件裡

this.bus.$emit("change", params)複製程式碼

接收事件的元件

this.bus.$on("change", (msg) => {
    //do yourself work
})複製程式碼

動畫結合 Animate.css

//引入 animate.css
<link rel="stylesheet" type="text/css" href="animate.css">

//佈局
<transition enter-active-class="animated bounce" leave-active-class="animated shake">
	<p v-if="show">hello world</p>
</transition>
<button @click='toggleShow'>toggle</button>
複製程式碼

要定義 enter-active-class 和 leave-active-class 的類名，且必須有 animated，想要什麼動畫效果就寫在第二個位置上

解決第一次顯示沒有動畫的bug

<transition 
	appear 
	enter-active-class="animated bounce" 
	leave-active-class="animated shake" 
	appear-active-class="animated bounce">
	<p v-if="show">hello world</p>
</transition>
複製程式碼

在 <transition> 上新增 appear 和 appear-active-class 即可。

同時使用過渡和動畫

<transition 
    name="fade"
    type='transition'
    appear 
    enter-active-class="animated bounce fade-enter-active" 
    leave-active-class="animated shake fade-leave-active" 
    appear-active-class="animated bounce">
    <p v-if="show">hello world</p>
</transition>
複製程式碼

在 enter-active-class 和 leave-active-class 加上相應的類名 fade-enter-active 和 fade-leave-active ,然後在樣式中定義過渡效果即可。

.fade-enter-active, .fade-leave-active{
	transition: opacity 2s
}
.fade-enter, .fade-leave-to{
	opacity: 0
}
複製程式碼

動畫執行的總時長是根據動畫還是過渡來定呢？可以手動指定：

//指定整體動畫時間為過渡動畫時間
type='transition'複製程式碼

還可以自己指定動畫總時長：

//指定動畫時長為10秒
:duration="10000"

//分別指定進場時長5秒和出場動畫時長10秒
:duration="{enter: 5000, leave: 10000}"複製程式碼

img 標籤的 src 動態繫結

路徑前加 require()

<img :src="bookingManageImg" slot="icon"/>

bookingManageImg(){
    return this.selectedTab === "bookingManage" ? 	require('../assets/manage_focus.png') : require('../assets/manage_normal.png')
},複製程式碼

11. vuex 在頁面重新整理後狀態丟失解決辦法

重新整理頁面後，存在 vuex 的資料會丟失，給除錯帶來不便。把使用者的登入資訊放到 sessionStorage 中避免丟失。

const USER_INFO = "userInfo";

export default new Vuex.Store({
  state: {
    userInfo: JSON.parse(sessionStorage.getItem(USER_INFO))
  },
  mutations: {
    setUserInfo(state, userInfo){
      //儲存到 sessionStorage 中以防重新整理頁面後狀態丟失
      sessionStorage.setItem(USER_INFO, JSON.stringify(userInfo));
      state.userInfo = userInfo
    }
  }
}
複製程式碼


遇到的進行整理。


相關文章