Vue.js 2.0 从基础到组件

牛逼

文章正文

在这段时间里我不停的做着Vue的技术分享,虽然不是什么深层次的代码底能架构,如果底层架构真说出来,我就不会做Vue.js 2.0从基础到组件了,就会分享Vue从底层到还是到底层。我相信能来看我这次分享的朋友都是在工作开发层面上面临着一些问题。此次分享我们先抛开Vue - router和Vuex,很多朋友都觉得Vuex和router比较难,大错特错!

对Vue 2.0的介绍

我对Vue 2.0认知,能it前端框架的认知,在我们不算底层原理的情况下,什么才是精髓,那就是基础的方法和一些api介绍,随着现代数据量庞大,业务逻辑也变得更加复杂,随着数据情景的不同展示,jquery,angular1.0等一系列框架,已经满足不了开发的需求了,如何用数据驱动去管理数据,在我认知里,前后端联调,对接口,通过什么?那过json数据来传递着一切的信息。

我们操作dom来分析数据,那就是用屠龙刀去切菜,用数据驱动去改变数据,那才叫细功出好活。还有我们如何更好的通过组件来让一个复杂的页面划分为代码精简,易维护,可复用,阔展性强的组件集合!

enter image description here

如果是你如何去划分这个页面

  1. 对头部进行一个组件的化分。(通过 prop:{[img]} 来进行头图的划分。)
  2. input框的划分。
  3. 图型验证码和图型input框。
  4. 短信组件和短信input框。
  5. 协议服务的弹窗。
  6. button的划分。
  7. 语音验证码的划分。

这样一算你们会发现一个小小的登陆就划分出6个组件,可能给你的感觉分的太细,那我也感觉分的太细,那我为什么要分的那么细呢,那就是增强可复用性,可阔展性。

那我何去解这个组件太过于细分的问题,我们可以合并那些东西,以我一眼看过去,唯一能合并的就是中间一套注册体系,我们把2,3,4,5,7,这几个细组件合并到login.Vue组件里,在这个层面上,我们只要暴露出四个输入框内容向外传递的数据,这样一个页面整体就我们拆开来了,对于每个页面的代码量就减少了,对于维护,改bug是一个很大的帮助。

组件从基础开始

Vue的在项目中如何去做好一个体系问题,最主要的就是template里整体的组织,如何用好的组织体系方便的展现复杂的逻辑操作,我个人认为而不是通过new Vue去操控整体,反正new Vue里的一切选项是着template这个组织体系走的,如果是一个房子,template就是地基,new Vue里的选项就是水泥石头。

  1. 模板语法

    能用javascript表达式则用表达式,我觉得表达式是给人感觉最清楚 的,能结合模板去正确使用表达式来解析那是最明了的。

    <p @click='show = false'></p>

    上面一眼就能让人明白,不用往下看就明白我所要改变数据是为了什么,就这一行模板语法用javascript表达式写让你能明白一切。

  2. 修饰赋

    修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

    在修饰赋当中,我们如何灵活运用修饰符去减速少代码量,不要忘记对于组件事件要加.native。比如对组织事件冒泡和阻止默认事件都是很方便书写,直在template中书,例如@touchmove.prevent.stop

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项,来响应数据的变化。当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。

基于这个官方的理解再总结我个人的整体理解。给出computed和watch的总结,记住这几点的总结,在做项目的时候想想这些总结,选择你的应用方法

  • computed : 监听多个数据或者一个数据来维护返回一个状态值 ,只要其中一个或多个数据发生了变化,则会从新计算整个函数体,从新返回状态值。

  • watch : 只有一个一个监听据,只要这个数据发生变化,就会在返回两个参数,第一个是当前的值,第二个是变化前的值,每当变化的时候,则会触发函数体的里的逻辑行为,来进逻辑后续操作。

其实我觉得计算属性也好,computed,watch这几个都不是有多难,如果浅层面上看很容易理解,如果从深层面上看,很多小伙伴会存在什么问题,就是会滥用,混用,这些计算属性,虽然最后结果都能实现,就像条条大路通罗马,你走的是最远的路,想返回可能都难

我就举以上几个简单的例子,但是我想说的就是两点基础非常重要。

要如何结合三大牛B特性:

  1. computed vs watch
  2. v-for
  3. v-if v-else-if v-else
  4. template外层包裹模板

enter image description here

如果你看到这个需求,你花3分种时间如何去用以上三大特性做出两种解决方法你就是Vue精通者。

  1. 用v-for进行数据循环,用template包v-if 进行标红和排名标识。
  2. 用v-fot进行数据循环,用methods结合:class进行票红和排名标识。

我还是感觉第二个方便点。

如何去写组件,从什么地方开始写起,如果你对基础api已经了如指掌了,那你就可以开手动组件了,组件要学会利用几个组件的很大的特

作者正在撰写中...
隐藏内容 支付可见
内容互动
写评论
加载更多
评论文章
¥10 购买
× 订阅 Java 精选频道
¥ 元/月
订阅即可免费阅读所有精选内容