【Vue教程】Vue.js推文

为什么前端工程师的需求这么大

我国手机用户超过13亿，活跃智能机用户超过23亿部，全国网民人数约7.51亿。这么多人，每天都有几十分钟或者几个小时，要使用手机上网。全体中国人一年消费的网页和 App 的数量，是一个天文数字。

知乎上有人问，为什么前端那么火。

置顶的回答是：

上天入地，无所不能！
可以开发服务器、API，当服务端工程师
可以开发移动应用，当移动应用工程师
可以开发桌面应用，当桌面应用工程师
可以开发游戏，当游戏开发工程师
可以搞设计、搞原型，当交互设计师
可以搞嵌入式开发，做嵌入式开发工程师 
可以做硬件开发，做硬件工程师
前端的广阔，超乎想象

你们公司可能有PHP，可能有JAVA，他们都是可能。

你们公司肯定有前端。

一个是庞大的刚需，一个是极强的适应力。

所以前端的火是必然的。

对于前端而言，市面上有许许多多的框架/库，在之前的chat中，我把前端框架/库分为三类：

1、CSS框架/库

2、JavaScript框架/库

3、纯插件类框架/库

其中JavaScript框架/库是一般项目中的核心，而在前端框架TOP100中，前五就有三个MVVM框架，可以这样说，如果你不掌握一门MVVM框架，你在当前的前端市场中很难立足。

在趋于数据化的今天，MVVM框架凭借其对于数据处理的优势称霸前端。

前端市场就如同东汉末年，群雄并起，逐鹿中原。

经过各种框架的崛起与衰落，各种版本替换，各种磨合，2016年开始，React、AngularJS 、Vue.js三者三分天下，形成三足鼎立的姿态。

在GitHub上，来源于Facebook的React获得了85225颗★，来源于Google的AngularJS 获得了31779颗★，来源于尤雨溪的Vue.js获得了79146颗★。

在前端TOP100的热门排行榜中React占据第二、Vue.js占据第三、AngularJS 占据第五。在趋势排行榜中Vue.js占据第二、React占据第四、而AngularJS 失去了踪迹。

我从来不掩饰对Vue.js的推崇，近两年Vue.js的崛起最为凶猛?。

当你推崇一个框架，描述它的好的时候，总会有人发出质疑声，拿其他框架来比较。

有人告诉我，React比Vue.js好，有人告诉我，Vue.js是抄袭的AngularJS 。

React的优秀，不用和Vue.js做比较，了解的人都知道，大部分的市场需要的是谁。

而AngularJS ，我想上面的数据也能说明问题。

2018年，前端市场的发展没有谁知道会怎么样，但是没有人会妨碍其他人发表自己的看法。来自我对国内前端2018年发展的看法，今年Vue.js会加大与其他框架之间的差距，占据大半个前端市场。AngularJS 的市场份额将被餐食，不再是霸主的存在。React会根据它的独特性进行发展，与Vue.js不会存在直接的竞争，二者对于的适用人群会直接区别。

2018年Vue.js将登顶。

什么是Vue.js，为什么用Vue.js，或者说Vue.js适合什么样的业务。

如果说谁最了解Vue.js，那么肯定是尤雨溪了，两年前他是这样介绍Vue.js的：

Vue.js 是一个用来开发 web 界面的前端库。它也有配套的周边工具。如果把这些东西都算在一起，那么你也可以叫它一个『前端框架』。

从2014 年 2 月第一次发布，到2016年的2.0的发布，两年过去了，Vue.js JS已经成为了一个成功的前端款框。

Vue.js 2.X

当前Vue.js的最新版本为2.5.13，在Vue.js 2.0之后的版本中，更新并没有对整个框架做根本的改变。
让我们来看看Vue.js 为我们提供了什么。

基于 HTML 的模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

双向数据绑定

单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。

有单向绑定，就有双向绑定。如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。

在Vue.js实例中，我们使用v-model指令绑定到input上，当你在改变input的时候，v-model所对应的变量也会跟随变化

<div id="app">
    <input v-model="msg">
    <p>{{msg}}</p>
</div>
var vm = new Vue({
        el: '#app',
        data: {
            msg: ''
        }
    });

当你在input中输入的时候，p标签中的文本将会自动随着你的输入而改变。

条件渲染及列表渲染

条件渲染，通过在html中的v-if指令进行判断，决定是否将模块进行渲染。

列表渲染，通过在html中的v-for指令渲染出数据不同样式一样的模块。

事件处理

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

组件化开发

组件的定义：

组件（Component）是对数据和方法的简单封装。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。使用组件可以实现拖放式编程、快速的属性处理以及真正的面向对象的设计。

Vue.js 中的组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。

组件的优势：

1、代码复用性。对于一个项目而言许多功能都是重复或者相似的，对于这部分内容而言，组件无意识最友好的，通过使用组件开发，你可以省去大量的重复代码，提高代码的可复用性。

2、宜维护性。当你的项目中出现了问题，如何在庞大的项目中来解决这些问题，更新你的内容？如果组件化开发，你的问题所在，都是清晰的在各个组件中的，只需要按组件排查解决。

3、内聚性。一个组件完成一个功能，不与外部产生过多依靠。

4、低耦合性。与内聚性关联，组件都是独立的，所以不会相互之间影响，当某个组件出现问题的时候不会造成所有内容都失效。

要注册一个全局组件，可以使用 Vue.component(tagName, options)。例如：

Vue.component('my-component', {
  // 选项
})

对于刚接触MVVM框架的人而言当，学习Vue.js的时候，首先需要踏踏实实的看教程，完整的教程，而不是单篇内容的教程，你需要对整个框架有认识，再去针对某些点进行单篇学习。