vue项目实战精粹汇总

5180f740014cbea18d04f3d20c4f047e.png

前言

vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,由于其轻量和自底向上的渐进式设计思想,使其不仅仅被应用于PC系统,对于移动端,桌面软件(electronjs)等也有广泛的应用,与此诞生的优秀的开源框架比如elementUI,iView, ant-design-vue等也极大的降低了开发者的开发成本,并极大的提高了开发效率。笔者最初接触vue时也是使用的iview框架,亲自体会之后确实非常易用且强大。

笔者曾经有两年的vue项目经验,基于vue做过移动端项目和PC端的ERP系统,虽然平时工作中采用的是react技术栈,但平时还是会积累很多vue相关的最佳实践和做一些基于vue的开源项目,所以说总结vue的项目经验我觉得是最好的成长,也希望给今年想接触vue框架或者想从事vue工作的朋友带来一些经验和思考。

你将收获

  • vue框架使用注意事项和最佳经验

  • vue项目配置经验总结

  • vue组件设计经验总结

  • vue项目架构与服务化探索

正文

本文不仅仅是总结一些vue使用踩过的一些坑和项目经验,更多的是使用框架(vue/react)过程中的方法论和组件的设计思路,最后还会有一些个人对工程化的一些总结,希望有更多经验的朋友们可以一起交流,探索vue的奥妙。

在开始文章之前,笔者建议大家对javascript, css, html基础有一定的了解,因为会用框架不一定能很好的实现业务需求和功能,要想实现不同场景下不同复杂度的需求,一定要对web基础有充足的了解,所以希望大家熟悉如下基础知识,如果不太熟悉可以花时间研究了解一下。

javascript:

  • 数组常用方法的使用,比如遍历有forEach,map,filter,every, some,reduce,操作方法有splice,slice, join,push,shift, pop,sort等

  • 基本数据结构,引用类型(对象,数组)

  • 基本逻辑运算if else, switch,三目运算:?,for/while循环等

  • 字符串常见api(如replace,slice, substr,indexOf)

  • 基本正则使用

  • 变量作用域,作用域链,变量提升,函数声明提升

  • 对象基本用法,面向对象编程

css:

  • 基本盒模型(border/content/padding等)

  • 4种常用定位(static/absolute/relative/fixed)

  • 常用布局方式(浮动布局/弹性布局flex/自适应布局/网格布局grid)

  • css3基本样式与动画(transition,animation)

html:

  • 新标签基本用法和使用

  • head标签作用与用法(主要是meta属性的用法)

所以希望大家掌握好以上基础知识,也是前端开发的基础,接下来我们直接进入正文。

1. vue框架使用注意事项和最佳经验

vue学习最快的方式就是实践,根据官网多写几个例子是掌握vue最快的方式。 接下来笔者就来总结一下在开发vue项目中的一些实践经验。

1.1 vue生命周期以及不同生命周期下的应用
9b3c4a5b5edbf635a9f302c5e671d924.png

以上是vue官网上的生命周期的方法,大致划分一下分为创建前/后,挂载前/后,更新前/后,销毁前/后这四个阶段。各个阶段的状态总结如下:

  • beforeCreate:在beforeCreate生命周期执行时,data和methods中的数据还未初始化,所以此时不能使用data中的数据和methods中的方法

  • create:data 和 methods初始化完毕,此时可以使用methods 中的方法和data 中的数据

  • beforeMount:template模版已经编译好,但还未挂载到页面,此时页面还是上一个状态

  • mounted:此时Vue实例初始化完成了,DOM挂载完毕,可以直接操作dom或者使用第三方dom库

  • beforeUpdate: 此时data已更新,但还未同步页面

  • updated:data和页面都已经更新完成

  • beforeDestory:Vue实例进入销毁阶段,但所有的 data 和 methods , 指令, 过滤器等都处于可用状态

  • destroyed: 此时组件已经被销毁,data,methods等都不可用

根据以上介绍,页面第一次加载时会执行 beforeCreate, created, beforeMount, mounted这四个生命周期,所以我们一般在created阶段处理http请求获取数据或者对data做一定的处理, 我们会在mounted阶段操作dom,比如使用jquery,或者其他第三方dom库。其次,根据以上不同周期下数据和页面状态的不同,我们还可以做其他更多操作,所以说每个生命周期的发展状态非常重要,一定要理解,这样才能对vue有更多的控制权。

1.2 vue常用的指令以及动态指令的使用

指令 (Directives) 是带有 v- 前缀的特殊属性,vue常用的指令有:

  • v-bind 用于响应式地更新 HTML属性

  • v-if 根据表达式的值的真假来决定是否插入/移除元素

  • v-on 用于监听 DOM 事件

  • v-show 用于决定是否展示该元素,底层通过display:none实现

  • v-html 在dom内插入html内容

  • v-for 循环

  • v-text 渲染指定dom的内容文本

  • v-cloak 和CSS规则如 [v-cloak] { display: none } 一起用,可以隐藏未编译的 Mustache 标签直到实例准备完毕

以上是比较常用的指令,具体用法就不一一举例了,其中v-cloak主要是用来避免页面加载时出现闪烁的问题,可以结合css的[v-cloak] { display: none }方式解决这一问题。关于指令的动态参数,使用也很简单,虽然是2.6.0 新增的,但是方法很灵活,具体使用如下:

<a v-on:[eventName]="doSomething"> ... </a>  
复制代码

我们可以根据具体情况动态切换事件名,从而绑定同一个函数。

1.3 vue常用修饰符及作用
  1. 事件修饰符

  • .stop 阻止事件冒泡

  • .prevent 阻止事件默认行为

  • .self 事件绑定的元素本身触发时才触发回调

  • .once 事件只能触发一次,第二次就不会触发了

  • .native 将一个vue组件变成一个普通的html,使其可以监听click等原生事件 具体使用如下:

<Tag @click.native="handleClick">ok</Tag>  
复制代码
  1. 表单修饰符

  • .lazy 在输入框输入完内容,光标离开时才更新视图

  • .trim 过滤首尾空格

  • .number 如果先输入数字,那它就会限制你输入的只能是数字;如果先输入字符串,那就相当于没有加.number

用法如下:

<input type="text" v-model.trim="value">  
复制代码

还有很多修饰符比如键盘,鼠标等修饰符,感兴趣的大家可以自行学习研究。

1.4 组件之间,父子组件之间的通信方案

组件之间的通信方案:

  • 通过事件总线(bus),即通过发布订阅的方式

  • vuex

父子组件:

  • 父组件通过prop向自组件传递数据

  • 子组件绑定自定义事件,通过this.$emit(event,params) 来调用自定义事件

  • 使用vue提供的 children & $refs方法来通信

87342acb3b9862976296dfe43f9c0bed.png
1.5 vue实现按需加载组件

组件的按需加载是项目性能优化的一个环节,也可以降低首屏渲染时间,笔者在项目中用到的组件按需加载的方式如下:

  1. 使用() => import(), 具体代码如下:

<template>  
    <div>  
       <ComponentA />  
       <ComponentB />  
    </div>  
</template>  
<script>  
const ComponentA = () => import('./ComponentA&#
  • 8
    点赞
  • 60
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值