Vue 介绍

Vue 介绍

官方文档：https://cn.vuejs.org/v2/guide/

简介

• Vue.js（后面简称 Vue）是国人开发的，用于 Web 前端开发，可以做 UI、界面路由等，利用插件还可以实现 HTTP 请求等更加丰富的功能
• Vue 比较轻量，而且使用简单，上手很容易，同时功能也很丰富
• 目前感觉开发大型前端项目可能比较费力，当然也很可能是我目前应用经验不足，认知有限

与其它常见框架/工具/名词的关系

后记：写完这段后才发现文字太多了，这些和学习 Vue 没啥太大关系，所以，可以不看……

• Node.js 是一个 Javascript 独立运行环境，可以理解成一个 Javascript 解释器，就像 Python 语言和 Python 的运行环境一样。不过 Node.js 也不仅仅是个运行环境，他还包含了丰富的类库，而且总能以最快的速度支持最新的 Javascript 标准。Node.js 目前基本上可以完成像 Java、Python 等能干的所有事情了。浏览器中不会支持 Node.js 的这些类库。这玩意和 Vue 没啥直接联系，不是一个层面的。
• npm 是一个 Node.js 下的工具，性质有点像 Python 的 pip，或者 Java 的 Maven，不过 npm 可以指定将某个库安装到系统、还是安装给当前用户、甚至只安装给当前的项目。
• webpack 可以理解成是一个发布工具，类似 Maven 的 mvn package 指令。在这个过程中可以自定义很多处理过程，比如将 js 脚本混淆之类的。Vue 的单文件组件（就是.vue 文件）就可以通过 webpack 来实现，如果不用 webpack，我们就得把组件写到 js 代码里，这样看上去会比较乱。类似 webpack 的工具，还有 browserify。另外，还有一些功能上有些重合的工具，比如 gulp/grunt 等，还有百度开发的 FIS，这个圈子有点乱，我经验也不多，所以大家想有更多了解的话还是自己查些资料吧，别被我误导。
• AngularJS 和 React，这两个和 Vue 是同一类东西了。AngularJS 是 Google 出品，一般简称为 Angular，目前的主流应该是 Angular2；React 是 Facebook 出品，这两个看上去都比较复杂，我没有尝试过。
• ECMAScript 是 Javascript 语言的核心，是由 ECMA 这个组织维护的。我们可能平时会见到 ES5、ES6 这样的字眼，这指的就是 ECMAScript 的第 5 和第 6 个版本。这就有点像 C++ 有个标准委员会在制定 C++ 的标准一样。Node.js 最新的版本对 ES6 的支持度是很高的。各浏览器对 ES 标准的支持情况可以参考这里，顺便说一句，由于 IE 支持跟不上，所以很多新版 ES 的特性在平时开发时都不得不放弃使用。其实我们还经常看到 ES2015 这个词，这都是不同版本的标准而已，要是想了解这些标准更详细的历史，可以参考 http://es6.ruanyifeng.com/#docs/intro。Vue 只是个工具，所以和 ES 版本的关系不是很大。
• jQuery 和 Vue 相比，灵活性更大一些，看上去会更底层一点，可以直接操作 DOM，但由于 Vue 在内部处理时很多时候也要直接操作 DOM，所以，jQuery 与 Vue 如果同时使用的话，经常会有一些奇怪的现象发生，因此，不建议这两个东西同时使用。如果非要同时使用的话，一般来讲，要先初始化 Vue，再使用 jQuery，尤其是很多基于 jQuery 的组件（比如我们用到的 daterangepicker、EChart），如果在 Vue 之前初始化，很可能被后续的 Vue 操作影响。

开始介绍 Vue

• Vue 官方文档其实介绍得很好，我就是看官方文档入门的，不过我现在要是照着官方文档读一遍就太没意思了，所以，我以我的角度再来介绍一下吧。
• 我介绍的内容比较肤浅，以应用为主要目的，对 Vue 内部的运行机制说得比较少，所以，大家如果想深入学习，请移步到官网。
• 配套工程代码在这里下载，或是 SVN 目录：/server/demos/vue-demo
• Vue 有很多的插件可以使用，可以参考 https://github.com/vuejs/awesome-vue，后文中用到的 Vue-resource，就是这其中的一个。这些插件构成了 Vue 的生态系统。

最简单的例子

• 实例文件：basic.html

这个例子主要完成的功能：

• 引入 Vue
• 初始化 Vue 对象
• 模板信息显示
• 修改 Vue 成员

表单

• 实例文件：input.html

这个例子主要完成的功能：

• 将 Vue 成员绑定到表单控件
• 表单控件到 Vue 成员的双向绑定
• 不同控件双向绑定的效果

条件渲染

• 实例文件：if.html

这个例子主要完成的功能：

• v-show 的效果
• v-if 的效果
• "if-else"语法

v-show 与 v-if 指令区别，在于 v-show 只是控制了元素的 display 属性，而元素本身无论是否显示，都存在于 DOM 序列中；v-if 指令则控制元素是否存在，而不是要不要显示。

列表渲染

• 实例文件：for.html

这个例子主要完成的功能：

• 循环获取列表中每一个对象
• 获取列表中对象时，同时获取数组下标

样式绑定

• 实例文件：style.html

这个例子主要完成的功能：

• 以字典的方式绑定 Style 属性
• 以字典的方式绑定 Class 属性
• 以数组方式绑定 Style 或 Class 属性

方法、计算属性、观察者

• 实例文件：methods.html

这个例子主要完成的功能：

• 方法是如何定义和使用的
• 计算属性是如何定义和使用的
• 观察者是如何定义和使用的

方法和计算属性的区别，在于方法每次都会被执行，而计算属性会被缓存，直到成员值被改变。这一点可以通过控制台来做测试

事件绑定

• 实例文件：event.html

这个例子主要完成的功能：

• 事件绑定的语法

请求远程数据

• 实例文件：remote.html

这个例子主要完成的功能：

• 通过 vue-resource 请求远程数据，并将数据赋给 vue 对象

vue-resource 是一个第三方的 Vue 库，用来进行 HTTP 请求，使用方法可以参考官网介绍

一个较为完成的例子

• 实例文件：full-eg.html

这个例子综合使用了上述很多的技巧，使用很少的代码就实现了平时开发中常见的列表页功能，开发速度快到飞起！