【Vue教程】01：入门前的概述：关于VUE那些事儿

从去年开始，在各大论坛技中，与 Vue.js 这一相关词语的内容爆炸式增长，在前端技术增速中独领风骚，迅速成为前端三巨头之一。记得在某个社区中有人这样介绍三巨头“来自 Google 的 Angular，来自 Facebook 的 React，来自开源社区的Vue.js”，Vue.js 的成功是大家有目共睹的。回顾前端框架的发展历程，2006年JQuery发布至今十一年过去了，它的辉光也随之过去了.

罗忠浩

6862人浏览 · 2019-01-16 11:24:21

罗忠浩 · 2019-01-16 11:24:21 发布

从去年开始，在各大论坛技中，与 Vue.js 这一相关词语的内容爆炸式增长，在前端技术增速中独领风骚，迅速成为前端三巨头之一。记得在某个社区中有人这样介绍三巨头“来自 Google 的 Angular，来自 Facebook 的 React，来自开源社区的Vue.js”，Vue.js 的成功是大家有目共睹的。

回顾前端框架的发展历程，2006年JQuery发布至今十一年过去了，它的辉光也随之过去了，当前版本的JQuery在未来不会再拥有曾经的地位，2012年之后随着W3C的推进一批新性质的框架出现了，他们一步一步占据了JQuery同时期框架的位置，许多框架就此在历史的长河中隐秘起来。

Vue.js 在2016年崛起，NG也发布了全新的版本2，前端的世界仿佛回到了东汉末年三国鼎立时期（RN, Vue.js ,NG）。前端这条路，一旦离开就不在容易回来跟上步伐，爆炸式的增长让我们不得不时刻准备着迎接新的一波潮流，未来怎么谁也不知道，但是现在，我相信 Vue.js 就是一把举世无双的利刃，能够帮助我们在前端的路上劈荆斩棘。

##Vue.js 及相关信息介绍

Vue.js 的创始人是国人尤雨溪。关于为什么开发这样一款框架，网上也有各种说法。

2012年初，36Kr有一篇文章对作者进行了相关报道，其中有这么一句话“Evan希望能通过这个举动引起科技公司的注意，向他伸出橄榄枝。”，并附上了作者的微博、Twitter与个人网站。作者的做法，我觉得大家应该借鉴，掌握好Vue.js，让你心仪的公司注意到你。

针对知乎上关于Vue.js的一个提问，尤雨溪的回答说出了最初的开发初衷，即“做 Vue.js 的初衷很单纯，不是为了赚大钱，不是为了成为大神，也不是因为我发现了什么不得了的创新点。我只是想做一个我自己会喜欢的框架。很巧，我把我想要的东西做出来以后，也有很多其他人喜欢，所以用户越来越多。我从没说过，也不认为 Vue.js 比所有其他框架都好（我一直的观点都是开发者偏好的多样性使得多框架/语言的共存有益无害，甚至是必要的）”

学习框架或者技术，希望大家不要带着主观意愿去评判。当在学习Vue.js的时候，网络上充斥着各种各样的帖子，很多帖子都在讲述 Vue.js 如何如何的差，哪里是抄袭的。我希望做程序开发的人都应该是理智的，不应该带着情绪去对待一个技术性的事物，尤其是他和你本身就不存在什么关联。有一句话叫做存在的既是合理的，如果他不合理，早晚会被时间淘汰掉，技术之间的替换更新是不可避免的，请不要因为你对于一门技术的热爱去诋毁另一门技术。

接触 Vue.js之前，我使用的是Angular。通过一段时间的使用，感觉 Vue.js 更加简单轻便，在中小型项目开发中比Angular可能更加适用，于是在后来的项目中我放弃了 Angular 转战 Vue.js。

基于深入的实战研发，特推出了该系列课程，且以实用为主，不会过多地深入讲解原理。主要面向已有前端开发基础的研发员。如果您缺少前端基础，可能在整体上会吃力许多。

##Angular、Vue.js、React 三者的区别

在之前的课程中，有多个读者提问关于Angular、Vue.js、React 三者的优劣，我觉得三者并不存在优劣，而是具有不同的特性，再次为大家分析下它们与 Vue.js 的一些共同与不同。

React 与 Vue.js 都采用虚拟 DOM，而且它们的核心功能都在核心库中，其他类似路由这样的功能则由其它库进行处理。

React 在我看来并非一个纯粹的 MVVM 框架，它有着一个庞大的生态系统，它比 Vue.js 优秀，因为它脱离了一般框架的范畴，但是 Vue.js 并非在它面前一无是处。事实上，Vue.js 在许多时候都是占据优势的，因为 Vue.js 较 React 而言要轻得多。React的整体都是由 JavaScript 功能来实现的，这对于一般的前端开发者而言，把 CSS/HTML 都融入 JavaScript 不是那么容易接受，而 Vue.js 则是基于传统的 Web 技术进行扩展，这无疑更能让用户接受。

Angular1 与 Angular2 在我看来并非同一个框架，他们在语法上与 Vue.js 几乎一致，所以很多人都说 Vue.js 是抄袭
Angular，对于这样的帖子看得太多，我认为就是 Vue.js 早期的思路，部分确实来源 Angular1，这样的问题也就不想过多阐述，仁者见仁智者见智。

Vue.js 在许多方面没有像 Angular 一样深入开发，但也保证了基础的功能完善。对于 Angular 的全面带来的庞大， Vue.js 选择了不同的方向， Vue.js 很多时候要比 Angular 快，还有对于 Angular 的脏检查机制带来的性能问题，这也是 Vue.js 不用去管的。

为什么选择 Vue.js

首先我们谈谈 Vue.js 的诸多优点。

1.不存在依赖关系；

2.轻便（25k min+gzip 72K min）；

3.适用范围广(大中小型项目，PC，移动端，混合开发)；

4.本土框架，社区非常活跃，对于国产的大家的热情度非常得高（主要还是东西本身好）；

5.学习成本低，语法升级平滑（Anguler1升级到2算得上新学一门语言了）；

6.双向数据绑定（所见即所得）；

7.语法简洁；

接下来，我们研究一些 Vue.js 的语法。

1.如何创建一个 Vue.js 实例。

var vm = new Vue({
  // 选项
})

就是这么简单，new一个Vue对象。

2.如何添加数据。

var vm = new Vue({
    data: {
        text:"这是文本！"
    }
})

简明扼要，容易读懂， Vue.js 的数据都存储在data中。

3.双向数据绑定的实现。

Anguler1实现数据双向绑定。

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <span>{{ inputData }}</span>
        <input type="text" ng-model="inputData ">
    </div>
</body>

<script>
var myModule = angular.module('myApp', []);
myModule.controller('myCtrl', ['$scopp', function($scope) {
    $scope.inputData = '';
]);
</script>

Vue.js实现数据双向绑定。

<body>
    <div id="app">
        <span>{{ inputData }}</span>
        <input type="text" v-model="inputData ">
    </div>
</body>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        inputData : ''
    }
})
</script>

对比Anguler1整体一致，Vue.js的更加简洁一些，v-model 将数据与 DOM 绑定，{{}}两个花括号将数据直接展示为文本，你修改 input框的内容，上面所展示的就会跟随改变，就是所谓的，所见即所得。

4.写一个简单的事件。

<div id="app">
<button v-on:click="inputData += 1">Add 1</button>
<p>The button above has been clicked {{ inputData }} times.</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            inputData : 0
        }
    })
</script>

每次点击 Add 1 下面展示的内容就会增加1，通过v-on:click来绑定点击事件，与原生的onclick效果一致，当然原生的onclick不支持上面的写法。你也可以选择将 click 绑定一个函数，像下面这个。

<div id="app">
<button v-on:click="addOne">Add 1</button>
<p>The button above has been clicked {{ inputData }} times.</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            inputData : 0
        },
        methods: {
           addOne:function () {
               this.inputData++
           }
        }
    })
</script>

函数的写法与原生只有名字顺序变化，但是其中有非常重要的一点，在 Vue.js 中的 this 与原生的 this 所指的并不相同，Vue.js 中的 this 指向的是 vm 这个 Vue.js 实例，在实例中调用 data 中的数据直接使用 this.Dataname 就可以了（dataName数据名）,调用函数也是相同的方法 this.functionName（functionName函数名），关于 this 还存在许多其他的注意，在后续的课程中会为大家讲解。methods 是在实例中用来存放函数的地方，写在 methods 中的函数都可以通过上述的this.functionName 调用，也可以在直接绑定在 DOM 元素上，直接 v-on:click=“functionName” 就绑定成功了。在实例vm中的el就是实例挂载的元素ID，要与上面DOM的ID保持一致，也就是说，你挂在哪个DOM上，你的实例作用范围就在这个DOM元素内。

当前前端开发在实际过程中对于浏览器的兼容要求不再像以往那么苛刻，IE8 及以下的版本已经被大多数人放弃， Vue.js 、Angular、React三者中只有 React 兼容 IE8。所以在我们工作中进行考虑的时候，其实浏览器兼容在大多数的项目中都没有苛刻的要求。

使用框架开展一个项目的时候，需要考虑哪些方面？

1.性能

如果一个网站在性能方面存在问题，它将会损失超过一半以上的用户。

对于框架性能你可以在网上查询到各类测试，你可以了解框架的代码结构、逻辑处理，判断是否能够满足你对性能的需求？

2.扩展性

对于一个需要长期维护的项目而言，经常会有各种各样的功能添加进来，这个时候扩展性就显得尤为重要，如果你在前期选择了一款满足前期的框架，但是如果后期你需要使用某个插件来完成某个功能，或者基于什么完成一个功能，这时候你发现网上并没有检索到相关内容，内心是否充满了心塞。

3.维护性

一个项目的生命周期不是三天两天，而前端的发展则是爆炸式的，在你选择框架的时候是否考虑过官方在后续的一段时间是否会一直对框架进行更新维护？如果不确定是否已经有了官方放弃维护后的解决方案？

4.兼容性

这里的兼容性指的不是浏览器兼容，而是框架与其他框架及工具的兼容，使用这个框架对于你的开发环境是否有影响，对于你的开发IDE是否有影响。

Vue.js 作为一款当前最流行的框架，在你选择它的时候其实以上内容都不需要你思考太多，很多过来人用他们的经验告诉你这是可行的。你只需要去判断，Vue.js 是否适合你的项目。

个人总结Vue.js 适用具有以下性质的项目：

一、对浏览器兼容要求不高，不需要兼容至ie6-8

二、SPA开发

三、对性能较高要求

四、组件化

总的来说，如果你是一个MVVM框架的新手，那么Vue.js 就是你最好的进阶工具，如果你是一个已经掌握了其他MVVM框架的老手，那你会发现Vue.js 会更加简单轻便。

Vue.js 是一款适合每个人的框架，个人看来它的适用范围在MVVM框架中是最广泛的。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^