前端vue系列-起始篇 vue的基本认知
hi,大家伙,我是佛系大大,很高兴与你们一起沟通,学习,进步。
很久不更新博客了,现在回来再写博客,尽然是有些怀念的感觉,幸福的感觉。因为写博客,内心会很宁静,沉浸在自己的世界中,是很幸福的一件事。当然,并非逃离现实(鸡毛蒜皮,工作糟心的凡事),佛系大大还是很上进的,让我们一起努力。
废话不多说了,我们开始吧!
首先介绍下,我是如何学习vue的,我学习vue之前,做过哪些思考?
1.vue技术刚出来的时候,我第一眼会问,vue是什么?这个框架要干嘛?
2.没有vue这个框架,我们之前是怎么做的,我们遇到了哪些糟心的问题?
3.怎么学习更有效呢,怎么快速掌握它,然后用它来干活?
当有了如上思考后,我们学习来就有的放矢,效率倍增了,比迷迷糊糊的学习要好至少10倍。大家先跟着我的思路走,最后可以自己总结,归纳,输出。
第一个问题:vue是什么?能做什么?
官网介绍vue是一个渐进式框架。怎么理解这个渐进式框架呢,经过自己理解和在网上查阅资料,个人简单理解是,一,你可以把他作为一个js库使用,就和我们引入jquery一样,用里面的一些功能;二 你可以在构建新的项目时全部都是用这个框架提供的功能来构建。用场景说明更好理解
场景1:
如果你的技术团队技术选型比较保守,没有新技术的使用场景,比如让你去维护一个管理后台。管理后台,日常就是提交各种表单了,这部分现有的方案,比如form表单提交或者jquery收集信息ajax提交。这时候你可以把vue 当成一个js库来使用,就用来收集form表单,和表单验证。
场景2:
在场景1中,你尝到了甜头。心中暗爽,还可以这么玩嘞。独乐乐不如众乐乐和大家分享之后,团队开始接受使用vue,小规模推广起来。打怪升级该遇小boss啦,领导说,小伙后台做的越来越有效率了,来承担些常规业务开发,来正规军编制和其他小伙伴一起做新闻列表和新闻详情页吧。
在这个项目中,你跟大胆一点把 整个页面的dom 用Vue 来管理,你发现jquery 没什么用了,列表用v-for来循环,把评论抽成小组件了。 评论交互比较复杂,但是你的关注点把原来jquery dom操作变成了关注数据的变化,用数据驱动DOM的变化。
场景3:
经历了场景1 场景2,越来越受大家信赖,领导又找你了。你看新闻项目你做的不错,移动站也得重构了,你做个移动端m站吧,正好微信和App分享出去用到。这时候,你需要在做移动端webapp了。 于是你由去了解 webpack vue-router,你发现前端 可以控制路由了。webpack,可以用于前端开发的工程构建。
场景4:
场景3之后你在技术团队大放异彩,公司越来越器重你。年末领导又来找你了,小伙砸,想不想拿年终奖啊,想的话给我做个新闻直播间吧。需求特别简单:就是滚动播报新闻,用户实时参与评论。有了场景3和之前的经验,发现稍微有点力不从心了,你和后端的接口沟通上越来越频繁,新闻直播间需要大量的数据在组件中共享数据,后来你发现了,vuex 处理数据在组件之间的流动得心应手。
场景5:
年终奖,拿到手了,过年回来升职加薪。带了20人的前端团队,你的精力开始在配合公司其他部门做用户数据增长了。发现场景2中你犯了个错误,虽然整个页面用Vue 管理 开发起来很方便,但是页面白屏时间长,而且类似这样的底层页对seo都不好。开始考虑使用 vue2.0的SSR。为了保障团队高质量的输出,你开始研究如何给 vm写单测...
场景1-5 从最初的只因多看你一眼而用了前端js库,一直到最后的大型项目解决方案。
第二个问题:没有vue的时候,我们单页面两种方式 1.使用iframe加载页面片段 2.使用ajax请求页面片段。两者共同问题是 里面的js逻辑不好处理,id名字重复,代码写的不规范。vue 则没有这种问题
第三个问题:1.边理解,边写代码,边看效果,在继续理解,然后写笔记,输出自己的理解。
vue 大多数情况下是用来开发单页面应用程序,并不是说只能开发单页面应用程序。
如果公司没有seo需求,都是可以使用vue进行系统构建。移动站点,后台管理系统特别适合用vue来开发。
前端vue系列-起始篇 vue的基本认知的更多相关文章
- VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)
一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
- VUE系列二:vue基础
一.组件嵌套 1. 新建一个组件Users.vue <template> <div class="users"> <ul> <li v-f ...
- OpenStack源码系列---起始篇
近一年来我负责公司云点的自动化部署工作,包括公司自有云平台方案.XenServer.vSphere.Ovirt和OpenStack的自动化安装部署,目前已经到了OpenStack这一部分.自动化部署首 ...
- vue.js学习系列-第一篇
VUE系列一 简介 vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Mode ...
- 2019前端面试系列——Vue面试题
Vue 双向绑定原理 mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter.getter,在数 ...
- 前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue
前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...
- 【技术博客】基于vue的前端快速开发(工具篇)
一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...
- 【vue系列之三】从一个vue-pdf-shower,说说vue组件和npm包
前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
随机推荐
- CSS层叠和继承
CSS具有两个核心的概念--继承和层叠.一般文本类的属性会被继承,即某个元素的CSS属性会传递给内部嵌套的元素.一个元素可能有一个或者多个样式的来源,当属性发生冲突时,就会根据加载顺序和权重大小决定层 ...
- sh 脚本执行sql文件传参数
一.前言 今天做数据删除,用的命令行输入参数,并且调用执行的sql文件,我采用了sed命令,进行替换. sh脚本如下 #! /bin/sh echo "Please enter the ba ...
- 常用的TCP选项
MSS选项:通知最大可接收量.发送SYN的TCP一端使用本选项通告对端它的最大分节大小(maximum segment size)即MSS,也就是它在本连接的每个TCP分节中愿意接受的最大数据量.发送 ...
- 20.QT-Qpixmap实现图片鼠标缩放,鼠标拖动示例(详解)
通过 QPainter 绘画实现,以本地图片985*740为例 如下图所示: 效果如下所示: 实现原理 主要通过以下函数实现: , ); //平铺显示pixmap //x y w h :表示绘画区域 ...
- 集成学习之Boosting —— AdaBoost原理
集成学习大致可分为两大类:Bagging和Boosting.Bagging一般使用强学习器,其个体学习器之间不存在强依赖关系,容易并行.Boosting则使用弱分类器,其个体学习器之间存在强依赖关系, ...
- Java 架构师眼中的 HTTP 协议
HTTP 协议的内容比较多,本文我们将分六部分来介绍. HTTP 协议的基本内容 什么是 HTTP 协议 首先我们来看协议是什么?协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守有规则的文 ...
- eclipse如何新建项目发布到git
1.首先去查询本地git仓库地址 2.找到项目位置 删除git版本 3.更换git提交目标地址 目标地址是新建的git仓库地址 4.提交
- nodejs模板加载的问题
JADE模板:http://jumplink.github.io/jade2html2jade/ HTML转JADE,跟imooc上一步步来就搞定了 直接加载HTML静态资源: var express ...
- JavaScript设计模式 Item 4 --继承
1.继承 在javascript中继承是一个非常复杂的话题,比其他任何面向对象语言的中的继承都复杂得多.在大多数其他面向对象语言中,继承一个类只需要使用一个关键字即可.与它们不同,在javascrip ...
- java 中 一个int类型的num,num&1
n&1 把n与1按位与,因为1除了最低位,其他位都为0,所以按位与结果取决于n最后一位,如果n最后一位是1,则结果为1.反之结果为0.(n&1)==1: 判断n最后一位是不是1(可能用 ...