Vue.js零基础学习笔记（一、二章Vue介绍）

作为一个iOS开发从业者，前段时间因为公司的需求刚刚学习并开发完成一个属于前端开发工程师的任务-微信小程序（因为公司规模较小，人员配置不完全，十分无奈），深有感慨。对于移动端原生开发的iOS，Android的双端开发，中小型公司为了节约开发成本，必然青睐于跨平台的移动端应用。不管是React Native还是腾讯的微信小程序亦或者阿里的weex等基于JavaScript和HTML5为开发基础的开发模式，都为初期创业者打开了一扇新的大门。作为一个底层程序员，为了顺应时代潮流，不断学习和累积自己的开发经验，说通俗点就是为了自己的饭碗（iOS开发应聘竞争激烈，人员众多，都是泪点），只好在不断加深本身职业（iOS开发)开发经验的同时，学习拓展新的知识。究竟是一门心思的研究自己本身职业，提高开发水平，还是多学习一些其他的开发知识，十分苦恼。我并不知道自己的选择对不对，但是学习这件事本身并没有对错，所以不管其他，先学吧。
Vuejs是前端开发框架，使用MVVM框架，数据驱动，具有组件化，轻量，简洁，高效等优点。本人有点HTML和CSS的基础知识，然而并不精通，学习并开发过一段时间的微信小程序，以此为敲门砖，拓展前端开发知识，简单说起来，基本属于零基础学习。
第一章简介

前置知识：javaScript，Html，Css基础和开发经验，VUE.js的进阶课程，需要掌握vue.js基础一定掌握。ES6开发

1.VUE优点：MVVM框架，数据驱动，组件化，轻量，简洁，高效

2.项目：需求分析，脚手架工具，数据mock，架构设计，代码编写，自测，编译打包

3.代码：代码开发及测试环节，3.1.1UI标注3.1.2真实数据演示
代码规范：3.2.1.架构设计，3.2.2.组件抽象，3.2.3.模块拆分 3.2.4.代码风格统一 3.2.5.JS变量命名规范 6.CSS代码规范

4.功能技术分析
4.1使用Vue-resource和后端做数据交互，
Vue-router做前端路由，实现单页应用，
第三方js库better-scroll 列表滚动实现，
最大程度组件化：实现组件复用。
html5的localstorage存储浏览器端（数据存储？）
图标字体的使用，移动端1像素边框，css stiky footer布局，felx弹性布局

第二章：课程安排
掌握Vue.js在实战中的运用 Vue.js入门基础
学会使用Vue.js完整地开发移动端App
学会组件化，模块化的开发方式

学习内容
Vue.js框架介绍
Vue-cli脚手架 搭建基本代码框架
Vue-router官方插件管理路由
Vue-resource Ajax通信
Webpack 构建工具
es6+eslint selint:es6代码风格检查工具

工程化，组件化，模块化
移动端常用开发技巧：flex弹性布局，Css stickyfooter 酷炫的交互设计

2.1Vue.js介绍-近年来前端开发趋势
旧浏览器逐渐淘汰，移动端需求增加
IE6-IE8 不支持ES5特性
IE9+ Chrome，safari，firefox对ES5完全支持

前端交互越来越多，功能越来越复杂
高大上的技术库和框架，酷炫的运营活动页面，H5小游戏
架构从传统的后台MVC向REST API+ 前端MV*迁移

MV*包括了MVC,MVP,MVVM（vue.js属于）

2.2Vue.js介绍-MVVM框架

View ViewModel Model
视图 通讯 数据
DOM 观察者 JavaScript对象

应用场景：针对具有复杂交互逻辑的前端应用
提供基础的架构抽象
通过Ajax数据持久化，保证前端用户体验

MVVM框架：Angular.js react.js vue.js

2.3Vue.js介绍-什么事vue.js及Vue.js生态
2014年初开源，起初vue定位是个视图容器并不是框架
它是一个轻量级MVVM框架
数据驱动+组件化的前端开发
github 超过25K+的star数，社区完善

2.4Vue.js介绍-对比Angular,React
前端技术选型
参考：
社区如何很重要
Vue.js更轻量，gzip后大小只有20K+
Vue.js更容易学习，学习曲线平稳
Angular，Java后端思想偏高

吸收了两家之长，借鉴了angular的指令和react的组件化

2.5Vue.js介绍-Vue.js核心思想
数据驱动，组件化
Dom是数据的一种自然映射

数据响应原理

组件化

组件设计原则

页面上每个独立的可视/可交互区域视为一个组件
每个组件对应一个工程目录，组件所需要的各种资源再这个目录下就近维护

页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面