学前须知

在讲这一小结之前，我先简单地介绍一下Vue.js这个东东，它是一个前端框架，也可以说成是一个JavaScript框架，有点类似于jQuery这样的js库，只不过它的功能更为强大。好了，现在回到主题，如果作为一个小白，要想快速入门Vue.js，那么得提前掌握哪些知识点呢？

下面这4个东东你是必须要会的，虽说作为一个Java后端开发程序员，下面这4个技术肯定是没有前端开发者掌握的那么熟练的，但是咱总该会个一两点吧！是不，只要别太过分就行！如果下面这4个技术您都不会那么一两点，那么还是劝退吧！您该干嘛干嘛去????

• HTML
• CSS
• JavaScript
• AJAX

其次，开发工具笔者选择的是这款VSCode，笔者对它还蛮熟悉的，因为我一直都在用它编写MarkDown文档，感觉特别好用。不过，要想更快速、更方便地学习Vue.js，你还得安装一些插件，比如像Live Server这款插件，它能够监测到文件代码的保存，然后自动刷新浏览器。至于如何在VSCode中安装Live Server插件，请参考我的这篇文章——《Vue.js快速入门番外篇——Live Server插件的简介、安装与使用》。

最后，我还得说一下，我是按照如下几个模块来快速入门Vue.js的。在这一讲，咱们来学习一下Vue.js的基础。

• Vue.js基础
• 本地应用
• 网络应用
• 综合应用

Vue.js基础

Vue.js简介

为了更好地认识Vue.js，我们可以从以下三个方面来入手。

先说第一个方面，Vue.js是一个JavaScript框架，类似于jQuery这样的js库，只不过它的功能更为强大，但是为了要使用它，必须得遵守一整套规则，不然是无法使用的。类似于你买了一台豆浆机，放入豆子就可以磨出豆浆，但是如果你放入螺丝，那是做不出螺蛳粉的，并且机器还有可能会损坏。用框架也是一样，必须得遵守它的使用规则，注意是必须哟！

再来说第二个方面，我们在之前实现很多网页效果的时候，套路都是获取元素，然后去操纵那些元素，通过操作DOM元素来实现不一样的网页效果，相信大伙应该深有体会。那么用Vue.js要如何来实现呢？我们只需要使用它提供的特殊语法，它便会自动地去操纵使用特殊语法修饰的DOM元素，基本上不用我们去人为地干这件事了。

最后说第三个方面，响应式的数据驱动这句话通俗一点来说就是页面是由数据来生成的，当数据改变以后，页面就会同步更新，但是这部分的内容我们需要结合代码才可以看出效果。

第一个Vue.js程序

如何跑起来第一个Vue.js程序呢？步骤其实非常的少，只需要三步，但是去哪儿找这些步骤呢？这是一个问题。

其实入门一个框架或者获得使用，没有什么比官方文档更好的选择了，也许你曾经被英文的文档劝退过，那么我可以开心地告诉你，Vue.js官方文档对于中文的支持非常地友好，毕竟作者尤雨溪就是中国人，大神就是下面这位。

官网的地址是这一个，https://cn.vuejs.org，大伙可以把它收藏到你的收藏夹中，它会是你学习Vue.js的好帮手。

接下来，我们就进入到Vue.js的官网去看一下。

点击上图中的起步按钮，就可以看到Vue.js的官方文档了。