一、組件化

使用Vue.js進(jìn)行開發(fā)，按照MVVM模式，圍繞數(shù)據(jù)為核心，進(jìn)行開發(fā)。

開發(fā)過程根據(jù)業(yè)務(wù)和功能組件化，組件化一方面讓我們開發(fā)思路更加清晰，另一方面對(duì)于數(shù)據(jù)的處理和控制變得更加簡(jiǎn)單，畢竟一個(gè)大功能交給一個(gè)組件去實(shí)現(xiàn)，總是會(huì)顯得很復(fù)雜，但是將大功能進(jìn)行細(xì)分，交給多個(gè)人，每個(gè)人負(fù)責(zé)不同的小功能，就會(huì)變得清晰簡(jiǎn)單。

1. 父子組件數(shù)據(jù)交互通過prop和事件來實(shí)現(xiàn)雙向數(shù)據(jù)綁定。

父組件傳遞到子組件的prop數(shù)據(jù)，需要在子組件的props屬性中進(jìn)行注冊(cè)，意為預(yù)期傳入的數(shù)據(jù)。

然后子組件不能直接在子組件修改父組件傳入的數(shù)據(jù)，可以通過this.$emit('eventName', args)來觸發(fā)父組件傳遞給子組件的時(shí)間，進(jìn)而通知父組件改變數(shù)據(jù)。

對(duì)于兄弟組件和跨組件數(shù)據(jù)交互，可以通過Vuex或者bus來實(shí)現(xiàn)。

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

首先通過import引入子組件

然后在父組件的components屬性中注冊(cè)，才能在父組件中使用。

二、關(guān)于圖片引入使用

1. 如果是在css中引入圖片，直接按照相對(duì)路徑引入使用即可。

2. 如果是想在組件模板中使用img標(biāo)簽使用圖片：

首先需要在script中使用import把圖片引入，引入路徑使用相對(duì)路徑即可。

然后在data或者computed中把引入圖片注冊(cè)，不能直接使用，會(huì)報(bào)錯(cuò)

最后在img標(biāo)簽中綁定src為data中屬性或者計(jì)算屬性即可。

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

export default {

　　　　data () {
　　　　　　tipImg: tipImg
　　　　}
　}

?

?

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

?

三、ElementUI組件配合Vue.js的開發(fā)

ElementUI是餓了么團(tuán)隊(duì)使用Vue.js開發(fā)的組件庫(kù)，使用該組件庫(kù)可以節(jié)省很多時(shí)間。

使用方法如下：

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

　

四、對(duì)于ElementUI中的table組件雖然提供了行和列合并的方法，但是比較死板，對(duì)于數(shù)據(jù)行列合并的不確定性無法實(shí)現(xiàn)動(dòng)態(tài)合并，有必要對(duì)改組件進(jìn)一步封裝，根據(jù)傳入的數(shù)據(jù)動(dòng)態(tài)合并單元格。

五、開發(fā)過程有疑問一定要及時(shí)的詢問產(chǎn)品和相關(guān)人員，避免錯(cuò)誤的開發(fā)，避免人力和時(shí)間的浪費(fèi)。

?

?

?

?

?

?

---------

?

轉(zhuǎn)載于:https://www.cnblogs.com/Walker-lyl/p/9310906.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。