01. Vue.js 基础---初识Vue

记得刚开始学习Vue是为了做毕业项目，那时没有好好去深入了解，现在公司项目正好需要使用Vue，趁着这个机会，深入了解一下当下这个比较热门的框架，顺便记录下来，供后面查看，并分享给大家，一起学习。有哪里写的不好、写错的地方，欢迎大家给我纠正，给我留言，给我私信。

---

1. 前端流行的三大框架？

当前前端最流行的三大框架，莫过于Vue.js、React.js、Angular.js。他们各自都很有特点，Vue.js 应该是目前最火的一个框架，而React.js是现在最流行的一个框架，Angular.js 它入门很容易，但深入后概念很多, 学习中较难理解，并且文档例子非常少, 官方的文档基本只写了api。下面我通过几张招聘截图，让大家大概了解一下现在的前端招聘趋势。

2. Vue.js是什么？ 为什么要学Vue.js？

是什么？

• Vue是一套用于构建用户界面的 渐进式框架，用于开发交互式Web界面。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，可以很容易地集成到大型项目中。

为什么要写学？

• 前面说过，Vue目前最流行三大框架中最火的，在GitHub上star数可以看出来，并且现在的前端招聘Vue是必要的一个技能，这些足够让你要好好学习Vue。
• Vue.js 相比较 Angularjs 和 ReactJS，一直以轻量级，易上手称道。MVVM 的开发模式也使前端从原先的 DOM 操作中解放出来，我们不再需要在维护视图和数据的统一上花大量的时间，只需要关注于 data 的变化，代码变得更加容易维护。
  
  
  

3. 学习Vue.js前需掌握的知识点？

学习Vue并不需要你具备其他类似于Angular、React，甚至是jQuery的经验，但必须熟悉HTML、CSS、JavaScript。如果还了解下面内容那对你学习Vue将帮助很大：

• Node.js
  Node (官网: http://nodejs.cn/) 是一个让 JavaScript 运行在服务端的开发平台，使用JavaScript也可以开发后台服务。我们使用Vue开发项目就必须要安装node.js。相当于后端Java web项目需要tomcat。

• NPM
  npm (官网: https://www.npmjs.com) 是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题，他已经成了 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制。后端web项目有maven管理包依赖。

• Vue CLI
  vue-cli (官网: https://cli.vuejs.org/zh/) 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。简单的说，就是我们使用vue-cli可以快速构建一个完整的vue项目，直接可以运行的vue本地项目，我们在此基础之上直接开发我们所需要的功能和代码即可。

• Webpack
  webpack(官网: https://www.webpackjs.com) 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
  
  
  

4. MVVM 和 SPA

MVVM:
MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel。

• View层
  视图层，在前端开发中，通常就是DOM层，主要的作用是给用户展示各种信息。

• Model层
  数据层，大对数都是前端通过网络请求后端，后端服务器响应返回给我们的数据。

• VueModel层
  视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中；另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

SPA：
SPA（single page web application）单页 Web应用，整个应用功能都存在于单个页面中。SPA不会因为用户的操作而进行页面的重新加载或跳转。它利用 JavaScript 动态的变换HTML的内容，从而实现数据的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验，但这也造成了首次加载页面时间过长。

这里我们简单了解mvvm和spa即可，随着我们学习的深入，会更深刻的去体会理解他们。

5. 安装Vue.js

• 下载Vue.js(前期学习推荐)

  下载链接: https://cn.vuejs.org/v2/guide/installation.html
  

• CDN:

  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]">script>
  
  <script src="https://cdn.jsdelivr.net/npm/vue">script>	
  

• NPM:
  后面都会使用npm方式引入，他能很好地和 webpack 或 Browserify 模块打包器配合使用，非常方便。npm方式在后面使用时，在详细介绍。
  
  

这一节我们简单的了解了Vue，知道如何去使用它，那下面一节将通过一个实例，去讲解Vue实例的结构组成，以及它的生命周期。

支持一下，点个赞吧。