使用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、开发过程有疑问必定要及时的询问产品和相关人员，避免错误的开发，避免人力和时间的浪费。

 

 

 

 

 

 

---------