Vue - 简介，安装，运行，以及目录结构

Mac上面Vue开发环境搭建：
(里面是先安装nodejs，再安装Vue)
https://www.cnblogs.com/richerdyoung/p/7199917.html

---

简介

渐进式JavaScript 框架。

特点：易用，灵活，高效。

是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注试图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方便，当与单文件组件和Vue生态心痛支持的库结合使用时，Vue也完全能够为复杂的单页应用程序提供驱动。
Vue就是Vue.js。

Vue.js 不支持 IE8 及其以下 IE 版本。

官方指南假设你已有 HTML、CSS 和 JavaScript 中级前端知识。

发起人：尤雨奚。
vue.js之初定位并不是想成为框架，通过发展，现在已经成为一个框架了。
是一个轻量级的MVVM前端框架。内容很小，gzip只有20+KB目前。
数据驱动+组件化的前端开发，数据驱动和组件化是vue的核心思想。
Github超过25k的star数，社区完善（Github,论坛,聊天室,Twitter）。

vue.js VS Angular.js VS react

vue.js，更轻量，gzip后只有26k，Angular（56k），react(44k)
vue.js 更容易上手，学习曲线平稳。Angular难学，颠覆了学习前端的思想，因为之初是由写java的人写的。这点react与Angular比起来稍微好一些，有一套js 语法，但是这些的学习也是一个挑战，而且react学习也会复制一些react全家桶，也是比较难学的。vue是最好学习的。
vue吸取了两者之长，借鉴了angular的指令和react的组件化。vue还有很多自己的特点，是这两家没有的。

vue.js的核心思想

数据驱动 + 组件化

数据驱动.png

ViewModel中有：DOM Listeners（监听） 和 Directives（指令）

View 对应的 DOM对象。
ViewModel是一个很好的设计，如果没有ViewModel，那么我们在View和Model之间的驱动是由手动触发DOM改变，是一个很繁琐的过程，而且容易出错，如果我们使用了ViewModel之后，就省略了手动操作的步骤了，在vue.js里面，我们我们只需要改变数据，vue.js只需通过Directives指令去对DOM做一层封装，当数据发生变化，就会通知指令去修改DOM,数据是DOM的一种自然映射。vuejs还会对操作左一层监听，当我们修改视图的时候，view.js会监听这些变化，从而改变Model。从而实现了双向绑定。
vue.js是如何做到这一点？
数据响应原理：
数据（model）改变驱动视图（view）自动更新。

图片.png

组件化：
目的：扩展HTML元素，封装可重用代码。

图片.png

左边是我们的页面，被拆分为很多小的区块，每个区块就对应一个组件，组件可以嵌套，最终组合形成一个完整的页面。在vue.js中，每个组件都对应一个ViewModel（右边的小块）。最终我们生产了右边的ViewModel的这个数状结构，与我们左边的DOM树就是一一对应的关系。
组件的设计原则：
页面上每个独立的可视/可交互区域都被视为一个组件。
比如我们的页面的头部，尾部，以及一些可复用的区块，都可以抽象成组件。
每个组件对应一个工程目录，组件所需要的各个组件在这个目录下就近维护。这个就提现了前端的工程化思想，为前端开发提供了很好的分支策略，每个开发者都清楚地知道自己所开发维护的功能单元，代码必然存在于自己的组件目录中，在这个目录中就可以清楚知道自己的功能的内部逻辑以及资源，样式也好，js也好，页面结构也好，都在里面。在vue.js中，可以通过.vue文件把组件依赖的模板，js，和样式都写在一个文件中，这个就把就近维护思想发挥到极致。
页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。

** vue.js 的安装**
方式：
1）独立版本（就是在Vue.js的官网上直接下载vue.min.js，并且用

3.在vue的style（css）中注释使用和css注释一样：

/*css的注释*/

Vue运行起来之后

我们在浏览器中看到：
这里有一个#，这个是代表路由，#后面可以跳转到不同的模块。

http://localhost:8080/#/