vue学习（白话功能版）

注：此篇文章是用大白话说明vue的功能，实际实现代码不多，目的是让读者了解该框架的思想功能，若想看具体代码实现，请看vue学习（代码实践版）

chapter 1 vue的产生

说到vue，就不得不说angular。

最开始，谷歌大团队前端代码写得很混乱，不同的团队写的代码风格不一样，html、css、js混着写，写的项目换个人就看不懂了，更别提给它复用开发了。为了解决这个问题，在谷歌工作的Hevery开发出了angular框架，名字取自html的标签尖括号（angle brackets）。他给出的解决方案是把混乱的程序分一分，同类的放一起，并且以后就按这个分类来，程序就很清晰了。也就是通过模块化程序，来消除混乱。这个模块化思想深深影响到了后续其他前端框架的开发。

后面，尤雨溪也来到谷歌工作，艺术出身的他，觉得angular好复杂好难啊，要学好多好多东西，难道就不能简化一下吗？于是他决定开发一种前端框架，更简洁明了，更容易上手。顺便说一句，笔者最开始对前端一无所知，也没人带，居然也能用vue框架写成项目，说明这个vue真是绝好。

chapter 2 vue的功能使用

接下来，我会用白话说明vue的各项功能。

vue是一种前端框架。前端框架是什么？打比方的话，前端框架就是装修中的全屋定制团队。没有这些前端框架，就好比你从0到1装修毛坯房，要去市场买每块砖、每个材料，还要去计算水电布局...这些又麻烦又容易出错。有了前端框架，就好比有了全屋定制团队，他们有固定的装修模板，你只用选自己喜欢的家具、布局就OK了。页面之所以写着麻烦，就是因为html是为静态文本设立的，咱们要写动态网站只能写很多复杂的交互代码，实在是琐碎繁杂。

好了，我们要建造项目了，首先要把装修团队vue请来。vue在哪呢，在一个全球共享仓库。这个仓库放满了卧龙凤雏，全是前人写的js源码，你可以下载下来复制别人的源码，就不用自己写某个功能了，当然你也可以把自己写的上传上去，供他人使用。这个仓库的地址是https://registry.npmjs.org/，用该仓库的管理器下载

npm install vue
//npm 安装 vue

npm就是该仓库的管理器，关于npm的内容在另一篇博文看。

那怎么用vue呢？众所周知，vue是一个类，一个提前定义好的类。类就是个图纸，用这个图纸造出来的东西叫实例（实际例子，怎么取了这样的名字，要我说应该叫实物）。图纸虽然规定了功能结构，但却不可以直接用，用图纸造出来的实物才能用。所以，我们先造个实物出来。

var vm = new Vue({
  
})
//变量 vm = 新建的 vue 实例

好啦，咱们新建的vue实物出来了，我把它装在了变量vm里，以后提到vm，就是指咱们新建的vue实物。放变量里挺好的，以后用的话可以直接直呼其名了。

在官网中可以看到将vm称呼为根实例，为啥叫根呢，是由于vue的设计思想决定的。vue是由很多小组件组成的，这些组件嵌套在一起，像一棵树一样，而我们建造的这个实例，就是这棵树的根节点。

未完待续......