Vue.js 框架从入门到精通，只需要它！

vlambda
2022-04-11

Vue.js 框架从入门到精通，只需要它！

点击蓝字关注我们

你还在一行一行低效代码吗？你还在不停地操作 DOM 吗？你的代码还会频繁出现 CSS、Javascript 配置文件冲突吗？

Vue3 框架快速解决你的代码低效问题！

Vue 初体验

Vue 最初只不过是一个 github 上的个人项目，1.0.0 版本发布后，由于简单、易上手等特性，吸引了一大批粉丝，有春笋拔地而起之势。

到了 2.0.0 版本后更是火得一塌糊涂。

Vue.js 框架从入门到精通，只需要它！

时至今日，已经是 “天姥连天向天横，势拔五岳掩赤城” 了，气势已经不可抵挡，github 上已经拥有了 181k 的 star 人数。

这显然已经成为了全球最受欢迎的前端框架，在国内更是首选的前端框架，更有着前端开发必会框架的口号，那么到底是什么样的魅力让它这么受欢迎呢？

Vue.js 简介

Vue 是一套用于构建用户界面的 “渐进式框架”，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue 从一个视图层库发展为一个渐进式框架，主要改进了以下 4 个方面：

针对 v-bind 和 v-on 提供缩写形式：xxx 与 @；
清理精简所提供的借口；
提高初始化的渲染效率；
两个官方工具的增强：vue-loader 与 vueify。

Vue 源码大幅度地重构，添加了虚拟 Dom，使性能有了很大的提高，也为日后的跨端发展（Weex）打下了基础。

这次主要改进了：

借鉴了 React 的 Virtual DOM 概念，通过 fork 自 snabbdom 的轻量 Virtual DOM 框架，实现了对渲染层的重写，大大提升了框架的性能；
增加了服务端渲染功能。

Vue 3 正式版本发布于 2020 年 9 月 18 日，Vue 3 可以说是从 0 开始编写的，更加清晰和更易维护的架构，主要进行了性能的改进，更小的资源包、更好的类型支持（TypeScript）、提供了一大批新的 API，为框架的长期迭代奠定了基础。

Vue 3 跟 Vue 2 相比具有以下特点：

更快：初始渲染，更新速度提速一倍；
类型更友好：完美拥抱 TypeScript：
更小：Tree-shaking 友好：
更好的警告信息；
更好的 API 特性；
……

其实 Vue.js 从诞生到被大家认可，最后被大家熟知，我们能够看到更多的是作者背后不断的坚持与不懈的努力。

Vue.js 框架从入门到精通，只需要它！

如果想了解更多有关编程的内容，欢迎加入蓝桥云课专属代码交流群哦~

Vue.js 框架从入门到精通，只需要它！

Vue.js

的简介

我们都知道，一个完整的网页是由 DOM 组合与嵌套形成最基本的视图结构，再加上 CSS 样式的修饰，使用 JavaScript 接受用户的交互请求，并通过事件机制来响应用户交互操作而形成的。

我们把最基本的视图结构（也就是 HTML DOM）拿出来，称为视图层，这个被称为视图层的部分就是 Vue 核心库关注的部分。

Vue.js 为什么关注视图层呢？

因为一些页面元素非常多，结构庞大的网页如果使用传统开发方式，数据和视图会全部混合在 HTML 中，处理起来十分不易。并且结构之间还存在依赖或依存关系，代码上就会出现更多问题。

有过前端开发基础的小伙伴，都应当了解过 jQuery。

jQuery 给予我们简洁的语法和跨平台的兼容性，极大地简化了 JavaScript 开发人员遍历 HTML 文档、操作 DOM、事件处理等操作。

下面我们通过一个 Demo 来分别演示一下 jQuery 跟 Vue.js。

首先，在项目中创建一个 demo 目录：

mkdir ./demo

Vue.js 框架从入门到精通，只需要它！

接着进入到 demo 目录，并且在 demo 目录下创建一个 jquery.html 文件：

cd ./demo && touch ./jquery.html

将以下内容写入到 demo/jquery.html 文件：

<!DOCTYPE html><html>
  <head>
    <meta charset="utf-8" />
    <title>jquery 测试</title>
    
    <script ></script>
  </head>
  <body>
    <div id="root">
      hello world    </div>
    <script>
      $("#root").on("click", function(event) {
        event.target.innerText = "hello 蓝桥";
      });    </script>
  </body></html>

可以看到，我们用 jquery 实现了一个简单的 Demo，当我们点击 “root” 元素的时候，我们把之前的 “hello world” 变成了 “hello 蓝桥”。

接着我们用 Vue.js 来实现一下上面的功能。

在 demo 目录下创建一个 vuejs.html 文件：

touch ./vuejs.html

接着将以下内容写入到 demo/vuejs.html 文件：

<!DOCTYPE html><html>
  <head>
    <meta charset="utf-8" />
    <title>Vue.js 测试</title>
    
    <script ></script>
  </head>
  <body>
    <div id="root">
      <div @click="handleClick">{{msg}}</div>
    </div>
    <script>
      Vue.createApp({        data() {          return {            msg: "hello world",
          };
        },        methods: {          handleClick() {            this.msg = "hello 蓝桥";
          },
        },
      }).mount("#root");    </script>
  </body></html>

可以看到，在 vuejs.html 中，我们定义了一个 msg: "hello world"属性，并且通过 Vue 把这个 msg ` 属性跟视图绑定到了一起：

<div @click="handleClick">{{msg}}</div>

当我们点击这个视图元素 div 的时候，我们动态修改了 msg 属性的值：

 handleClick() {     this.msg = "hello 蓝桥";
 }

接下来分别测试下 demo/jquery.html 跟 demo/vue.html 文件。

右键 demo/jquery.html 文件，并且选择 ”Open with Live Server “ 来开启 8080 端口：

Vue.js 框架从入门到精通，只需要它！

等服务 8080 端口开启后，我们点击实验环境右边菜单的 “Web 服务” 按钮：

Vue.js 框架从入门到精通，只需要它！

点击按钮后，浏览器会自动打开我们的服务入口页面：

Vue.js 框架从入门到精通，只需要它！

这里的 jquery.html 跟 Vue.js.html 就是我们创建的两个测试 html 文件。

我们分别直接点击 jquery.html 与 Vue.js.html 看效果：

Vue.js 框架从入门到精通，只需要它！

可以看到，两者效果都一样。

我们用 jQuery 跟 Vue.js 两种方式去实现了一个简单的需求，从中我们可以发现，在 Vue.js 中，我们只需要修改属性 msg 的值，Vue 会自动的把这个属性绑定到对应的元素上，一些 Dom 的操作都被隐藏了。

当页面元素跟 dom 操作不多的时候，你可能会觉得使用 jQuery 会更简单，可是当我们的业务需求不断的增加的时候，页面元素跟 dom 操作也会随之增加，比如我们修改一下 demo/jquery.js 文件：

<!DOCTYPE html><html>
  <head>
    <meta charset="utf-8" />
    <title>jquery 测试</title>
    
    <script ></script>
  </head>
  <body>
    <div id="root">
      页面      <div>
        页面中的某个模块        <div>
          <div>hello world</div>
        </div>
      </div>
    </div>
    <script>
      $("#root").on("click", function(event) {
        $("#root div div div")[0].innerText = "hello 蓝桥";
      });    </script>
  </body></html>

可以看到，当元素层级很深的时候，我们用 jquery 就会变成这样：

$("#root div div div")[0].innerText = "hello 蓝桥";

这样极其容易出错，而且也不方便维护。

我们同样以 Vue.js 方式来实现一下上面这种复杂的情况：

<!DOCTYPE html><html>
  <head>
    <meta charset="utf-8" />
    <title>Vue.js 测试</title>
    
    <script ></script>
  </head>
  <body>
    <div id="root">
      <div @click="handleClick">
        页面        <div>
          页面中的某个模块          <div>
            <div>{{msg}}</div>
          </div>
        </div>
      </div>
    </div>
    <script>
      Vue.createApp({        data() {          return {            msg: "hello world",
          };
        },        methods: {          handleClick() {            this.msg = "hello 蓝桥";
          },
        },
      }).mount("#root");    </script>
  </body></html>

可以看到，在 Vue.js 中，我们还是只关注视图层的内容，也就是你的 msg 属性绑定在视图的地方，不管你的视图层级有多深，它总能够准确找到这个元素，并且根据 msg 属性值做对应视图渲染。

了解完使用 Vue.js 的原因，我们来了解一下它的主要特点：

轻量级的框架

Vue.js 体积很小，大小只有几十 kb，能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，使读者更加容易理解，能够更快上手。

双向数据绑定

声明式渲染是数据双向绑定的主要体现，同样也是 Vue.js 的核心，它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。

指令

Vue.js 与页面进行交互，主要就是通过内置指令来完成的，指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

组件化

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

在 Vue 中，父子组件通过 props 传递通信，从父向子单向传递。子组件与父组件通信，通过触发事件通知父组件改变数据。

这样就形成了一个基本的父子通信模式。

在开发中，组件和 HTML、JavaScript 等有非常紧密的关系时，可以根据实际的需要来自定义组件，使开发变得更加便利，可大量减少代码编写量。

组件还支持热重载（hotreload）。当我们做了修改时，不会刷新页面，只是对组件本身进行立刻重载，不会影响整个应用当前的状态。CSS 也支持热重载。

路由管理

Vue-Router 是 Vue 全家桶中的路由管理插件，与 Vue.js 深度集成，用于构建单页面应用。

Vue 单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，传统的页面是通过超链接实现页面的切换和跳转的。

状态管理

Vuex 是 Vue 全家桶中的状态管理插件，与 Vue.js 深度集成，用于管理应用的状态。

开箱即用

Vue-Cli 是 Vue 全家桶中的脚手架工具，给 Vue 应用提供了开箱即用的功能，让开发者能够快速创建、开发、构建一个完整的 Vue 项目。

以上内容来源于蓝桥云课《从零吃透 Vue.js 框架》，如果你想学习的 Vue3 技能知识点，都在这里。

幽默风趣的课堂氛围，真正的通俗易懂，课程所学即真实企业级项目中所用。

Vue.js 框架从入门到精通，只需要它！

如果你是以下三种情况，你就可以学习此门课程：

想要从零开始彻底入门 Vue3 的同学；
想要了解清楚 Vue3 原理和新语法的同学；
希望拓展前端知识面，寻求升职加薪机会的同学。

如果你想了解更多，欢迎扫码进行优惠学习哦~还有代码交流群供你讨论哦~

▼扫码添加获取更多▼

戳戳“阅读原文”直达课程页面！

vlambda博客
学习文章列表