一、VueJs 填坑日记之基础概念知识解释

概述 在最开始听说vuejs这个词是在2016年,当时天真的认为自己是个后端开发工程师不需要学习太多的前端知识,不过紧接着在2017年在公司就用到了vuejs。对于初学者(尤其是干后端的初学者)来说,刚接触时,有好多思路都很难理解。

本来写这一系列博客,只是为了记录自己在这一段时间学习vuejs的成果。如果有何纰漏请大家多多理解,不喜勿喷…

再说,在目前互联网的调整发展情况下,javascript更是在快速的更新迭代,如今对前端工程师来说,需要会的不只有css+div,js+jq了。近年来,javascript各界大神也发布了很多优秀的框架,如安哥拉(angularjs),Reactjs等。而vuejs更是由国人大神【尤雨溪(Evan You)】主导开发并得到了业界认可的优秀框架。

因此,综合上述种种,本人决定以该系列博客来记录自己的学习过程及问题,在写作时由于本人方案功底薄弱,写的不好希望大家多多见谅。在学习时,参考了另一篇特别好的博客,以下有些内容也借鉴而来,忠心感谢FungLeo,是你们无私的奉献,才让我们有了学习的参考,以下是地址: http://blog.csdn.net/fungleo/article/details/77575077

基本理念 本文将通过vue-cli+axois+amaze ui+jquery来搭建一个小型的后台管理系统,数据来源使用cnode.js 的公开 api接口。由于该项目属于小型项目,所以不涉及vuex等知识。

前后端分离开发模式 在N年前,我们开发web项目的流程是: 1、设计师设计页面 2、美工将设计稿通过css+div切片成html的页面 3、后端工程师拿切好的html页面 在这种开发模式上有明显的缺点,就是页面出现哪怕只是特别小的问题或是修改很小的功能,也需要前后端工程互相协调开发。对后端工程师来说,并不能更专注的去实现业务逻辑。 所以近年出现在前后端分离开发模式,如下: 1、设计师设计页面 2、前端、后端、测试等其它开发人员约定接口规范(形成接口文档) 3、前端工程师按接口文档来开发前端(前期可模拟接口返回的数据模型)来进行前端的开发 4、后端工程师按接口文档开开发相应接口 与几年前相比,对前端工程师的要求无疑提高了很多,如如何调用接口等。对后端工程师来说却可以更专注的实现业务逻辑。

时代在发展,困难如弹簧,你强它就弱,你弱它就强。所以为了不被时代所淘汰,努力吧!

单页应用程序(SPA) 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 要想更好的学习SPA,需要大家先了解一下锚点链接: HTML中的链接,正确的说法应该称作"锚点",它命名锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页,通过点击命名锚点,不仅让我们能指向文档,还能指向页面里的特定段落,更能当作"精准链接"的便利工具,让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时,标记锚点是最佳的方法。 更多关于锚点链接的解释请参见: https://baike.baidu.com/item/%E9%94%9A%E7%82%B9%E9%93%BE%E6%8E%A5/7472012?fr=aladdin 为什么要用锚点链接,原因是锚点链接并不会使页面进行跳转或刷新。以我们的 vue 项目为例,它的本地 url 结构一般为以下格式: http://localhost:8080/#/Inbox 可以明显的看到我们所谓的路由地址是在 # 号后面的,也就是利用了锚点的特性。

RESTful 风格接口 URI表示资源的两种方式:资源集合、单个资源。如下: 资源集合: /zoos //所有动物园 /zoos/1/animals //id为1的动物园中的所有动物 单个资源: /zoos/1 //id为1的动物园 /zoos/1;2;3 //id为1,2,3的动物园 更多关于RESTful 风格接口的解释请参见: http://blog.csdn.net/yue7603835/article/details/52536497

VUE是什么? 目前业界主流的前端三大框架:angular、react、vue,目前angular正处于新旧交替所以不选择,剩下的两个都非常优秀,但是vue的学习成本要比react低好多。同样都优秀的框架,我们选择vue,只因为两个字“简单”。

vuejs是一个前端框架,并不只是官网下载下来的一个vue.js文件。官方的解释: Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。 如果你是有经验的前端开发者,想知道 Vue.js 与其它库/框架的区别,查看对比其它框架。 更多关于vuejs的解释请参见: https://cn.vuejs.org/v2/guide/

在上面提到了Vue的核心库,我们来看一下都有哪些核心库,如下: 1、vue.js 核心,不解释。 2、VueRouter2 实现路由组织工具。 3、webpack 项目打包以及编译工具。 4、nodejs 前端开发环境。 5、npm 前端包管理器。 6、axios ajax 接口请求工具。 7、sass-loader 和 node-sass css 预处理。 8、element 基于 vue 的后台组件库。 9、iview 基于 vue 的另一套后台组件库。 10、vue-cli vue 项目脚手架。一键安装 vue 全家桶的工具。

命令行的重要性 在学习vue时,我们会经常用到一些命令,如npm install、npm run dev等,这是vue-cli对我们提供的一些命令,现在的前端,不会点命令出去找工作都不好意思说自己是前端了。希望在初学vue或其它前端框架时,不要抵触命令行,因为它 1、更好 2、更快 3、更强 4、更装逼

第一篇文章,基本没有代码,接下来我们就要开始慢慢的揭露vue神秘的面纱了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PPV课数据科学社区

【工具】手把手教你用R制作词云

? 看着别人做的词云,觉得做设计素材特别好,就在网上扒拉一下,看有没有合适大众一起玩的工具,公认为国外的tagxedo制作词云是最简洁方便和模板最多的。点击t...

34110
来自专栏编程

可移植的 C+标准库 Boost 发布 1.66.0,新增 HTTP 库

来自:开源中国社区 链接:oschina.net/news/91666/boost-1-66-0-released 可移植的 C++ 标准库 Boost 发布了...

2478
来自专栏金融民工小曾

5分钟轻松上手MARKDOWN

今天在有道云笔记上研究如何排版,发现有MARKDOWN这个好东西,真是孤陋寡闻了。上网百度了一下教程,貌似是个标记语言,不过这难不倒我这个作为程序员出生的人,说...

1172
来自专栏生信技能树

ID转换大全

实际上掌握了编程的思维,任何一门语言都可以做id转换! 对于初学者来说,这个是非常实用的一个,很多人当初就是因为要做这个转换,才慢慢走入了编程的道路。 使用大部...

3216
来自专栏无原型不设计

不能错过的Sketch实用新技巧和资源集锦

Sketch是一款基于Mac的矢量绘图应用。面对着功能复杂繁琐的photoshop,Sketch相比较而言身轻如燕。最近也掀起了用Sketch设计产品原型的热...

2737
来自专栏SEO

「知识」从另一个角度看待锚文本

2799
来自专栏花叔的专栏

小程序支持跳转网页会带来什么影响

11月2日,iphone X 发售的前一晚,微信小程序发布了一个重量级的更新: 小程序内嵌网页能力开发 使用教程很简单: 到mp.weixin.qq.com登录...

42412
来自专栏我的博客

新手制作的IOS系统声音监听程序

原因:今天公司需要使用一个系统声音,但是iphone声音太多了,于是就想到使用一个简单的程序,算是我第一个IOS程序吧~ 参看这里:http://iphoned...

2868
来自专栏开源优测

Python3接口测试pdf+源码免费领取

https://pan.baidu.com/s/19mVT4VQrVyRYr4g5wF1rYQ

1057
来自专栏phodal

最流行的编程语言JavaScript能做什么?

首先很遗憾的一点是,“PHP虽然是最好的语言”,但是它不是最流行的语言。 ? 对不起的还有刚刚在4月TIOBE编程语言排行榜上榜的各个语言: ? 你们都很棒,...

2048

扫码关注云+社区