一、組件化

使用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" alt="">

?

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

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

使用方法如下：

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

　

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

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

?

?

?

?

?

?

---------

?

轉載于:https://www.cnblogs.com/Walker-lyl/p/9310906.html

總結

以上是生活随笔為你收集整理的使用Vue.js初次真正项目开发-2018/07/14的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。