我练习项目眼中的 vue
因为毕业设计开始了 vue
的学习之路,曾写过一些入门的 vue
小白学习文章系列(2018 我所了解的 Vue 知识大全(一))。如今已经工作半年了,这一次想说说我我平时练习项目中的 vue
,我习惯采用 ES6
书写,仅供参考,如果有可以改进的希望能够学习到,下次我说说我在工作中的 vue
练习的 参考项目,在项目中对于注释我自己还是很满意的哈哈哈
- 在注册,提交订单,新增按钮请求接口,为了防止用户的重复提交我们前端可以进行简单处理(函数节流或者标志位开关)
//函数节流,当一个函数被反复调用的时候,他只会执行一次,函数柯里化,调用一个函数,返回另一个函数
export function debounce(func,delay) {let timerreturn function (...args) {if (timer) {clearTimeout(timer)}timer = setTimeout(()=>{func.apply(this,args)},delay)}
}
复制代码
- 我们在子组件里面定义了一个方法,在父组件的兄弟元素中调用,使他改变子组件里面某些性质,或者传递数据(ps:可能描述有一点不对),在父组件的兄弟元素里面调用子组件,好像有点意思,我们要怎么去实现呢??
vue
中有一个 ref
特性,为了该组件赋予一个 ID
引用,可以通过引用可以获取到子组件里面的内容,但是我们要注意 $refs
只会在组件渲染完成之后生效,并且他们不是响应式的,避免在模板或者计算属性中访问 $refs
在父组件中的兄弟元素中通过 this.$refs.searchBox.setQuery(query)
进行引用详细见 search
组件92行和 search-box
组件的33行
- 在我们请求接口的时候,最好进行边界条件处理(异常处理),避免因为接口导致页面无响应假死(player的322行)
getLyric() {//获取歌词格式化this.currentSong.getLyric().then((lyric) => {if (this.currentSong.lyric !== lyric) {return}this.currentLyric = new Lyric(lyric, this.handleLyric)//当前歌曲的歌词if (this.playing) {//当我们歌曲在播放的时候,才会有歌词,this.currentLyric.play()}}).catch(() => {//异常处理,清理this.currentLyric = nullthis.playingLyric = ''this.currentLineNum = 0})
},
复制代码
异常处理,边界处理,我们前端应该要考虑,我们永远都不知道用户会怎么进行操作
mapMutations
是对mutations
做一层封装,在methods
,用扩展运算符,就可以做一个对象的映射,映射一个方法名
vue
中,在data
,prop
,computed
里面定义的数据会自动给她们添加一个set
和get
方法,用来实时监测数据的变化,然后响应到DOM
中,如果我们不需要监测变化,只是获取数据用来暂时保存,我们可以直接在方法中定义使用
- 在同一个组件里面如果有两个地方用到同样一段代码,我们可以抽象出来用一个公共的方法,如果是两个或者多个组件用到大量相同的一长段代码,我们可以用
mixin
抽象出来(组件里面有的同名的方法会覆盖mixin
里面的方法,因为组件里面的东西优先级更高)
项目书写建议
- 我们的基础组件(子组件)中,没有任何逻辑处理,基础组件值负责派发事件,告诉父组件或者外部组件有个事件被触发了,以及告诉外部,他所知道的所有信息,所有的业务逻辑处理都在父组件进行,由外部触发事件
- 为了今后代码向后可扩展性,我们不在具体的方法中写入具体的数字,最好通过
const
常量来引入。我们在引入子组件的时候,最好子组件里面都是抽象的东西,通过父组件去传递suggest
组件的40行
- 在
vue-cli
构建工具中,如果要上传空文件到Github
上面需要一个.gitkeep
文件,否则空文件是不会上传到github
上面的
- 给
vuex
定义数据的时候首先要想到我们需要什么数据,相关最底层数据=>state
getter
数据的映射,通常是一个函数,类似计算属性,可以根据 state
计算出一些属性,也可以是一些复杂的判断逻辑
mutation
,定义我们修改数据的逻辑,mutation-types
定义我们mutation
需要哪些动作即函数名
- 项目命名规范,可以让我们不经过大脑思考就知道这个文件是干什么的,这个函数有什么用。管理,尽可以的使得代码解耦性强,易于管理,易于查找,易于分享。变量命名语义化,可减少注释,清晰易懂
- 在
vue
的使用中,如果data
中的键和methods
对象中定义的函数名称相同,会有警告提示,因为会出现对象覆盖对象的情况,所以不允许出现这样的情况。优先级关系:props
优先级 >data
优先级 >methods
优先级
- 在
vue2.0
以上的版本,最终渲染都是通过render
函数,如果写的是template
属性,则需要编译成render
函数(生命周期图可以看出)
期待我的续更吧,或许写的有点糟糕,我是初学者,如有错误之处,请多多请教(sunseekers_)。掘金谈技术,公众号谈生活(sunseekers)
我练习项目眼中的 vue相关推荐
- webpack项目中使用vue
webpack项目中使用vue 第一步:运行 npm i vue –S 安装vue 第二步:在src->index.js入口文件中,通过 import Vue from 'vue' 来导入vue ...
- Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件 传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
- 项目既有vue又有html,01-vue指令
什么是vue.js vue.js 是目前最火的一个前端框架,react是最流行的一个前端框架(react除了开发网站,还可以开发手机app, vue语法也是可以用于进行手机app开发的,需要借助于we ...
- 一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
- vscode生成vue模板快捷键_VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法...
1. 安装一个插件,识别vue文件 2.新建代码片段 文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定 3.粘贴入自己写的.vue模板 { " ...
- list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
- vue尚品汇商城项目-day07【vue插件-49.(了解)自定义插件】
文章目录 49.(了解)自定义插件 本人其他相关文章链接 49.(了解)自定义插件 自定义插件好处: 功能:用于增强Vue 本质:包含install方法的一个对象,install的第一个参数是Vue, ...
- SpringBoot+vue仿网易云音乐网站(三)- Springboot项目以及前端vue基础搭建
一.基础项目搭建 1. 新建springboot项目 在搭建Springboot项目之前,需要的基础环境:JDK(8).Maven,工具Idea.项目就新建一个简单的springboot项目就行了,具 ...
- Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品排序,Thymeleaf快速入门,商品详情页的展示)
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息 这是用来做排序的,默认按照综合排序 ...
最新文章
- python中select用法_Python select及selectors模块概念用法详解
- 1加6投屏_6月1日起驾考要加项目?真相是这样
- 浅谈对象生存期与内存管理(转)
- [论文翻译]Learning Phrase Representations using RNN Encoder–Decoder for Statistical Machine Translation
- win2003服务器安全设置
- 解耦模式--服务定位器
- UVa 10306. e-Coins
- C语言文件操作函数总结——超详细
- Android开发示例
- ios 微信逆向部分
- 有激励才有动力:从多多益善的华为年终奖谈起
- 3D游戏建模师的工资和发展前景到底怎么样?
- 安卓虚拟键盘_Android自动化测试13--安卓仿真器/模拟器
- 蓝牙协议中的SBC编解码原理和仿真
- 大一计算机基础实用教程答案第二章,计算机基础实用教程(课件)第2章.ppt
- python中difference_Python 集合 symmetric_difference() 使用方法及示例
- hexo博客优化之实现来必力评论功能
- 2345压缩软件是垃圾!!
- 卡通教师公开课教学课件PPT模板
- 3.2多线程(线程通信)