测试4
测试大礼包
爬虫实战特训课

Vue 简介

大家好，今天我们开始一个新专题 — Vue。这个专题我们重点针对如何使用 Vue 开发项目。本文我们主要先介绍一下 Vue 是什么？
图片描述

1. 什么是 Vue

什么是 Vue 呢？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 —官网

2. 为什么要使用 Vue

2.1 Vue.js 让基于网页的前端应用程序开发起来更加方便

相信同学们一定或多或少做过网页开发，如果你使用原生 JavaScript 或者 Jquery 来开发，那么不可避免的要大量操作 DOM，而 Vue.js 不同，因为 Vue.js 有声明式，响应式的数据绑定，与组件化的开发，并且还使用了 Virtual DOM 这个看名字就觉得高大上的技术，Vue.js 让我们尽量避免了繁琐的 DOM 操作，它可以根据数据的改变来驱动视图的更新，这极大的提高了我们的开发效率。

2.2 Vue 与 React 对比

2.1 相似之处

React 和 Vue 都是 MVVM 框架，它们之间有很多相似之处：

  1. 两者都是用于创建 UI 的 JavaScript 库；
  2. 两者的使用都快速轻便；
  3. 两者都是基础组件式的开发；
  4. 两者都使用了虚拟 DOM。

2.2 不同之处

React 和 Vue 在某些方面也存在一定的差异：

  • Vue 的数据可变的，通过对每一个属性建立 Watcher 来监听，当属性变化的时候，响应式的更新对应的虚拟 DOM，而 React 则是基于数据不可变，React 需要通过 setState 来触发渲染流程，同时可以通过 shouldComponentUpdate 来控制视图是否更新;
  • Vue 推荐使用模板语法，把 html、css、js 组合到一起，用各自的处理方式，通过模板引擎来处理。，而 React 则推荐使用 JSX 语法进行书写，React 的思路是 all in js，通过js生成html;
  • React 中的 state 对象是不可变的，我们不能被直接改变 state 的值，而是需要通过使用 setState() 的方法去更新状态，在 Vue 中，state 并不是必须的，数据由 data 属性进行管理，我们可以直接修改 data 属性中的值。

3. Vue 的版本说明

Vue 从发布到现在经历了 3 个大的版本，目前最新的正式版本是 2.x。下面我们介绍一下三个版本：

  • V1.x：基本已经很少使用了;
  • V2.x：目前的主流版本;
  • V3.x：这个版本还没有正式发布，目前已经到了 beta 阶段，相信在不久之后将会正式发布。

本文我们主要是介绍 Vue2.x 版本的学习和使用，想要学习 Vue1.x 版本的同学可以到 Vue 官网查看文档进行学习，部分同学可能对 Vue3.x 比较感兴趣，这里同学们可以到 GitHub 上了解最新代码。

4. Vue 的优点

那么 Vue 有哪些优点呢？

  1. Vue 是一个轻量级框架。Vue 的体积只有几十 kb，非常轻量；
  2. Vue 简单易学，对新手友好度高；
  3. 双向数据绑定。Vue 提供了双向数据绑定 v-model 的语法糖，让我们可以避免 DOM 操作；
  4. 组件化开发。我们可以把页面拆分成大大小小的组件，这样大大提高了代码的可复用率和可读性。

5. 学习基础

  1. 掌握基本的Html、Css知识；
  2. 对JavaScript基础有所了解，并且有过实际使用经验。