如何有效快速的学习vue.js？

前言

分享好玩科技，探索未知世界。大家好，我是drinkingcode。针对如何快速入门vue的问题，分享一下我的个人一些学习经验，希望对大家有帮助。

经验

第一步：安装vue

通过vue cli脚手架来下载一个vue项目，具体操作如下所示：

第二步：熟悉基本使用

通过阅读vue教程并结合第一步下载的项目，把理论和实践相结合，这样你在看vue教程时，你就更深地体会到具体教程中所说的含义。

第三步：实战项目

选择一个小项目，然后用vue来实现。当遇到不明白的地方时，此时可以查看vue的api，查找相关问题的解决方案。当你经历了这样一个自我探索的过程后，你的vue也就入门了。

总结

第一步用vue cli下载项目，是为了方便后期的动手实践，因为学习一门编程技术，如果仅仅停留在纸面上，你对它的理解是不深刻的；第二步阅读vue教程，是为了让你对vue从全局范围上有一个认识；第三步实战项目并查询vue的api，是为了让你从vue的纵向上有一个更深地理解。

当你完成了这三步，你也就快速入门了vue。如果你喜欢我的文章或对你有帮助，欢迎点赞转发！

关注我，我是drinkingcode，分享好玩科技，探索未知世界！

全球都在处理数字化转型的问题，飞速发展的同时也为基础设施带来了一定的压力。同时许多黑客也在不断更新升级他们的攻击技术。

如果我们的应用程序有过多漏洞，被抓住利用，就会变成大型“芭比Q”现场。

这也是为何现在如此多团队将安全性转向左翼，甚至将技术从 DevOps 迁移到DevSecOps。

所以很多开发者对于程序安全性有一定顾虑，甚至会占用一些时间专门关注安全问题，但事实上我们并不需要为了保证绝对安全性而牺牲版本的快速更迭。

本文将为大家介绍四种可以帮助我们保护 Vue 应用程序的便捷方法，而且简单易用，不会影响到我们的正常工作进程。

Vue 框架概述

Vue 是一个用于构建 Web 用户界面的渐进式框架，必须要提到的是它可以和其他框架（如 React 和 Angular）完美集成。 Vue 与其他框架相比更加专注于视图层，但明显的优点是它能高效构建单页应用程序 (SPA)。

而现在风头正盛的Vue 3，可以直接使用 TypeScript 编写，随着应用程序的体量逐渐变大，我们不再需要额外工具来防止潜在的运行错误。

保护 Vue 应用程序的 4 种方法

下面是我们将为大家介绍一些攻击，通过它可以让我们了解如何保护在Vue上运行的应用程序。这些最佳实践将帮助您防止跨站点脚本 (XSS) 和跨站点请求伪造 (CSRF) 等攻击，这些攻击可以是低调的自动攻击，也可以是高级持续威胁的一部分，用作攻击的第一步。

1、跨站脚本（XSS）

跨站点脚本 (XSS) 攻击是一种代码注入，最常见的 XSS 攻击的手法是基于 DOM 的攻击。攻击者旨在将恶意代码注入我们网站的 DOM 元素之中，这样用户登陆网页时恶意攻击指令就会生效，例如窃取用户数据。为了防止这种意外出现，开发人员需要将以下位置中有风险的输入内容进行清理：

• HTML（绑定内部 HTML）
• 样式 (CSS)
• 属性（绑定值）
• 资源（文件内容）

不过开发者最好在数据显示在页面之前，对数据进行清理，防止用应用程序中的安全漏洞被攻击。

作为开发者，我们不能强制用户输入什么，所以需要我们对用户的输入内容进行判断、清洗，将问题内容及时“处理”。npm 上提供的vue-sanitize 库可以轻松将服务器上的用户输入值进行清理。

它通过使用一串HTML 来清理代码中出现的问题，并防止 XSS 攻击。它会删除有风险的 HTML，同时我们可以将我们需要保留的HTML内容作为白名单，自定义设置。

``` import VueSanitize from "vue-sanitize"; Vue.use(VueSanitize); ``` 轻松将标签和选项列入白名单： ``` defaultOptions = { allowedTags: ['a', 'b'], allowedAttributes: { 'a': ['href'] } } Vue.use(VueSanitize, defaultOptions); ```

然后，VueSanitize 将获取用户传输的数据内容并清理——保留我们列入白名单的内容，防止代码注入和 XSS 攻击。

2、自定义库与新版本不匹配

自定义 Vue 库实在是我们开发过程中一个利器，可以按照我们的需求进行自定义内容设置，但对于一些过于依赖当前版本的自定义库而言，这么做的弊端也是显而易见的，升级更高版本，有概率会出现应用程序可能会出错的问题，但如果不选择升级， 我们可能会错过Vue一些关键的安全修复和功能。

修改和更新Vue 库最好的方式时通过区分享我们的需求和内容，这可以让其他开发者查看到我们的更改，并考虑将它们添加到下一个 Vue 版本。

我们还可以在在 Vue 应用程序中使用NPM 包保持最新，这样可以确保已解决的安全问题或更新内容都一同更新了。

3. 有风险的Vue 库

Vue一个亮点是它可以让开发人员无需编辑浏览器的 DOM 来手动渲染组件；然而，这并不意味着开发人员不需要直接访问 DOM 元素，为了解决这个问题，Vue 为用户提供了一些API，例如findDOMNode和ref。

使用 ref来访问 DOM 元素（见下文）：

``` <template> <div id="account"> <user-component ref="user" /> </div> <template> <script> import UserComponent from "/components/UserComponent"; export default { name: "user-component", components: { UserComponent }, mounted() { this.$refs.user.$refs.userName.focus(); } }; </script> ```

使用这种方法，我们不需要通过Vue操作Dom元素，而直接引用用户组件及 API，通过应用程序直接操作 DOM 元素。这么做很便捷，但也会使得应用程序容易受到 XSS 漏洞的攻击。为了防止恶意代理利用我们的应用程序，这里提供几种途径来保护我们的应用程序。

• 输出文本内容而不是直接输出 HTML 代码
• 使用 VueSanitize 库清理数据
• API生成Dom节点

4、 HTTP 层面漏洞

跨站请求伪造（CSRF）：

CSRF利用了用户对网站的信任，在未经用户授权的情况下发送恶意命令。举个例子是当我们在某些网站想阅读一些内容，网站可能需要让我们登录用户。

为了验证删除请求的身份验证，网站会话通过 cookie 存储在浏览器中。但是，这会在站点中留下一个 CSRF 漏洞。如果想删除需要用户使用浏览器中的 cookie 向服务器发送删除请求。

减轻这种威胁的一种常见方法是让服务器发送包含在 cookie 中的随机身份验证令牌。客户端读取 cookie 并在所有后续请求中添加具有相同令牌的自定义请求标头。这样就可以拒绝没有身份验证令牌的攻击者发出的请求。

跨站点脚本包含 (XSII)：

XSSI允许攻击者使用JSON API 读取数据网站数据。它利用了旧浏览器上的一个漏洞，该漏洞包括了原生 JavaScript 对象构造函数。

它可以使用脚本标签提供 API URL，这意味着我们的程序中会有他人代码，我们不能控制代码内容，也无法判断托管它的服务器是否安全。

解决这种攻击，可以让服务器使所有 JSON 的响应变为不可执行。例如在对应代码前加上字符串 ")]}', "，然后在解析数据之前将其删除。因为脚本必须保证完整性才能运行，所以这样就可以避免XSII攻击。

总结

安全是一个至关重要的问题，不仅应该由安全专业人员解决，开发人员也应该注意到一些问题。本文就从几种不同攻击出发，为大家介绍了一些规避和解决的方法。

没有完美无缺的应用程序，在开发过程中不可避免有许多修复、补丁和需要响应的紧急事项，但采用安全的编码思维可以帮助我们将低许多不必要的风险。

不过跳脱出框架本身，如果我们使用与框架无关的Web 组件，我们拥有一套完整的JavaScript UI 组件和强大的类似 Excel 的 JavaScript 电子表格组件，为Vue以及Angular和React提供深度支持。

后续还会为大家分享更多有趣内容~下方是一些demo 演示，觉得不错点个关注吧~

demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html

现在网上教学视频很多，自己可以找来，跟着做几个实战项目就好了。