使用Vue.js初次真正项目开发-2018/07/14
一、组件化
使用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相关推荐
- Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计 ...
- 360奇舞团钟恒:选用Vue.js进行组件化开发,我们遇到了哪些坑?
责编:陈秋歌,关注前端开发领域,寻求报道或者投稿请发邮件chenqg#csdn.net. 欢迎加入"CSDN前端开发者"微信群,参与热点.难点技术交流.请加群主微信「Rachel_ ...
- 《Vue.js 3移动应用开发实战》简介
#好书推荐##好书奇遇季#<Vue.js 3移动应用开发实战>,京东当当天猫都有发售.定价79元,网店打折销售更便宜.本书内容系统全面,配套示例源码与PPT课件. 随着前后端分离开发模式的 ...
- 【前端】Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
- Vue.js快速入门+项目实战(源码)
Vue.js电影网站项目 github 链接(如果觉得有用记得start哦~): 项目源代码链接 目录 前言 安装 Vue.js 1.Vue.js主要特性 2.Vue.js实例 3.Vue.js路由 ...
- Vue.js教程-组件化开发
Vue.js教程-组件化开发 前言 Vue组件化 什么是组件化 Vue单页面开发的解释 组件化思想 组件的使用 原理 实际开发中的使用-父子组件 父子组件传递数据 父传子-props用法 子传父-th ...
- Vue 3最新力作 Vue.js 3企业级应用开发实战
<Vue.js 3企业级应用开发实战>一书由电子工业出版社出版,已经于2022年1月出版上市.近日拿到了样书,第一时间希望与读者朋友们分享下这本书里面的内容. 这本书的背景 近期拿到了样书 ...
- Vue 3的企业级项目开发开篇词|为何掌握了技术API,依然在项目中处处掣肘?
开篇词|为何掌握了技术API,依然在项目中处处掣肘? 你好,我是杨文坚,欢迎跟我一起学习Vue 3的企业级项目开发. 从中山大学毕业后,我一直在从事前端开发的相关工作,期间就职过腾讯和阿里巴巴等互联网 ...
- vue.js电商项目--美丽购物街day01首页制作
vue.js电商项目--美丽购物街day01 首页效果如图 划分目录结构 vue.config.js配置文件别名 App.vue文件 router文件下的index.js 封装网络请求 Home.vu ...
最新文章
- Go 分布式学习利器(14)-- Go语言的错误处理
- PyTorch 51.BatchNorm和Dropout层的不协调现象
- 使用直方图处理进行颜色校正
- 苹果手机数据转移到新手机_买了新手机,数据迁移用它轻松搞定
- Sigmoid是品优函数吗?
- linux 本地做yum源,linux——制作本地yum源
- 使用VirtualAlloc在0x400000处申请内存
- Topforces Strikes Back
- 如何在S/4HANA里创建Custom Business object并实现自定义逻辑
- git拉取分支报错:fatal:‘XXX' is not a commit and a branch ‘XXX' cannot be created from
- 同步方法及同步代码块
- “疯狂猜成语”软件用户体验
- 关于集合中元素的有序无序的易混淆点
- Solr搜索引擎——初识Solr
- 智能优化算法:野马优化算法-附代码
- 简约个人竞聘简历PPT模板
- Android 源码编译make的错误处理
- 群晖Synology DS918+使用笔记-基础篇
- 计算机网络---传输层
- 深度学习经典网络解析图像分类篇(二):AlexNet
热门文章
- C#变量命名的几种方式—C#基础回顾
- [SAP ABAP开发技术总结]ABAP读写、解析XML文件
- java使用AES256解密
- ie,火狐下滚动条的问题
- if you can not get the full version within 1 minute
- final year project prepare part one 认知论
- 要找到现阶段最适合自己的方法
- 动态IP代理软件有话说:天下爬虫框架皆出Scrapy
- 【小松教你手游开发】【面试必读(编程基础)】堆和栈的区别(转过无数次的文章)...
- Python中的字符串操作总结(Python3.6.1版本)