一、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 条评论
登录 后参与评论

相关文章

来自专栏Flutter入门到实战

跨平台开发框架和工具集锦

本文版权归作者AWeiLoveAndroid所有,未经授权,严禁私自转载。转载请声明原文链接和作者信息。

3023
来自专栏罗超频道

记住微信这个特殊功能,关键时刻将派上大用场

前些天,我的iPhone出现了卡顿现象,在使用微信时,总提示存储空间不够,必须清理。去设置里面查了一下,发现微信“吃”掉了大部分存储空间,高达几个GB,而我的手...

4247
来自专栏更流畅、简洁的软件开发方式

我写项目的思路和“自然架构”

我写项目的思路     三层的思路是要把页面(UI、数据显示)、业务逻辑、数据处理(也叫持久化)分离开来处理,思路自然是好的,但是一到了实际应用中,好多人...

2009
来自专栏玉树芝兰

Markdown两键排版微信公众号文章

前些日子,我写了一篇《Markdown懒办法排版微信公众号文章》,很受读者欢迎。简书平台上该文的统计数据如下:

1091
来自专栏大数据挖掘DT机器学习

用 Python 来刷微信「跳一跳」游戏的记录

本文代码在公众号 datadw 里 回复 跳一跳 即可获取。 微信小程序的游戏 —— 跳一跳,可以说是火爆了所有的微信好友圈。甚至比五六年前的飞机大战游戏都...

3817
来自专栏全栈工程师成长之路

网站项目开发学习手册

3996
来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(三):iOS 技术 (上)

1586
来自专栏用户2442861的专栏

前端工程——基础篇

https://github.com/fouber/blog/issues/10#issuecomment-271133674

651
来自专栏雪胖纸的玩蛇日常

Vue+Django2.0 REST framework 打造前后端分离的生鲜电商项目(四)restful和前端源码介绍

6338
来自专栏顶级程序员

2016年你应该学习的语言和框架

2015年,软件开发界发生了很多变化。有很多流行的新语言发布了,也有很多重要的框架和工具发布了新版本。下面有一个我们觉得最重要的简短清单,同时也有我们觉得值得你...

37214

扫码关注云+社区