Vue、React、Angular,当今前端界的三驾马车,做为传统的后端程序员,前端不再是咱们想的那种切切图就能够了,第一次接触的话,先了解了解一些基础的概念。 php
学习系列目录地址:http://www.javashuo.com/article/p-bzzucmub-ba.htmlhtml
仓储地址:https://github.com/Lanesra712/VueTrial/blob/master/docs/Concept.md
前端
Vue (读音 /vjuː/,相似于 view) 是一套用于构建用户界面的渐进式框架,只关注于视图层。在Vue的官网中咱们能够看见,对于渐进式框架这个词,做者是加粗表示的,按照做者的设计,Vue包含了现代前端框架所必须的内容,可是你并不须要一开始就把全部的东西都用上,这些都是可选的。vue
对于Vue的解释,推荐简书上的一篇文章,文章地址:https://www.jianshu.com/p/a4339bad5256 node
在传统的前端开发中,为了完成某个任务,咱们须要使用 JS/Jquery 获取到元素的DOM元素,随后对获取到的DOM元素进行操做。而当咱们使用Vue进行前端开发后,对于DOM的全部操做所有交由Vue来处理,咱们只须要关注于业务代码的实现就能够了。webpack
3.一、使用 script 标签引用Vue.js(这里能够在Vue的官网上下载好js文件后使用标签引入,也可使用cdn的形式引入)git
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
3.二、使用 Vue-cli 构建单页应用(须要先在电脑中安装好node.js环境才可以使用)程序员
//一、全局安装Vue-Cli npm install -g vue-cli //2、进入建立项目目录下 //3、建立使用webpack模板的Vue单页应用,Enter后根据提示完成项目的建立 vue init webpack projectname //4、进入项目目录下 //5、下载项目引用的包 npm install //6、运行项目
npm run dev
PS:这里使用的是 vue-cli 的 2.x 版本,在最新的 vue-cli 3.x 版本中,包名已经发生了改变,你须要卸载原有的包以后从新安装 vue-cli 才能够,同时也可使用页面的形式配置项目了。github
1 //一、卸载原有的 vue-cli 版本 2 npm uninstall vue-cli -g 3 //二、安装新版本 vue-cli 4 npm install -g @vue/cli 5 //三、建立项目 6 vue create projectname 7 //三、使用页面建立 8 vue ui
4.一、MVC(Model-View-Controller):是一种表现模式(UI / Presentation Pattern),它将软件的UI部分的设计拆分红三个主要单元,分别是Model、View和Controller。MVC核心是控制器,它负责处理浏览器传送过来的全部请求,并决定要将什么内容响应给浏览器。web
Model:模型,用于存储数据的组件;
View:视图,根据Model数据进行内容展现的组件;
Controller:控制器,接受并处理用户指令,并返回内容
4.二、MVVM(Model-View-ViewModel):MVVM的核心是ViewModel,它提供了对于Model和ViewModel的双向数据绑定,经过ViewModel链接View和Model,确保视图与数据的一致性,而这个过程是框架自动完成的,无需手动干预。
图片版权说明:由Ugaya40 - 本身的做品,CC BY-SA 3.0,连接
这一章咱们主要学习了一些 vue 涉及到的一些概念,在后面的学习中,也会逐渐往本篇文章中里面添加用到的知识,文章开始处提供仓储地址里会将涉及到的知识点的汇总成一个markdown文档,但愿多多关注啊,嘻嘻。