Vue.js 从开始到入门(一)

（一）Vue.js 框架介绍

1.MVVM 框架

MVVM框架即 Model-View-ViewModel框架。
Model即数据，对应到前台就是JavaScript对象；View即视图，对应到前台就是DOM；ViewModel连接Model和View，在该框架中起到一个观察者的作用。

1.1 MVVM的应用场景

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

1.2 MVVM框架

Angular.js
react.js
vue.js

2.Vue.js

2.1 什么是vue.js?

1.Vue.js 是一个轻量级的MVVM框架
2.是一个数据驱动 + 组件化的前端开发
3. Github超过25k+的star数，社区完善

2.2 相对于Angular和react的优势

1.vue.js更轻量，gzip后只有26k
2.vue.js更容易上手，学习曲线平稳
3.借鉴了Angular的指令和react的组件化

3.Vue.js 核心思想

3.1 数据驱动

vue.js通过directives指令对DOM进行封装，当数据发生变化，会同hi指令去修改相应的DOM

DOM是数据的一种自然映射。
vue.js 还会对数据做一些监听，当我们修改DOM的时候，vue.js 监听到事件变化从而改变数据。这样就形成了数据的双向绑定。

数据响应原理
数据改变驱动视图更新

3.2 组件化

组件化的目的是扩展HTML元素，封装可重用的代码。
组件设计原则
1.页面上每个独立的可视/可交互区域视为一个组件。
2.每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护。
3.页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。

（二）Vue-cli 脚手架 搭建基本代码框架

1.vue-cli 安装

1.查看一下node的版本

2.安装vue-cli

安装成功

4.测试一下，在命令行输入vue

Usage：vue [options]告诉了我们用法。

5.输入 vue list 查看可用的模板

2. 创建一个新的项目

1.创建一个webpack的项目，在命令行输入 vue init webpack sellapp(文件名)

2.输入 cd sellapp,进入sellapp目录下
3.继续输入npm run dev，加载完成后进入http://localhost:8080
至此，项目创建完成。