码迷,mamicode.com
首页 > Web开发 > 详细

使用Vue.js初次真正项目开发-2018/07/14

时间:2018-07-14 20:58:46      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:处理   简单   efault   ops   tip   table   照相   多个   使用   

一、组件化

使用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

标签:处理   简单   efault   ops   tip   table   照相   多个   使用   

原文地址:https://www.cnblogs.com/Walker-lyl/p/9310906.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!