使用Vue.js初次真正項目開發-2018/07/14

1、組件化

使用Vue.js進行開發，按照MVVM模式，圍繞數據爲核心，進行開發。

開發過程根據業務和功能組件化，組件化一方面讓咱們開發思路更加清晰，另外一方面對於數據的處理和控制變得更加簡單，畢竟一個大功能交給一個組件去實現，老是會顯得很複雜，可是將大功能進行細分，交給多我的，每一個人負責不一樣的小功能，就會變得清晰簡單。

1. 父子組件數據交互經過prop和事件來實現雙向數據綁定。

父組件傳遞到子組件的prop數據，須要在子組件的props屬性中進行註冊，意爲預期傳入的數據。

而後子組件不能直接在子組件修改父組件傳入的數據，能夠經過this.$emit('eventName', args)來觸發父組件傳遞給子組件的時間，進而通知父組件改變數據。

對於兄弟組件和跨組件數據交互，能夠經過Vuex或者bus來實現。

2. 父組件嵌入使用子組件

首先經過import引入子組件

而後在父組件的components屬性中註冊，才能在父組件中使用。

2、關於圖片引入使用

1. 若是是在css中引入圖片，直接按照相對路徑引入使用便可。

2. 若是是想在組件模板中使用img標籤使用圖片：

首先須要在script中使用import把圖片引入，引入路徑使用相對路徑便可。

而後在data或者computed中把引入圖片註冊，不能直接使用，會報錯

最後在img標籤中綁定src爲data中屬性或者計算屬性便可。

import tipImg from "../assets/img/tip.png";

export default {

　　　　data () {
　　　　　　tipImg: tipImg
　　　　}
　}

 

 

<img class="tip-icon" :src="tipImg" alt="">

 

3、ElementUI組件配合Vue.js的開發

ElementUI是餓了麼團隊使用Vue.js開發的組件庫，使用該組件庫能夠節省不少時間。

使用方法以下：

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

　

4、對於ElementUI中的table組件雖然提供了行和列合併的方法，可是比較死板，對於數據行列合併的不肯定性沒法實現動態合併，有必要對改組件進一步封裝，根據傳入的數據動態合併單元格。

5、開發過程有疑問必定要及時的詢問產品和相關人員，避免錯誤的開發，避免人力和時間的浪費。

 

 

 

 

 

 

---------