一、組件化

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

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

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

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

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

對於兄弟組件和跨組件數據交互，可以通過Vuex或者bus來實現。

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

首先通過import引入子組件

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

二、關於圖片引入使用

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" >

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

ElementUI是餓了麽團隊使用Vue.js開發的組件庫，使用該組件庫可以節省很多時間。

使用方法如下：

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

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

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

---------

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