diff --git a/LICENSE b/LICENSE index 4645bc4bc6..4d747eb68c 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2013-2015 Yuxi Evan You +Copyright (c) 2013-present Yuxi Evan You Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 93a8c0a3d5..f1643e288e 100644 --- a/README.md +++ b/README.md @@ -11,16 +11,9 @@ $ npm start # dev server at http://localhost:4000 ## Deploying -The site is deployed using GitHub pages, therefore you need push access to the vuejs.org repo to run the deploy script: +The site is automatically deployed when commits land in `master`, via [Netlify](https://www.netlify.com/). -``` bash -$ npm run deploy -``` - -If you are working on a fork and deploying to a different URL, you need to update the following accordingly: - -- `url` and `deploy` sections in `_config.yml` -- `src/CNAME` +If you are the maintainer of a community translation fork and would like to deploy via Netlify instead of GitHub pages, please ping @yyx990803 in an issue to request a Netlify team membership and DNS update. ## On Translations diff --git a/assets/why-vue/chinese.js.srt b/assets/why-vue/chinese.js.srt new file mode 100644 index 0000000000..6659c436ac --- /dev/null +++ b/assets/why-vue/chinese.js.srt @@ -0,0 +1,547 @@ +1 +00:00:00,000 --> 00:00:02,418 +- 在过去的 10 年时间里 +我们的网页变得 + +2 +00:00:02,418 --> 00:00:05,600 +更加动态化和强大了 +多亏有 JavaScript + +3 +00:00:05,600 --> 00:00:07,541 +我们已经把很多传统的 + +4 +00:00:07,541 --> 00:00:10,120 +服务端代码放到了浏览器中 + +5 +00:00:10,120 --> 00:00:13,051 +这样就产生了成千上万行的 JavaScript 代码 + +6 +00:00:13,051 --> 00:00:15,691 +它们连接了各式各样的 HTML 和 CSS 文件 + +7 +00:00:15,691 --> 00:00:17,821 +但缺乏正规的组织形式 + +8 +00:00:17,821 --> 00:00:19,781 +这也是为什么越来越多的开发者使用 + +9 +00:00:19,781 --> 00:00:23,948 +诸如 Angular、React 或 Vue 这样的 +JavaScript 框架 + +10 +00:00:24,821 --> 00:00:27,829 +Vue 是一款友好的、多用途且高性能的 + +11 +00:00:27,829 --> 00:00:29,860 +JavaScript 框架 +它能够帮助你创建 + +12 +00:00:29,860 --> 00:00:33,381 +可维护性和可测试性更强的代码库 + +13 +00:00:33,381 --> 00:00:36,229 +Vue 是渐进式的 JavaScript 框架 +也就是说 + +14 +00:00:36,229 --> 00:00:38,621 +如果你已经有一个现成的服务端应用 + +15 +00:00:38,621 --> 00:00:41,627 +你可以将 Vue 作为该应用的一部分嵌入其中 + +16 +00:00:41,627 --> 00:00:44,381 +带来更加丰富的交互体验 + +17 +00:00:44,381 --> 00:00:46,269 +或者，如果你希望将更多业务逻辑 + +18 +00:00:46,269 --> 00:00:48,240 +放到前端来实现 + +19 +00:00:48,240 --> 00:00:50,611 +那么 Vue 的核心库及其生态系统 + +20 +00:00:50,611 --> 00:00:52,421 +也可以满足你的各式需求 + +21 +00:00:52,421 --> 00:00:53,829 +和其它前端框架一样 + +22 +00:00:53,829 --> 00:00:55,960 +Vue 允许你将一个网页分割成 + +23 +00:00:55,960 --> 00:01:00,000 +可复用的组件 +每个组件都包含属于自己的 HTML + +24 +00:01:00,000 --> 00:01:02,291 +CSS、JavaScript 以用来渲染 + +25 +00:01:02,291 --> 00:01:04,269 +网页中相应的地方 + +26 +00:01:04,269 --> 00:01:06,260 +接下来我们就亲自动手感受一下 Vue + +27 +00:01:06,260 --> 00:01:08,301 +构建一个商品库存的页面 + +28 +00:01:08,301 --> 00:01:10,187 +也敬请关注视频结尾 + +29 +00:01:10,187 --> 00:01:13,571 +来自 Vue 的作者尤雨溪发来的信息 + +30 +00:01:13,571 --> 00:01:15,301 +我们不是教你如何使用 Vue + +31 +00:01:15,301 --> 00:01:16,981 +而是介绍一些核心概念 + +32 +00:01:16,981 --> 00:01:19,460 +正是这些东西让 Vue 如此实用 + +33 +00:01:19,460 --> 00:01:21,200 +和许多 JavaScript 应用一样 + +34 +00:01:21,200 --> 00:01:24,272 +我们从网页中需要展示的数据开始 + +35 +00:01:24,272 --> 00:01:26,591 +使用 Vue 的起步非常简单 + +36 +00:01:26,591 --> 00:01:29,745 +我们引入 Vue 库 +创建一个 Vue 的实例 + +37 +00:01:29,745 --> 00:01:33,673 +然后通过应用的 id 嵌入到我们的根元素中 + +38 +00:01:33,673 --> 00:01:36,032 +“el”是元素 (element) 的缩写 + +39 +00:01:36,032 --> 00:01:39,505 +我们还要将数据放入一个对象 + +40 +00:01:39,505 --> 00:01:41,993 +并且将 X 修改为一个表达式 + +41 +00:01:41,993 --> 00:01:44,544 +用双大括号括起来 + +42 +00:01:44,544 --> 00:01:46,945 +如你所看到的，它已经工作起来了 + +43 +00:01:46,945 --> 00:01:50,695 +很酷，但是 Vue 的魔力在数据变更时才会出现 + +44 +00:01:50,695 --> 00:01:51,975 +如果我们打开控制台 + +45 +00:01:51,975 --> 00:01:54,735 +改变 product 的值 + +46 +00:01:54,735 --> 00:01:57,324 +注意在 product 的值改变的同时 + +47 +00:01:57,324 --> 00:01:59,953 +Vue 自动更新了我们的 HTML + +48 +00:01:59,953 --> 00:02:01,745 +这是因为 Vue 是响应式的 + +49 +00:02:01,745 --> 00:02:03,273 +也就是说当我们的数据变更时 + +50 +00:02:03,273 --> 00:02:05,193 +Vue 会帮你更新所有 + +51 +00:02:05,193 --> 00:02:07,255 +网页中用到它的地方 + +52 +00:02:07,255 --> 00:02:10,305 +除了字符串，Vue 对其它类型的数据也是如此 + +53 +00:02:10,305 --> 00:02:11,604 +所以我们把这个简单的商品换成 + +54 +00:02:11,604 --> 00:02:14,604 +一个商品数组试试看 + +55 +00:02:14,604 --> 00:02:17,865 +然后我们将

+改为一个无序列表 + +56 +00:02:17,865 --> 00:02:20,535 +再为数组中的每个商品 +创建一个列表项 + +57 +00:02:20,535 --> 00:02:22,618 +使用 Vue 的 v-for 指令 + +58 +00:02:24,353 --> 00:02:26,615 +让每个商品都拥有各自的列表项 + +59 +00:02:26,615 --> 00:02:28,495 +如你这里看到的 + +60 +00:02:28,495 --> 00:02:30,352 +不过这还不够有说服力 + +61 +00:02:30,352 --> 00:02:32,312 +现在我们先从空列表开始 + +62 +00:02:32,312 --> 00:02:34,815 +然后从一个实际的 API 获取我们的商品信息 + +63 +00:02:34,815 --> 00:02:37,433 +这个 API 是从某个数据库获取来的 + +64 +00:02:37,433 --> 00:02:38,863 +当应用被创建时 + +65 +00:02:38,863 --> 00:02:41,866 +我们会从这个 API 获取最新的商品信息 + +66 +00:02:41,866 --> 00:02:43,199 +这就是你要从这里获取的全部 + +67 +00:02:43,199 --> 00:02:45,063 +我们获取商品列表 + +68 +00:02:45,063 --> 00:02:46,923 +并把它们更新到数据中 + +69 +00:02:46,923 --> 00:02:48,281 +如你所看到的，在我们的网页中 + +70 +00:02:48,281 --> 00:02:51,435 +各列表项展示了该 API 返回的对象 + +71 +00:02:51,435 --> 00:02:53,474 +好吧，这还不是常人能读懂的样子 + +72 +00:02:53,474 --> 00:02:56,265 +所以我们来改变一下它的展示方式 + +73 +00:02:56,265 --> 00:02:59,643 +我们将打印出其数量和名称 + +74 +00:02:59,643 --> 00:03:02,265 +就这样就可以了，打印出来的效果非常好 + +75 +00:03:02,265 --> 00:03:03,563 +我们可能需要特别留意 + +76 +00:03:03,563 --> 00:03:05,675 +数量为零的项目 + +77 +00:03:05,675 --> 00:03:09,595 +所以我们添加一个 +写入文字 OUT OF STOCK + +78 +00:03:09,595 --> 00:03:13,334 +这个区域会在项目数量为零的时候出现 + +79 +00:03:13,334 --> 00:03:16,134 +这里我们用到了 v-if 指令 + +80 +00:03:16,134 --> 00:03:20,362 +因为我们的 jacket 数量为零，它卖完了 + +81 +00:03:20,362 --> 00:03:22,081 +如果我们想要打印出 + +82 +00:03:22,081 --> 00:03:24,641 +列表中商品的总数该怎么办呢？ + +83 +00:03:24,641 --> 00:03:26,468 +为了做这件事，我们需要创建 + +84 +00:03:26,468 --> 00:03:29,570 +一个名为 totalProducts 的计算属性 + +85 +00:03:29,570 --> 00:03:34,228 +它会返回我们所有商品的数量总和 + +86 +00:03:34,228 --> 00:03:36,490 +也许你对 JavaScript 的 reduce 不熟悉 + +87 +00:03:36,490 --> 00:03:40,468 +它在这里用来把每个商品的数量加在一起 + +88 +00:03:40,468 --> 00:03:41,851 +如你所看到的，在我们的浏览器中 + +89 +00:03:41,851 --> 00:03:45,308 +它已经把总数量准确的加起来了 + +90 +00:03:45,308 --> 00:03:47,588 +现在我将要在浏览器中向你展示 + +91 +00:03:47,588 --> 00:03:51,380 +Vue 的 Chrome 插件 +我们可以在这里看到我们的数组数据 + +92 +00:03:51,380 --> 00:03:53,547 +并就地对其进行审查 + +93 +00:03:55,108 --> 00:03:57,460 +现在我们在命令行中，为了好玩 + +94 +00:03:57,460 --> 00:03:59,850 +我们来把数组中最后一个项目 pop 出来 + +95 +00:03:59,850 --> 00:04:01,828 +看看会发生什么 + +96 +00:04:01,828 --> 00:04:04,359 +如你所看到的，不仅我们的列表同步更新了 + +97 +00:04:04,359 --> 00:04:07,940 +连我们的商品总数也如我们所预期地同步更新了 + +98 +00:04:07,940 --> 00:04:10,410 +接下来，让我们在页面中添加一些交互行为 + +99 +00:04:10,410 --> 00:04:12,346 +通过按钮来完成 + +100 +00:04:12,346 --> 00:04:14,490 +我们将为每一个商品创建一个增加按钮 + +101 +00:04:14,490 --> 00:04:15,850 +当点击它时 + +102 +00:04:15,850 --> 00:04:18,850 +就将商品数量加一 + +103 +00:04:19,959 --> 00:04:22,279 +回到浏览器，注意当我们添加一个项目时会怎样 + +104 +00:04:22,279 --> 00:04:25,159 +不只是更新整个库存 + +105 +00:04:25,159 --> 00:04:27,780 +同时当我们增加 jacket 商品数量时 + +106 +00:04:27,780 --> 00:04:30,300 +我们的 OUT OF STOCK 提示不见了 + +107 +00:04:30,300 --> 00:04:31,860 +如果你想点击这个按钮很多次 + +108 +00:04:31,860 --> 00:04:33,890 +那会很麻烦，所以如果我们想要 + +109 +00:04:33,890 --> 00:04:37,719 +直接写入 jacket 或 hiking sock 的数量 +该怎么办呢？ + +110 +00:04:37,719 --> 00:04:40,580 +我们只需创建一个文本框 + +111 +00:04:40,580 --> 00:04:43,867 +并通过 v-model 指令 +绑定我们的商品数量字段 + +112 +00:04:43,867 --> 00:04:46,519 +指明这一定是个数字 + +113 +00:04:46,519 --> 00:04:48,060 +你会发现，现在我可以输入 + +114 +00:04:48,060 --> 00:04:52,450 +每个项目的总数 +并且数据会被立刻更新 + +115 +00:04:52,450 --> 00:04:54,500 +我甚至可以将数量设置回零 + +116 +00:04:54,500 --> 00:04:57,899 +这样我就又看到 OUT OF STOCK 的声明了 + +117 +00:04:57,899 --> 00:05:01,232 +而我的增加按钮仍然可以正常工作 + +118 +00:05:02,259 --> 00:05:03,999 +如果我们构建一个大型的应用 + +119 +00:05:03,999 --> 00:05:05,839 +在这一点上 +我们可能需要将东西分割 + +120 +00:05:05,839 --> 00:05:09,290 +成为各自的组件和文件 + +121 +00:05:09,290 --> 00:05:11,827 +Vue 甚至有一个命令行工具 + +122 +00:05:11,827 --> 00:05:15,828 +使快速初始化一个真实的工程变得非常简单 + +123 +00:05:15,828 --> 00:05:18,879 +我们甚至可以使用 Vue 的单文件组件 + +124 +00:05:18,879 --> 00:05:21,770 +它包含了各自的 HTML、JavaScript + +125 +00:05:21,770 --> 00:05:23,687 +以及带作用域的 CSS 或 SCSS + +126 +00:05:25,599 --> 00:05:28,926 +- Hi，我是尤雨溪，Vue.js 的作者 + +127 +00:05:28,926 --> 00:05:31,587 +你现在看到的仅仅是 + +128 +00:05:31,587 --> 00:05:33,065 +Vue 可以做的一些皮毛的小事情 + +129 +00:05:33,065 --> 00:05:34,856 +在我们的生态系统之中有各种丰富的东西 + +130 +00:05:34,856 --> 00:05:36,555 +可以帮助你构建、组织 + +131 +00:05:36,555 --> 00:05:39,076 +发展你的前端应用 + +132 +00:05:39,076 --> 00:05:42,457 +如果想更深入的了解 Vue +请立刻阅读我们的文档 + +133 +00:05:42,457 --> 00:05:44,708 +我想你会乐在其中的 diff --git a/assets/why-vue/english.js.srt b/assets/why-vue/english.js.srt new file mode 100644 index 0000000000..8a4e393f70 --- /dev/null +++ b/assets/why-vue/english.js.srt @@ -0,0 +1,588 @@ +1 +00:00:00,000 --> 00:00:02,418 +- Over the last 10 years +our web pages have become + +2 +00:00:02,418 --> 00:00:05,600 +more dynamic and powerful +thanks to JavaScript. + +3 +00:00:05,600 --> 00:00:07,541 +We've moved a lot of +code that was normally on + +4 +00:00:07,541 --> 00:00:10,120 +the server side into our browsers, + +5 +00:00:10,120 --> 00:00:13,051 +leaving us with thousands +of lines of JavaScript code + +6 +00:00:13,051 --> 00:00:15,691 +connecting to various HTML and CSS files + +7 +00:00:15,691 --> 00:00:17,821 +with no formal organization. + +8 +00:00:17,821 --> 00:00:19,781 +This is why more and +more developers are using + +9 +00:00:19,781 --> 00:00:23,948 +JavaScript frameworks like, +Angular, React, or Vue. + +10 +00:00:24,821 --> 00:00:27,829 +Vue is an approachable, +versatile, and performant + +11 +00:00:27,829 --> 00:00:29,860 +JavaScript framework +that helps you create + +12 +00:00:29,860 --> 00:00:33,381 +a more maintainable, +and testable code base. + +13 +00:00:33,381 --> 00:00:36,229 +Vue is a progressive JavaScript +framework, which means, + +14 +00:00:36,229 --> 00:00:38,621 +if you have an existing +server-side application, + +15 +00:00:38,621 --> 00:00:41,627 +you can plug Vue into just +one part of your application + +16 +00:00:41,627 --> 00:00:44,381 +that needs a richer, more +interactive experience. + +17 +00:00:44,381 --> 00:00:46,269 +Or, if you want to build +more business logic + +18 +00:00:46,269 --> 00:00:48,240 +into your frontend from the get go, + +19 +00:00:48,240 --> 00:00:50,611 +Vue has the core libraries +and the ecosystem + +20 +00:00:50,611 --> 00:00:52,421 +you'll need to scale. + +21 +00:00:52,421 --> 00:00:53,829 +Like other frontend frameworks, + +22 +00:00:53,829 --> 00:00:55,960 +Vue allows you to take a +web page and split it up + +23 +00:00:55,960 --> 00:01:00,000 +into reusable components, +each having its own HTML, + +24 +00:01:00,000 --> 00:01:02,291 +CSS, and JavaScript needed to render + +25 +00:01:02,291 --> 00:01:04,269 +that piece of the page. + +26 +00:01:04,269 --> 00:01:06,260 +Next, we'll take a look +at Vue in action by + +27 +00:01:06,260 --> 00:01:08,301 +building a product inventory page, + +28 +00:01:08,301 --> 00:01:10,187 +but stay tuned to the end of the video + +29 +00:01:10,187 --> 00:01:13,571 +for a message from +Vue's creator, Evan You. + +30 +00:01:13,571 --> 00:01:15,301 +We won't be teaching you how to use Vue, + +31 +00:01:15,301 --> 00:01:16,981 +but we'll introduce a couple key concepts + +32 +00:01:16,981 --> 00:01:19,460 +that make Vue so useful. + +33 +00:01:19,460 --> 00:01:21,200 +As with many JavaScript applications, + +34 +00:01:21,200 --> 00:01:24,272 +we start from the need to +display data on to our web page. + +35 +00:01:24,272 --> 00:01:26,591 +With Vue, it starts out really simple. + +36 +00:01:26,591 --> 00:01:29,745 +We include the Vue library, +create a Vue instance, + +37 +00:01:29,745 --> 00:01:33,673 +and plug into our root +element with the ID of app. + +38 +00:01:33,673 --> 00:01:36,032 +E L stands for element. + +39 +00:01:36,032 --> 00:01:39,505 +We'll also move our data inside an object + +40 +00:01:39,505 --> 00:01:41,993 +and change X into an expression + +41 +00:01:41,993 --> 00:01:44,544 +with the double curly braces. + +42 +00:01:44,544 --> 00:01:46,945 +As you can see, it works. + +43 +00:01:46,945 --> 00:01:50,695 +Pretty cool, but the magic of +Vue starts when data changes. + +44 +00:01:50,695 --> 00:01:51,975 +If we jump into the console, + +45 +00:01:51,975 --> 00:01:54,735 +we change the value of our product. + +46 +00:01:54,735 --> 00:01:57,324 +Notice that as soon as the +value of product changed, + +47 +00:01:57,324 --> 00:01:59,953 +Vue automatically updated our HTML. + +48 +00:01:59,953 --> 00:02:01,745 +This is because Vue is reactive, + +49 +00:02:01,745 --> 00:02:03,273 +meaning that when our data changes, + +50 +00:02:03,273 --> 00:02:05,193 +Vue takes care of updating all the places + +51 +00:02:05,193 --> 00:02:07,255 +we're using it in our web page. + +52 +00:02:07,255 --> 00:02:10,305 +This works with any kind +of data, not just strings. + +53 +00:02:10,305 --> 00:02:11,604 +So instead of a single product, + +54 +00:02:11,604 --> 00:02:14,604 +let's use an array of products. + +55 +00:02:14,604 --> 00:02:17,865 +Then we'll update our +H2 to an unordered list, + +56 +00:02:17,865 --> 00:02:20,535 +and create a new list item +for each product in the array + +57 +00:02:20,535 --> 00:02:22,618 +using Vue's v-for directive. + +58 +00:02:24,353 --> 00:02:26,615 +This way, each product +gets its own list item + +59 +00:02:26,615 --> 00:02:28,495 +as you see here. + +60 +00:02:28,495 --> 00:02:30,352 +This is still a little contrived though. + +61 +00:02:30,352 --> 00:02:32,312 +So let's start with our list empty + +62 +00:02:32,312 --> 00:02:34,815 +and fetch our products from an actual API + +63 +00:02:34,815 --> 00:02:37,433 +which could be coming +from a database somewhere. + +64 +00:02:37,433 --> 00:02:38,863 +When our app is created, + +65 +00:02:38,863 --> 00:02:41,866 +we'll fetch the latest +products from this API. + +66 +00:02:41,866 --> 00:02:43,199 +All you need to take from it is that + +67 +00:02:43,199 --> 00:02:45,063 +we're fetching our list of products + +68 +00:02:45,063 --> 00:02:46,923 +and updating them in our data. + +69 +00:02:46,923 --> 00:02:48,281 +As you can see on our web page, + +70 +00:02:48,281 --> 00:02:51,435 +each list item is showing +the object it returned. + +71 +00:02:51,435 --> 00:02:53,474 +Well, it's not human readable yet, + +72 +00:02:53,474 --> 00:02:56,265 +so let's change the way it's displayed. + +73 +00:02:56,265 --> 00:02:59,643 +We'll print out quantity and name. + +74 +00:02:59,643 --> 00:03:02,265 +And there it is, printing out nicely. + +75 +00:03:02,265 --> 00:03:03,563 +We might want to call attention to the + +76 +00:03:03,563 --> 00:03:05,675 +items that have quantity zero. + +77 +00:03:05,675 --> 00:03:09,595 +So let's add a little span +with the text, out of stock. + +78 +00:03:09,595 --> 00:03:13,334 +This should only appear if +our item quantity equals zero. + +79 +00:03:13,334 --> 00:03:16,134 +We're going to use the v-if directive. + +80 +00:03:16,134 --> 00:03:20,362 +Because our jacket has quantity +of zero, it's out of stock. + +81 +00:03:20,362 --> 00:03:22,081 +What if we wanted to +print out the total number + +82 +00:03:22,081 --> 00:03:24,641 +of products under our list? + +83 +00:03:24,641 --> 00:03:26,468 +To make this work, we need to create + +84 +00:03:26,468 --> 00:03:29,570 +a computed property called totalProducts + +85 +00:03:29,570 --> 00:03:34,228 +which returns the total +quantity of our products. + +86 +00:03:34,228 --> 00:03:36,490 +If you're not familiar +with JavaScript reduce, + +87 +00:03:36,490 --> 00:03:40,468 +it's adding up all the +quantities from each product. + +88 +00:03:40,468 --> 00:03:41,851 +As you can see, over in our browser, + +89 +00:03:41,851 --> 00:03:45,308 +it's properly adding +up all the quantities. + +90 +00:03:45,308 --> 00:03:47,588 +Here in the browser, I +want to show you Vue's + +91 +00:03:47,588 --> 00:03:51,380 +Chrome plugin where we +can see our array of data + +92 +00:03:51,380 --> 00:03:53,547 +and inspect it right here. + +93 +00:03:55,108 --> 00:03:57,460 +Since we're in the console, just for fun, + +94 +00:03:57,460 --> 00:03:59,850 +let's pop the last item out of the array + +95 +00:03:59,850 --> 00:04:01,828 +and see what happens. + +96 +00:04:01,828 --> 00:04:04,359 +As you can see, not only +is our list updated, + +97 +00:04:04,359 --> 00:04:07,940 +but our total as well, as you would hope. + +98 +00:04:07,940 --> 00:04:10,410 +Next, let's add some +interactivity to this page + +99 +00:04:10,410 --> 00:04:12,346 +through the use of a button. + +100 +00:04:12,346 --> 00:04:14,490 +We'll create an add +button for each product + +101 +00:04:14,490 --> 00:04:15,850 +and when a click occurs, + +102 +00:04:15,850 --> 00:04:18,850 +we'll increment the quantity by one. + +103 +00:04:19,959 --> 00:04:22,279 +Back in the browser, notice +how when we add an item, + +104 +00:04:22,279 --> 00:04:25,159 +not only does the total +inventory get updated, + +105 +00:04:25,159 --> 00:04:27,780 +but also if we increment +our jacket product, + +106 +00:04:27,780 --> 00:04:30,300 +our out of stock notice goes away. + +107 +00:04:30,300 --> 00:04:31,860 +Clicking this button a million times + +108 +00:04:31,860 --> 00:04:33,890 +is going to get tiring, +so what if we wanted to + +109 +00:04:33,890 --> 00:04:37,719 +write in the quantity of +jackets or hiking socks? + +110 +00:04:37,719 --> 00:04:40,580 +We just create a new input +field and bind it to our + +111 +00:04:40,580 --> 00:04:43,867 +product quantity field +with the v-model directive + +112 +00:04:43,867 --> 00:04:46,519 +specifying that it is always a number. + +113 +00:04:46,519 --> 00:04:48,060 +You'll notice now, I can input the total + +114 +00:04:48,060 --> 00:04:52,450 +quantity of each item and +it gets updated immediately. + +115 +00:04:52,450 --> 00:04:54,500 +I can even set the quantity back to zero + +116 +00:04:54,500 --> 00:04:57,899 +and I get my out of stock statement. + +117 +00:04:57,899 --> 00:05:01,232 +And my add buttons still work just fine. + +118 +00:05:02,259 --> 00:05:03,999 +If we were building a larger application, + +119 +00:05:03,999 --> 00:05:05,839 +we might want to split +things up at this point + +120 +00:05:05,839 --> 00:05:09,290 +into their own components and files. + +121 +00:05:09,290 --> 00:05:11,827 +Vue even has a command line interface + +122 +00:05:11,827 --> 00:05:15,828 +which makes it simple to +start real projects quickly. + +123 +00:05:15,828 --> 00:05:18,879 +We might even use single +file Vue components + +124 +00:05:18,879 --> 00:05:21,770 +which contain their own HTML, JavaScript, + +125 +00:05:21,770 --> 00:05:23,687 +and Scoped CSS, or SCSS. + +126 +00:05:25,599 --> 00:05:28,926 +- Hi, I'm Evan You, the creator of Vue.js. + +127 +00:05:28,926 --> 00:05:31,587 +What you've seen here +barely scratched the surface + +128 +00:05:31,587 --> 00:05:33,065 +of what Vue can do. + +129 +00:05:33,065 --> 00:05:34,856 +There's so much more in the ecosystem + +130 +00:05:34,856 --> 00:05:36,555 +to help you build, organize, + +131 +00:05:36,555 --> 00:05:39,076 +and scale your frontend applications. + +132 +00:05:39,076 --> 00:05:42,457 +To get a better taste, read +our documentation today. + +133 +00:05:42,457 --> 00:05:44,708 +I think you'll enjoy the View. diff --git a/package.json b/package.json index bb9fd18b5a..8617ac336b 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ }, "scripts": { "start": "hexo server", - "deploy": "node pre-deploy.js && hexo clean && hexo generate && hexo deploy" + "build": "node pre-deploy.js && hexo clean && hexo generate", + "deploy": "npm run build && hexo deploy" }, "dependencies": { "hexo": "^3.4.2", diff --git a/pre-deploy.js b/pre-deploy.js index db6ff70b4e..1abac6b4fa 100644 --- a/pre-deploy.js +++ b/pre-deploy.js @@ -39,6 +39,7 @@ Promise.all([ installation .replace(/vue_version: .*/, 'vue_version: ' + version) .replace(/gz_size:.*/g, `gz_size: "${prodSize}"`) + .replace(/\/vue@[\d\.]+\//g, `/vue@${version}/`) ) console.log(`\nSuccessfully updated Vue version and gzip file size.\n`) }).catch(err => { diff --git a/src/CNAME b/src/CNAME deleted file mode 100644 index 998cc417c8..0000000000 --- a/src/CNAME +++ /dev/null @@ -1 +0,0 @@ -vuejs.org diff --git a/src/images/components.png b/src/images/components.png index c0374d612f..eb70aa81ea 100644 Binary files a/src/images/components.png and b/src/images/components.png differ diff --git a/src/images/data.png b/src/images/data.png index a2a1cb1048..12134f4bc0 100644 Binary files a/src/images/data.png and b/src/images/data.png differ diff --git a/src/images/dom-tree.png b/src/images/dom-tree.png index 9879bbfd0f..245942e852 100644 Binary files a/src/images/dom-tree.png and b/src/images/dom-tree.png differ diff --git a/src/images/hn-architecture.png b/src/images/hn-architecture.png index 564209bb97..95efbd325d 100644 Binary files a/src/images/hn-architecture.png and b/src/images/hn-architecture.png differ diff --git a/src/images/hn.png b/src/images/hn.png index 31d133c492..5f0f90e534 100644 Binary files a/src/images/hn.png and b/src/images/hn.png differ diff --git a/src/images/lifecycle.png b/src/images/lifecycle.png index d8e049e5bf..f8cd62c51f 100644 Binary files a/src/images/lifecycle.png and b/src/images/lifecycle.png differ diff --git a/src/images/logged-proxied-data.png b/src/images/logged-proxied-data.png index dfc0c51648..310105ac04 100644 Binary files a/src/images/logged-proxied-data.png and b/src/images/logged-proxied-data.png differ diff --git a/src/images/mvvm.png b/src/images/mvvm.png index 135fecda5e..07683a8600 100644 Binary files a/src/images/mvvm.png and b/src/images/mvvm.png differ diff --git a/src/images/props-events.png b/src/images/props-events.png index 9f28863e3d..15e5f05630 100644 Binary files a/src/images/props-events.png and b/src/images/props-events.png differ diff --git a/src/images/state.png b/src/images/state.png index 5ea9b7a513..14dc051657 100644 Binary files a/src/images/state.png and b/src/images/state.png differ diff --git a/src/images/transition.png b/src/images/transition.png index 4dbb7d219e..f2cf80182b 100644 Binary files a/src/images/transition.png and b/src/images/transition.png differ diff --git a/src/images/typescript-type-error.png b/src/images/typescript-type-error.png index 6844c4edad..66218c9eff 100644 Binary files a/src/images/typescript-type-error.png and b/src/images/typescript-type-error.png differ diff --git a/src/images/vue-component-with-preprocessors.png b/src/images/vue-component-with-preprocessors.png index ed089fc8c6..5eef29ccf5 100644 Binary files a/src/images/vue-component-with-preprocessors.png and b/src/images/vue-component-with-preprocessors.png differ diff --git a/src/images/vue-component.png b/src/images/vue-component.png index b48034016c..9a0f34fb90 100644 Binary files a/src/images/vue-component.png and b/src/images/vue-component.png differ diff --git a/src/support-vuejs/index.md b/src/support-vuejs/index.md index abb8f38da9..e010c9081d 100644 --- a/src/support-vuejs/index.md +++ b/src/support-vuejs/index.md @@ -1,129 +1,3 @@ -# Support Vue.js Development - -Vue.js is an MIT licensed open source project and completely free to use. -However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support Vue.js development via the following methods: - -## One-time Donations - -We accept donations through these channels: - - - -{% raw %} -
-

{{ coins[type].name }} Address:
{{ coins[type].address }}

- -
-{% endraw %} - - - -## Recurring Pledges - -Recurring pledges come with exclusive perks, e.g. having your name listed in the Vue GitHub repository, or have your company logo placed on this website. - -- [Become a backer or sponsor via Patreon](https://www.patreon.com/evanyou) (goes directly to support Evan You's full-time work on Vue) - -- [Become a backer or sponsor via OpenCollective](https://opencollective.com/vuejs) (goes into a fund with transparent expense models supporting community efforts and events) - -## Current Premium Sponsors: - -### Platinum - -

- - - - - - - - - -

- -### OpenCollective Platinum - - - -### Patreon Gold - - - -### OpenCollective Gold - - - -If you run a business and are using Vue in a revenue-generating product, it makes business sense to sponsor Vue development: **it ensures the project that your product relies on stays healthy and actively maintained.** It can also help your exposure in the Vue community and makes it easier to attract Vue developers. - -If you are a business that is building core products using Vue.js, I am also open to conversations regarding custom sponsorship / consulting arrangements. [Get in touch on Twitter](https://twitter.com/youyuxi). - -If you are an individual user and have enjoyed the productivity of using Vue, consider donating as a sign of appreciation - like buying me coffee once in a while :) +--- +sponsors: true +--- diff --git a/src/v2/api/index.md b/src/v2/api/index.md index 5e99f20c28..af9ae26b9a 100644 --- a/src/v2/api/index.md +++ b/src/v2/api/index.md @@ -327,6 +327,8 @@ type: api var myFilter = Vue.filter('my-filter') ``` +- **See also:** [Filters](../guide/filters.html) + ### Vue.component( id, [definition] ) - **Arguments:** @@ -592,7 +594,7 @@ type: api ### watch -- **Type:** `{ [key: string]: string | Function | Object }` +- **Type:** `{ [key: string]: string | Function | Object | Array}` - **Details:** @@ -606,7 +608,12 @@ type: api a: 1, b: 2, c: 3, - d: 4 + d: 4, + e: { + f: { + g: 5 + } + } }, watch: { a: function (val, oldVal) { @@ -623,7 +630,13 @@ type: api d: { handler: function (val, oldVal) { /* ... */ }, immediate: true - } + }, + e: [ + function handle1 (val, oldVal) { /* ... */ }, + function handle2 (val, oldVal) { /* ... */ } + ], + // watch vm.e.f's value: {g: 5} + 'e.f': function (val, oldVal) { /* ... */ } } }) vm.a = 2 // => new: 2, old: 1 @@ -781,11 +794,9 @@ type: api - **Details:** - Called when the data changes, before the virtual DOM is re-rendered and patched. - - You can perform further state changes in this hook and they will not trigger additional re-renders. + Called when data changes, before the DOM is patched. This is a good place to access the existing DOM before an update, e.g. to remove manually added event listeners. - **This hook is not called during server-side rendering.** + **This hook is not called during server-side rendering, because only the initial render is performed server-side.** - **See also:** [Lifecycle Diagram](../guide/instance.html#Lifecycle-Diagram) @@ -1708,7 +1719,7 @@ type: api - **Usage:** - Toggle's the element's `display` CSS property based on the truthy-ness of the expression value. + Toggles the element's `display` CSS property based on the truthy-ness of the expression value. This directive triggers transitions when its condition changes. diff --git a/src/v2/cookbook/adding-instance-properties.md b/src/v2/cookbook/adding-instance-properties.md index b9b03d6abb..6c67dc369b 100644 --- a/src/v2/cookbook/adding-instance-properties.md +++ b/src/v2/cookbook/adding-instance-properties.md @@ -1,7 +1,7 @@ --- title: Adding Instance Properties type: cookbook -order: 1.1 +order: 1.3 --- ## Simple Example diff --git a/src/v2/cookbook/unit-testing-vue-components.md b/src/v2/cookbook/unit-testing-vue-components.md new file mode 100644 index 0000000000..e8c5a95825 --- /dev/null +++ b/src/v2/cookbook/unit-testing-vue-components.md @@ -0,0 +1,247 @@ +--- +title: Unit Testing Vue Components +type: cookbook +order: 1.4 +--- + +## Simple Example + +Unit testing is a fundamental part of software development. Unit tests execute the smallest units of code in isolation, in order to increase ease of adding new features and track down bugs. Vue's [single-file components](./single-file-components.html) make it straight forward to write unit tests for components in isolation. This lets you develop new features with confidence you are not breaking existing ones, and helps other developers understand what your component does. + +This simple example tests whether some text is rendered: + +```html + + + +``` + +```js +import { shallow } from 'vue-test-utils' + +test('Foo', () => { + // render the component + const wrapper = shallow(Hello) + + // should not allow for username less than 7 characters, excludes whitespace + wrapper.setData({ username: ' '.repeat(7) }) + + // assert the error is rendered + expect(wrapper.find('.error').exists()).toBe(true) + + // update the name to be long enough + wrapper.setData({ + username: { + 'Lachlan' + } + }) + + // assert the error has gone away + expect(wrapper.find('.error').exists()).toBe(false) +}) +``` + +The above code snippet shows how to test whether an error message is rendered based on the length of the username. It demonstrates the general idea of unit testing Vue components: render the component, and assert that the markup matches the state of the component. + +## Why test? + +Component unit tests have lots of benefits: +- Provide documentation on how the component should behave +- Save time over testing manually +- Reduce bugs in new features +- Improve design +- Facilitate refactoring + +Automated testing allows large teams of developers to maintain complex codebases. + +#### Getting started + +[vue-test-utils](https://github.com/vuejs/vue-test-utils) is the official library for unit testing Vue components. The (vue-cli)[https://github.com/vuejs/vue-cli] webpack template comes with either Karma or Jest, both well supported test runners, and there are some (guides)[https://vue-test-utils.vuejs.org/en/guides/] in the `vue-test-utils` documentation. + +## Real-World Example + +Unit tests should be +- Fast to run +- Easy to understand +- Only test a _single unit of work_ + +Let's continue building on the previous example, while introducing the idea of a [factory function](https://en.wikipedia.org/wiki/Factory_(object-oriented_programming)) to make our test more compact and readable. The component should: + +- show a 'Welcome to the Vue.js cookbook' greeting. +- prompt the user to enter their username +- if the entered username is less than seven letters, display an error + +Let's take a look at the component code first: + +```html + + + +``` + +The things that we should test are: +- is the `message` rendered? +- if `error` is `true`, `
should be present +- if `error` is `false`, `
should not be present + +And our first attempt at at test: + +```js +import { shallow } from 'vue-test-utils' + +describe('Foo', () => { + it('renders a message and responds correctly to user input', () => { + const wrapper = shallow(Foo, { + data: { + message: 'Hello World', + username: '' + } + }) + + // see if the message renders + expect(wrapper.find('.message').text()).toEqual('Hello World') + + // assert the error is rendered + expect(wrapper.find('.error').exists()).toBeTruthy() + + // update the username and assert error is longer rendered + wrapper.setData({ username: 'Lachlan' }) + expect(wrapper.find('.error').exists()).toBeFalsy() + }) +}) +``` + +There are some problems with the above: +- a single test is making assertions about different things +- difficult to tell the different states the component can be in, and what should be rendered + +The below example improves the test by: +- only making one assertion per `it` block +- having short, clear test descriptions +- providing only the minimum data requires for the test +- refactoring duplucated logic (creating the `wrapper` and setting the `username` variable) into a factory function + +*Updated test*: +```js +import { shallow } from 'vue-test-utils' +import Foo from './Foo' + +const factory = (values = {}) => { + return shallow(Foo, { + data: { ...values } + }) +} + +describe('Foo', () => { + it('renders a welcome message', () => { + const wrapper = factory() + + expect(wrapper.find('.message').text()).toEqual("Welcome to the Vue.js cookbook") + }) + + it('renders an error when username is less than 7 characters', () => { + const wrapper = factory({ username: '' }) + + expect(wrapper.find('.error').exists()).toBeTruthy() + }) + + it('renders an error when username is whitespace', () => { + const wrapper = factory({ username: ' '.repeat(7) }) + + expect(wrapper.find('.error').exists()).toBeTruthy() + }) + + it('does not render an error when username is 7 characters or more', () => { + const wrapper = factory({ username: 'Lachlan' }) + + expect(wrapper.find('.error').exists()).toBeFalsy() + }) +}) +``` + +Points to note: + +At the top, we declare the factory function which merges the `values` object into `data` and returns a new `wrapper` instance. This way, we don't need to duplicate `const wrapper = shallow(Foo)` in every test. Another great benefit to this is when more complex components with a method or computed property you might want to mock or stub in every test, you only need to declare it once. + +## Additional Context + +Thee above test is fairly simple, but in practise Vue components often have other behaviors you want to test, such as: + +- making API calls +- committing or dispatching mutations or actions with a `Vuex` store +- testing interaction + +There are more complete examples showing such tests in the `vue-test-utils` [guides](https://vue-test-utils.vuejs.org/en/guides/). + +`vue-test-utils` and the enormous JavaScript ecosystem provides plenty of tooling to facilitate almost 100% test coverage. Unit tests are only one part of the testing pyramid, though. Some other types of tests include e2e (end to end) tests, and snapshot tests. Unit tests are the smallest and most simple of tests - they make assertions on the smallest units of work, isolating each part of a single component. + +Snapshot tests save the markup of your Vue component, and compare to the new one generated each time the test runs. If something changes, the developer is notified, and can decide if the change was intentional (the component was updated) or accidentally (the component is behaving incorrectly). + +End to end tests involve ensure a number of components interact together well. They are more high level. Some examples might be testing if a user can sign up, log in, and update their username. These are slowly to run than unit tests or snapshot tests. + +Unit tests are most useful during development, either to help a developer think about how to design a component, or refactor an existing component, and are often run every time code is changed. + +Higher level tests, such as end to end tests, run much slower. These usually run pre-deploy, to ensure each part of the system is working together correctly. + +More information about testing Vue components can be found in [Testing Vue.js Applications](https://www.manning.com/books/testing-vuejs-applications) by core team member [Edd Yerburgh](https://eddyerburgh.me/). + +## When To Avoid This Pattern + +Unit testing is an important part of any serious application. At first, when the vision of an application is not clear, unit testing might slow down development, but once a vision is established and real users will be interacting with the application, unit tests (and other types of automated tests) are absolutely essential to ensure the codebase is maintainable and scalable. diff --git a/src/v2/examples/hackernews.md b/src/v2/examples/hackernews.md index 781c02d0a8..9f87349a16 100644 --- a/src/v2/examples/hackernews.md +++ b/src/v2/examples/hackernews.md @@ -9,7 +9,7 @@ order: 12 {% raw %}
- +
{% endraw %} @@ -32,4 +32,4 @@ order: 12 ## Architecture Overview -Hackernew clone architecture overview +Hackernew clone architecture overview diff --git a/src/v2/examples/tree-view.md b/src/v2/examples/tree-view.md index 071bfb1d5e..f0d34bfe8d 100644 --- a/src/v2/examples/tree-view.md +++ b/src/v2/examples/tree-view.md @@ -6,4 +6,4 @@ order: 4 > Example of a simple tree view implementation showcasing recursive usage of components. - + diff --git a/src/v2/guide/comparison.md b/src/v2/guide/comparison.md index e411045513..1a91533a36 100644 --- a/src/v2/guide/comparison.md +++ b/src/v2/guide/comparison.md @@ -120,7 +120,7 @@ Since you don't need to know about JSX, ES2015, or build systems to get started ### Native Rendering -React Native enables you to write native-rendered apps for iOS and Android using the same React component model. This is great in that as a developer, you can apply your knowledge of a framework across multiple platforms. On this front, Vue has an official collaboration with [Weex](https://alibaba.github.io/weex/), a cross-platform UI framework developed by Alibaba Group, which uses Vue as its JavaScript framework runtime. This means with Weex, you can use the same Vue component syntax to author components that can not only be rendered in the browser, but also natively on iOS and Android! +React Native enables you to write native-rendered apps for iOS and Android using the same React component model. This is great in that as a developer, you can apply your knowledge of a framework across multiple platforms. On this front, Vue has an official collaboration with [Weex](https://weex.apache.org/), a cross-platform UI framework created by Alibaba Group and being incubated by the Apache Software Foundation (ASF). Weex allows you to use the same Vue component syntax to author components that can not only be rendered in the browser, but also natively on iOS and Android! At this moment, Weex is still in active development and is not as mature and battle-tested as React Native, but its development is driven by the production needs of the largest e-commerce business in the world, and the Vue team will also actively collaborate with the Weex team to ensure a smooth experience for Vue developers. diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md index c948f931c7..f855164299 100644 --- a/src/v2/guide/components.md +++ b/src/v2/guide/components.md @@ -1330,7 +1330,7 @@ In our case, let's make that point the `tree-folder` component. We know the chil ``` js beforeCreate: function () { - this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue') + this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default } ``` diff --git a/src/v2/guide/computed.md b/src/v2/guide/computed.md index 1fd03996d3..fdf9fdcc62 100644 --- a/src/v2/guide/computed.md +++ b/src/v2/guide/computed.md @@ -213,7 +213,7 @@ var watchExampleVM = new Vue({ }, watch: { // whenever question changes, this function will run - question: function (newQuestion) { + question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...' this.getAnswer() } @@ -271,7 +271,7 @@ var watchExampleVM = new Vue({ answer: 'I cannot give you an answer until you ask a question!' }, watch: { - question: function (newQuestion) { + question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...' this.getAnswer() } diff --git a/src/v2/guide/deployment.md b/src/v2/guide/deployment.md index 054b03344f..e6dc44bdca 100644 --- a/src/v2/guide/deployment.md +++ b/src/v2/guide/deployment.md @@ -53,7 +53,7 @@ module.exports = { var envify = require('envify/custom') browserify(browserifyOptions) - .transform(vueify), + .transform(vueify) .transform( // Required in order to process node_modules files { global: true }, @@ -61,6 +61,29 @@ module.exports = { ) .bundle() ``` + +- Or, using [envify](https://github.com/hughsk/envify) with Grunt and [grunt-browserify](https://github.com/jmreidy/grunt-browserify): + + ``` js + // Use the envify custom module to specify environment variables + var envify = require('envify/custom') + + browserify: { + dist: { + options: { + // Function to deviate from grunt-browserify's default order + configure: b => b + .transform('vueify') + .transform( + // Required in order to process node_modules files + { global: true }, + envify({ NODE_ENV: 'production' }) + ) + .bundle() + } + } + } + ``` #### Rollup diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 34f4da1ee7..77347cb00f 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -207,16 +207,18 @@ Unlike the other modifiers, which are exclusive to native DOM events, the `.once > New in 2.3.0+ +Vue also offers the `.passive` modifier, corresponding to [`addEventListener`'s `passive` option](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters). + ``` html - + + +
...
``` -In addition to these modifiers, Vue provides `.passive` modifier to improve the performance on mobile especially. -For example, when performing a scroll, the browser will scroll after the process has completed because the browser doesn’t know if the event is going to call `event.preventDefault()` within its handler. -`.passive` modifier can be used to tell the browser that this event will not cancel the default event behavior in advance. +The `.passive` modifier is especially useful for improving performance on mobile devices. -

Don't use `.passive` and `.prevent` together. Passive handler can't prevent default event.

+

Don't use `.passive` and `.prevent` together, because `.prevent` will be ignored and your browser will probably show you a warning. Remember, `.passive` communicates to the browser that you _don't_ want to prevent the event's default behavior.

## Key Modifiers @@ -256,7 +258,7 @@ You can also [define custom key modifier aliases](../api/#keyCodes) via the glob Vue.config.keyCodes.f1 = 112 ``` -### Automatic Key Modifers +### Automatic Key Modifiers > New in 2.5.0+ diff --git a/src/v2/guide/filters.md b/src/v2/guide/filters.md index 529efaddd9..4a6eecdbf2 100644 --- a/src/v2/guide/filters.md +++ b/src/v2/guide/filters.md @@ -26,7 +26,7 @@ filters: { } ``` -or define a filter globally: +or define a filter globally before creating the Vue instance: ``` js Vue.filter('capitalize', function (value) { @@ -34,6 +34,10 @@ Vue.filter('capitalize', function (value) { value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) + +new Vue({ + // ... +}) ``` Below is an example of our `capitalize` filter being used: diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index f2b3e9d703..a19df7a4fa 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -8,6 +8,8 @@ order: 2 Vue (pronounced /vjuː/, like **view**) is a **progressive framework** for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with [modern tooling](single-file-components.html) and [supporting libraries](https://github.com/vuejs/awesome-vue#components--libraries). +If you’d like to learn more about Vue before diving in, we created a video walking through the core principles and a sample project. + If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the [Comparison with Other Frameworks](comparison.html). ## Getting Started @@ -374,3 +376,5 @@ You may have noticed that Vue components are very similar to **Custom Elements** ## Ready for More? We've briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all! + + diff --git a/src/v2/guide/installation.md b/src/v2/guide/installation.md index 9b06ee709e..eb01c6a937 100644 --- a/src/v2/guide/installation.md +++ b/src/v2/guide/installation.md @@ -8,7 +8,7 @@ gz_size: "30.67" ### Compatibility Note -Vue does **not** support IE8 and below, because it uses ECMAScript 5 features that are un-shimmable in IE8. However it supports all [ECMAScript 5 compliant browsers](http://caniuse.com/#feat=es5). +Vue does **not** support IE8 and below, because it uses ECMAScript 5 features that are un-shimmable in IE8. However it supports all [ECMAScript 5 compliant browsers](https://caniuse.com/#feat=es5). ### Release Notes @@ -34,9 +34,18 @@ Simply download and include with a script tag. `Vue` will be registered as a glo ### CDN -Recommended: [https://cdn.jsdelivr.net/npm/vue](https://cdn.jsdelivr.net/npm/vue), which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at [https://cdn.jsdelivr.net/npm/vue/](https://cdn.jsdelivr.net/npm/vue/). +We recommend linking to a specific version number that you can update manually: -Also available on [unpkg](https://unpkg.com/vue) and [cdnjs](https://cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.js) (cdnjs takes some time to sync so the latest release may not be available yet). +``` html + +``` + +You can browse the source of the NPM package at [cdn.jsdelivr.net/npm/vue](https://cdn.jsdelivr.net/npm/vue/). + +Vue is also available on [unpkg](https://unpkg.com/vue@{{vue_version}}/dist/vue.js) and [cdnjs](https://cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.js) (cdnjs takes some time to sync so the latest release may not be available yet). + +Make sure to read about [the different builds of Vue](#Explanation-of-Different-Builds) and use the **production + version** in your published site, replacing `vue.js` with `vue.min.js`. This is a smaller build optimized for speed instead of development experience. ## NPM diff --git a/src/v2/guide/list.md b/src/v2/guide/list.md index 6f22436b1f..0c0183bebf 100644 --- a/src/v2/guide/list.md +++ b/src/v2/guide/list.md @@ -322,13 +322,13 @@ Vue.set(vm.userProfile, 'age', 27) You can also use the `vm.$set` instance method, which is an alias for the global `Vue.set`: ``` js -vm.$set(this.userProfile, 'age', 27) +vm.$set(vm.userProfile, 'age', 27) ``` Sometimes you may want to assign a number of new properties to an existing object, for example using `Object.assign()` or `_.extend()`. In such cases, you should create a fresh object with properties from both objects. So instead of: ``` js -Object.assign(this.userProfile, { +Object.assign(vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) @@ -337,7 +337,7 @@ Object.assign(this.userProfile, { You would add new, reactive properties with: ``` js -this.userProfile = Object.assign({}, this.userProfile, { +vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) diff --git a/src/v2/guide/mixins.md b/src/v2/guide/mixins.md index 218c1fd7ec..e18a9c8f70 100644 --- a/src/v2/guide/mixins.md +++ b/src/v2/guide/mixins.md @@ -33,7 +33,36 @@ var component = new Component() // => "hello from mixin!" ## Option Merging -When a mixin and the component itself contain overlapping options, they will be "merged" using appropriate strategies. For example, hook functions with the same name are merged into an array so that all of them will be called. In addition, mixin hooks will be called **before** the component's own hooks: +When a mixin and the component itself contain overlapping options, they will be "merged" using appropriate strategies. + +For example, data objects undergo a shallow merge (one property deep), with the component's data taking priority in cases of conflicts. + +``` js +var mixin = { + data: function () { + return { + message: 'hello', + foo: 'abc' + } + } +} + +new Vue({ + mixins: [mixin], + data: function () { + return { + message: 'goodbye', + bar: 'def' + } + }, + created: function () { + console.log(this.$data) + // => { message: "goodbye", foo: "abc", bar: "def" } + } +}) +``` + +Hook functions with the same name are merged into an array so that all of them will be called. Mixin hooks will be called **before** the component's own hooks. ``` js var mixin = { diff --git a/src/v2/guide/team.md b/src/v2/guide/team.md index 08de52a1e3..fd58a17260 100644 --- a/src/v2/guide/team.md +++ b/src/v2/guide/team.md @@ -198,6 +198,7 @@ order: 803 'Annecy, France': [45.899247, 6.129384], 'Alicante, Spain' : [38.346543, -0.483838], 'Bangalore, India': [12.971599, 77.594563], + 'Beijing, China': [39.904200, 116.407396], 'Bordeaux, France': [44.837789, -0.579180], 'Bucharest, Romania': [44.426767, 26.102538], 'Chengdu, China': [30.572815, 104.066801], @@ -492,6 +493,7 @@ order: 803 orgUrl: 'https://livestorm.co/' }, reposOfficial: [ + 'vue-devtools', 'vue-curated' ], reposPersonal: [ @@ -600,7 +602,7 @@ order: 803 { name: 'kingwl', title: 'New Bee', - city: 'Beijin, China', + city: 'Beijing, China', languages: ['zh'], work: { role: 'Software Development Engineer', diff --git a/src/v2/guide/transitioning-state.md b/src/v2/guide/transitioning-state.md index 2b1fb91925..8f32acfb01 100644 --- a/src/v2/guide/transitioning-state.md +++ b/src/v2/guide/transitioning-state.md @@ -445,8 +445,8 @@ Vue.component('animated-integer', { new TWEEN.Tween({ tweeningValue: startValue }) .to({ tweeningValue: endValue }, 500) - .onUpdate(function () { - vm.tweeningValue = this.tweeningValue.toFixed(0) + .onUpdate(function (object) { + vm.tweeningValue = object.tweeningValue.toFixed(0) }) .start() diff --git a/themes/vue/_config.yml b/themes/vue/_config.yml index 545f041264..fa72aac088 100644 --- a/themes/vue/_config.yml +++ b/themes/vue/_config.yml @@ -10,3 +10,39 @@ platinum_sponsors: img: tooltwist.png - url: https://vueschool.io/?utm_source=Vuejs.org&utm_medium=Banner&utm_campaign=Sponsored%20Banner&utm_content=V1 img: vueschool.png + - url: https://www.datacamp.com/careers?utm_source=vuejs&utm_medium=sidebar + img: datacamp.png + +gold_sponsors: + - url: https://laravel.com + img: laravel.png + - url: https://htmlburger.com + img: htmlburger.png + - url: https://chaitin.cn/en/ + img: chaitin.png + - url: http://monterail.com/ + img: monterail.png + - url: https://anymod.com + img: anymod.png + - url: https://www.frontenddeveloperlove.com/ + img: frontend-love.png + - url: https://onsen.io/vue/ + img: onsen-ui.png + - url: https://vuetifyjs.com + img: vuetify.png + - url: https://neds.com.au/ + img: neds.png + - url: https://vuejobs.com/?ref=vuejs + img: vuejobs.png + - url: https://leanpub.com/vuejs2 + img: tmvuejs2.png + +bronze_sponsors: + - url: http://tighten.co/ + img: http://i.imgur.com/T7fQYLT.png + - url: https://alligator.io + img: https://alligator.io/images/alligator-logo.svg + - url: https://www.accelebrate.com/ + img: https://www.accelebrate.com/assets/images/accelebrate_logo@2x.png + - url: https://pullstring.com + img: https://i.imgur.com/hQHW6TB.png diff --git a/themes/vue/layout/icons/bch.ejs b/themes/vue/layout/icons/bch.ejs new file mode 100644 index 0000000000..25a47864b3 --- /dev/null +++ b/themes/vue/layout/icons/bch.ejs @@ -0,0 +1 @@ + diff --git a/themes/vue/layout/icons/btc.ejs b/themes/vue/layout/icons/btc.ejs new file mode 100644 index 0000000000..faebfac46f --- /dev/null +++ b/themes/vue/layout/icons/btc.ejs @@ -0,0 +1 @@ + diff --git a/themes/vue/layout/icons/eth.ejs b/themes/vue/layout/icons/eth.ejs new file mode 100644 index 0000000000..db2b1d2b02 --- /dev/null +++ b/themes/vue/layout/icons/eth.ejs @@ -0,0 +1 @@ + diff --git a/themes/vue/layout/icons/ltc.ejs b/themes/vue/layout/icons/ltc.ejs new file mode 100644 index 0000000000..02939ee1fb --- /dev/null +++ b/themes/vue/layout/icons/ltc.ejs @@ -0,0 +1 @@ + diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs index ba7d51033c..94fcfa6d41 100644 --- a/themes/vue/layout/index.ejs +++ b/themes/vue/layout/index.ejs @@ -82,7 +82,7 @@
+ +

Recurring Pledges

+ +

+Recurring pledges come with exclusive perks, e.g. having your name listed in the Vue GitHub repository, or have your company logo placed on this website. +

+ + + +

Current Premium Sponsors:

+ +

Platinum

+ +

+<%_ for (const sponsor of theme.platinum_sponsors) {_%> + + + +<%_ } _%> +

+ +

OpenCollective Platinum

+ + + +

Patreon Gold

+ + + +

OpenCollective Gold

+ + + +

+If you run a business and are using Vue in a revenue-generating product, it makes business sense to sponsor Vue development: it ensures the project that your product relies on stays healthy and actively maintained. It can also help your exposure in the Vue community and makes it easier to attract Vue developers. +

+ +

+If you are an individual user and have enjoyed the productivity of using Vue, consider donating as a sign of appreciation - like buying me coffee once in a while :) +

diff --git a/themes/vue/source/css/_sponsor.styl b/themes/vue/source/css/_sponsor.styl index 7ad2371345..10f177fe5e 100644 --- a/themes/vue/source/css/_sponsor.styl +++ b/themes/vue/source/css/_sponsor.styl @@ -52,6 +52,14 @@ // support-vuejs page .content + .platinum + text-align center + a + display inline-block + margin 20px + img + width 250px + .sponsor-section text-align center margin-top 0 @@ -59,7 +67,7 @@ .patreon-sponsors a, img - width: 120px + width: 140px display: inline-block vertical-align: middle a diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl index 76b3705f4b..b0cc59ddd4 100644 --- a/themes/vue/source/css/page.styl +++ b/themes/vue/source/css/page.styl @@ -9,6 +9,7 @@ @import "_offline-menu" @import "_team" @import "_style-guide" +@import "_modal" #header box-shadow: 0 0 1px rgba(0,0,0,.25) @@ -53,7 +54,7 @@ margin: 0 0 1em h2, h3 pointer-events: none - a + a, button pointer-events: auto color: $dark &:before @@ -215,7 +216,7 @@ .highlight pre padding: 1.2em 1em .content - padding-left 0 + padding-left: 0 &.with-sidebar margin: auto h2, h3 diff --git a/themes/vue/source/images/100offer.png b/themes/vue/source/images/100offer.png index 3fb9759bb1..4f7f4fe9c0 100644 Binary files a/themes/vue/source/images/100offer.png and b/themes/vue/source/images/100offer.png differ diff --git a/themes/vue/source/images/2mhost.png b/themes/vue/source/images/2mhost.png index 41aa89f234..8569af1692 100644 Binary files a/themes/vue/source/images/2mhost.png and b/themes/vue/source/images/2mhost.png differ diff --git a/themes/vue/source/images/actualize.png b/themes/vue/source/images/actualize.png index eaa4ccbe83..08a918e77d 100644 Binary files a/themes/vue/source/images/actualize.png and b/themes/vue/source/images/actualize.png differ diff --git a/themes/vue/source/images/anymod.png b/themes/vue/source/images/anymod.png index c3bec55661..20d0b8b3aa 100644 Binary files a/themes/vue/source/images/anymod.png and b/themes/vue/source/images/anymod.png differ diff --git a/themes/vue/source/images/chaitin.png b/themes/vue/source/images/chaitin.png index ec5f8d5a6b..e2b41a92cf 100644 Binary files a/themes/vue/source/images/chaitin.png and b/themes/vue/source/images/chaitin.png differ diff --git a/themes/vue/source/images/check.png b/themes/vue/source/images/check.png index 4b364ff36d..298e2b713d 100644 Binary files a/themes/vue/source/images/check.png and b/themes/vue/source/images/check.png differ diff --git a/themes/vue/source/images/coin-bch.png b/themes/vue/source/images/coin-bch.png index 816e5d3307..26c2d0d3e2 100644 Binary files a/themes/vue/source/images/coin-bch.png and b/themes/vue/source/images/coin-bch.png differ diff --git a/themes/vue/source/images/coin-btc.png b/themes/vue/source/images/coin-btc.png index a50459c4ad..e07feece1f 100644 Binary files a/themes/vue/source/images/coin-btc.png and b/themes/vue/source/images/coin-btc.png differ diff --git a/themes/vue/source/images/coin-eth.png b/themes/vue/source/images/coin-eth.png index 40aef76acd..dc3ac5558a 100644 Binary files a/themes/vue/source/images/coin-eth.png and b/themes/vue/source/images/coin-eth.png differ diff --git a/themes/vue/source/images/coin-ltc.png b/themes/vue/source/images/coin-ltc.png index 3f2fbbacd7..a1142e54d0 100644 Binary files a/themes/vue/source/images/coin-ltc.png and b/themes/vue/source/images/coin-ltc.png differ diff --git a/themes/vue/source/images/conf.png b/themes/vue/source/images/conf.png index cb11b01ba2..e23bbf9f3c 100644 Binary files a/themes/vue/source/images/conf.png and b/themes/vue/source/images/conf.png differ diff --git a/themes/vue/source/images/datacamp.png b/themes/vue/source/images/datacamp.png new file mode 100644 index 0000000000..f92a9e98f0 Binary files /dev/null and b/themes/vue/source/images/datacamp.png differ diff --git a/themes/vue/source/images/down.png b/themes/vue/source/images/down.png index 9b742087c4..4027b0f717 100644 Binary files a/themes/vue/source/images/down.png and b/themes/vue/source/images/down.png differ diff --git a/themes/vue/source/images/famebroker.png b/themes/vue/source/images/famebroker.png index 827989b192..e137b2df2f 100644 Binary files a/themes/vue/source/images/famebroker.png and b/themes/vue/source/images/famebroker.png differ diff --git a/themes/vue/source/images/feed.png b/themes/vue/source/images/feed.png index b0da35058b..cbf39571ed 100644 Binary files a/themes/vue/source/images/feed.png and b/themes/vue/source/images/feed.png differ diff --git a/themes/vue/source/images/frontend-love.png b/themes/vue/source/images/frontend-love.png index bdfc5623b8..a2f69923a0 100644 Binary files a/themes/vue/source/images/frontend-love.png and b/themes/vue/source/images/frontend-love.png differ diff --git a/themes/vue/source/images/frontend-meetups.png b/themes/vue/source/images/frontend-meetups.png index 75ad3e0e2f..388bb14d2e 100644 Binary files a/themes/vue/source/images/frontend-meetups.png and b/themes/vue/source/images/frontend-meetups.png differ diff --git a/themes/vue/source/images/htmlburger.png b/themes/vue/source/images/htmlburger.png index d623de96f8..7f6a026a05 100644 Binary files a/themes/vue/source/images/htmlburger.png and b/themes/vue/source/images/htmlburger.png differ diff --git a/themes/vue/source/images/icons.png b/themes/vue/source/images/icons.png index 1866ac5621..ec9aa451a0 100644 Binary files a/themes/vue/source/images/icons.png and b/themes/vue/source/images/icons.png differ diff --git a/themes/vue/source/images/icons/android-icon-144x144.png b/themes/vue/source/images/icons/android-icon-144x144.png index c30cbd9253..c4b2a7425b 100644 Binary files a/themes/vue/source/images/icons/android-icon-144x144.png and b/themes/vue/source/images/icons/android-icon-144x144.png differ diff --git a/themes/vue/source/images/icons/android-icon-192x192.png b/themes/vue/source/images/icons/android-icon-192x192.png index 3a85b3d2a6..9d1d5fe059 100644 Binary files a/themes/vue/source/images/icons/android-icon-192x192.png and b/themes/vue/source/images/icons/android-icon-192x192.png differ diff --git a/themes/vue/source/images/icons/android-icon-36x36.png b/themes/vue/source/images/icons/android-icon-36x36.png index 5ab689783d..8d8696d2b8 100644 Binary files a/themes/vue/source/images/icons/android-icon-36x36.png and b/themes/vue/source/images/icons/android-icon-36x36.png differ diff --git a/themes/vue/source/images/icons/android-icon-48x48.png b/themes/vue/source/images/icons/android-icon-48x48.png index cbfc235969..508524bab7 100644 Binary files a/themes/vue/source/images/icons/android-icon-48x48.png and b/themes/vue/source/images/icons/android-icon-48x48.png differ diff --git a/themes/vue/source/images/icons/android-icon-72x72.png b/themes/vue/source/images/icons/android-icon-72x72.png index e9fc0eb9ea..7dda937b24 100644 Binary files a/themes/vue/source/images/icons/android-icon-72x72.png and b/themes/vue/source/images/icons/android-icon-72x72.png differ diff --git a/themes/vue/source/images/icons/android-icon-96x96.png b/themes/vue/source/images/icons/android-icon-96x96.png index d798f3bdd6..a4756ba4f4 100644 Binary files a/themes/vue/source/images/icons/android-icon-96x96.png and b/themes/vue/source/images/icons/android-icon-96x96.png differ diff --git a/themes/vue/source/images/icons/apple-icon-114x114.png b/themes/vue/source/images/icons/apple-icon-114x114.png index 2c2c15cfc1..f678b645d3 100644 Binary files a/themes/vue/source/images/icons/apple-icon-114x114.png and b/themes/vue/source/images/icons/apple-icon-114x114.png differ diff --git a/themes/vue/source/images/icons/apple-icon-120x120.png b/themes/vue/source/images/icons/apple-icon-120x120.png index ee088e37d8..983cb6b7aa 100644 Binary files a/themes/vue/source/images/icons/apple-icon-120x120.png and b/themes/vue/source/images/icons/apple-icon-120x120.png differ diff --git a/themes/vue/source/images/icons/apple-icon-144x144.png b/themes/vue/source/images/icons/apple-icon-144x144.png index c30cbd9253..c4b2a7425b 100644 Binary files a/themes/vue/source/images/icons/apple-icon-144x144.png and b/themes/vue/source/images/icons/apple-icon-144x144.png differ diff --git a/themes/vue/source/images/icons/apple-icon-152x152.png b/themes/vue/source/images/icons/apple-icon-152x152.png index 6009b97c2c..a0b6ec6dc2 100644 Binary files a/themes/vue/source/images/icons/apple-icon-152x152.png and b/themes/vue/source/images/icons/apple-icon-152x152.png differ diff --git a/themes/vue/source/images/icons/apple-icon-180x180.png b/themes/vue/source/images/icons/apple-icon-180x180.png index 83b1577dc5..997e6156ea 100644 Binary files a/themes/vue/source/images/icons/apple-icon-180x180.png and b/themes/vue/source/images/icons/apple-icon-180x180.png differ diff --git a/themes/vue/source/images/icons/apple-icon-57x57.png b/themes/vue/source/images/icons/apple-icon-57x57.png index acf8558564..0ec32b3fc4 100644 Binary files a/themes/vue/source/images/icons/apple-icon-57x57.png and b/themes/vue/source/images/icons/apple-icon-57x57.png differ diff --git a/themes/vue/source/images/icons/apple-icon-60x60.png b/themes/vue/source/images/icons/apple-icon-60x60.png index 2d5bac8510..0f272ef695 100644 Binary files a/themes/vue/source/images/icons/apple-icon-60x60.png and b/themes/vue/source/images/icons/apple-icon-60x60.png differ diff --git a/themes/vue/source/images/icons/apple-icon-72x72.png b/themes/vue/source/images/icons/apple-icon-72x72.png index e9fc0eb9ea..7dda937b24 100644 Binary files a/themes/vue/source/images/icons/apple-icon-72x72.png and b/themes/vue/source/images/icons/apple-icon-72x72.png differ diff --git a/themes/vue/source/images/icons/apple-icon-76x76.png b/themes/vue/source/images/icons/apple-icon-76x76.png index 8a16d37dc9..bb87549207 100644 Binary files a/themes/vue/source/images/icons/apple-icon-76x76.png and b/themes/vue/source/images/icons/apple-icon-76x76.png differ diff --git a/themes/vue/source/images/icons/apple-icon-precomposed.png b/themes/vue/source/images/icons/apple-icon-precomposed.png index 701d462c3b..9b0c56e10c 100644 Binary files a/themes/vue/source/images/icons/apple-icon-precomposed.png and b/themes/vue/source/images/icons/apple-icon-precomposed.png differ diff --git a/themes/vue/source/images/icons/apple-icon.png b/themes/vue/source/images/icons/apple-icon.png index 701d462c3b..9b0c56e10c 100644 Binary files a/themes/vue/source/images/icons/apple-icon.png and b/themes/vue/source/images/icons/apple-icon.png differ diff --git a/themes/vue/source/images/icons/favicon-16x16.png b/themes/vue/source/images/icons/favicon-16x16.png index 1d30e35310..60be03c855 100644 Binary files a/themes/vue/source/images/icons/favicon-16x16.png and b/themes/vue/source/images/icons/favicon-16x16.png differ diff --git a/themes/vue/source/images/icons/favicon-32x32.png b/themes/vue/source/images/icons/favicon-32x32.png index 81cb15fd71..ce327e8681 100644 Binary files a/themes/vue/source/images/icons/favicon-32x32.png and b/themes/vue/source/images/icons/favicon-32x32.png differ diff --git a/themes/vue/source/images/icons/favicon-96x96.png b/themes/vue/source/images/icons/favicon-96x96.png index d798f3bdd6..a4756ba4f4 100644 Binary files a/themes/vue/source/images/icons/favicon-96x96.png and b/themes/vue/source/images/icons/favicon-96x96.png differ diff --git a/themes/vue/source/images/icons/ms-icon-144x144.png b/themes/vue/source/images/icons/ms-icon-144x144.png index c30cbd9253..c4b2a7425b 100644 Binary files a/themes/vue/source/images/icons/ms-icon-144x144.png and b/themes/vue/source/images/icons/ms-icon-144x144.png differ diff --git a/themes/vue/source/images/icons/ms-icon-150x150.png b/themes/vue/source/images/icons/ms-icon-150x150.png index bb94b67c91..962e04fece 100644 Binary files a/themes/vue/source/images/icons/ms-icon-150x150.png and b/themes/vue/source/images/icons/ms-icon-150x150.png differ diff --git a/themes/vue/source/images/icons/ms-icon-310x310.png b/themes/vue/source/images/icons/ms-icon-310x310.png index c896c12065..264c3f83ab 100644 Binary files a/themes/vue/source/images/icons/ms-icon-310x310.png and b/themes/vue/source/images/icons/ms-icon-310x310.png differ diff --git a/themes/vue/source/images/icons/ms-icon-70x70.png b/themes/vue/source/images/icons/ms-icon-70x70.png index f680d46f05..fde6d8188f 100644 Binary files a/themes/vue/source/images/icons/ms-icon-70x70.png and b/themes/vue/source/images/icons/ms-icon-70x70.png differ diff --git a/themes/vue/source/images/infinitynewtab.png b/themes/vue/source/images/infinitynewtab.png index d46b6bb76e..bfe5a8c48a 100644 Binary files a/themes/vue/source/images/infinitynewtab.png and b/themes/vue/source/images/infinitynewtab.png differ diff --git a/themes/vue/source/images/itunescn.png b/themes/vue/source/images/itunescn.png index 85beefcdc3..7f89ffa8f5 100644 Binary files a/themes/vue/source/images/itunescn.png and b/themes/vue/source/images/itunescn.png differ diff --git a/themes/vue/source/images/jsfiddle.png b/themes/vue/source/images/jsfiddle.png index fe86bd3122..09774391a1 100644 Binary files a/themes/vue/source/images/jsfiddle.png and b/themes/vue/source/images/jsfiddle.png differ diff --git a/themes/vue/source/images/juejin.png b/themes/vue/source/images/juejin.png index 07933faa88..afc07f75af 100644 Binary files a/themes/vue/source/images/juejin.png and b/themes/vue/source/images/juejin.png differ diff --git a/themes/vue/source/images/laravel.png b/themes/vue/source/images/laravel.png index fd15af5cc2..1533073c73 100644 Binary files a/themes/vue/source/images/laravel.png and b/themes/vue/source/images/laravel.png differ diff --git a/themes/vue/source/images/logo.png b/themes/vue/source/images/logo.png index 74389d8ca0..60e17006ad 100644 Binary files a/themes/vue/source/images/logo.png and b/themes/vue/source/images/logo.png differ diff --git a/themes/vue/source/images/menu.png b/themes/vue/source/images/menu.png index 3d6156541a..5ee84638aa 100644 Binary files a/themes/vue/source/images/menu.png and b/themes/vue/source/images/menu.png differ diff --git a/themes/vue/source/images/monterail.png b/themes/vue/source/images/monterail.png index ddc9ad4b75..ab641a54e1 100644 Binary files a/themes/vue/source/images/monterail.png and b/themes/vue/source/images/monterail.png differ diff --git a/themes/vue/source/images/neds.png b/themes/vue/source/images/neds.png new file mode 100644 index 0000000000..6169a0ff07 Binary files /dev/null and b/themes/vue/source/images/neds.png differ diff --git a/themes/vue/source/images/onsen-ui.png b/themes/vue/source/images/onsen-ui.png index 6a2b210402..9c7653c57f 100644 Binary files a/themes/vue/source/images/onsen-ui.png and b/themes/vue/source/images/onsen-ui.png differ diff --git a/themes/vue/source/images/patreon.png b/themes/vue/source/images/patreon.png index 15ab835f66..95d3a7e698 100644 Binary files a/themes/vue/source/images/patreon.png and b/themes/vue/source/images/patreon.png differ diff --git a/themes/vue/source/images/paypal.png b/themes/vue/source/images/paypal.png index 589e98d4b6..aa7213b778 100644 Binary files a/themes/vue/source/images/paypal.png and b/themes/vue/source/images/paypal.png differ diff --git a/themes/vue/source/images/search.png b/themes/vue/source/images/search.png index 98b4e421c5..09b41535f9 100644 Binary files a/themes/vue/source/images/search.png and b/themes/vue/source/images/search.png differ diff --git a/themes/vue/source/images/someline.png b/themes/vue/source/images/someline.png index f0b633879f..b8b160a74b 100644 Binary files a/themes/vue/source/images/someline.png and b/themes/vue/source/images/someline.png differ diff --git a/themes/vue/source/images/stdlib.png b/themes/vue/source/images/stdlib.png index 78d0067a58..990387f96c 100644 Binary files a/themes/vue/source/images/stdlib.png and b/themes/vue/source/images/stdlib.png differ diff --git a/themes/vue/source/images/strikingly.png b/themes/vue/source/images/strikingly.png index 0991b49f16..d2c33aaa7c 100644 Binary files a/themes/vue/source/images/strikingly.png and b/themes/vue/source/images/strikingly.png differ diff --git a/themes/vue/source/images/tde.png b/themes/vue/source/images/tde.png index db75ae4e1b..7e20dce2b6 100644 Binary files a/themes/vue/source/images/tde.png and b/themes/vue/source/images/tde.png differ diff --git a/themes/vue/source/images/tmvuejs2.png b/themes/vue/source/images/tmvuejs2.png index f7ea881a09..3874c04a7c 100644 Binary files a/themes/vue/source/images/tmvuejs2.png and b/themes/vue/source/images/tmvuejs2.png differ diff --git a/themes/vue/source/images/tooltwist.png b/themes/vue/source/images/tooltwist.png index 4749efb7fd..0767889f1f 100644 Binary files a/themes/vue/source/images/tooltwist.png and b/themes/vue/source/images/tooltwist.png differ diff --git a/themes/vue/source/images/vuejobs.png b/themes/vue/source/images/vuejobs.png index bc346238d1..831017c077 100644 Binary files a/themes/vue/source/images/vuejobs.png and b/themes/vue/source/images/vuejobs.png differ diff --git a/themes/vue/source/images/vuejsadmin.png b/themes/vue/source/images/vuejsadmin.png index 81afb1b63d..9b034daabb 100644 Binary files a/themes/vue/source/images/vuejsadmin.png and b/themes/vue/source/images/vuejsadmin.png differ diff --git a/themes/vue/source/images/vueschool.png b/themes/vue/source/images/vueschool.png index 9b7f47d702..28ab527577 100644 Binary files a/themes/vue/source/images/vueschool.png and b/themes/vue/source/images/vueschool.png differ diff --git a/themes/vue/source/images/vuetify.png b/themes/vue/source/images/vuetify.png index 78151a85be..3f1b65703e 100644 Binary files a/themes/vue/source/images/vuetify.png and b/themes/vue/source/images/vuetify.png differ diff --git a/themes/vue/source/images/xfive.png b/themes/vue/source/images/xfive.png index 2c97bcf3d4..e2af1999f6 100644 Binary files a/themes/vue/source/images/xfive.png and b/themes/vue/source/images/xfive.png differ diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js index 9ba7686c81..c2ab9e794b 100644 --- a/themes/vue/source/js/common.js +++ b/themes/vue/source/js/common.js @@ -3,8 +3,8 @@ initVideoModal() if (PAGE_TYPE) { initVersionSelect() - initSubHeaders() initApiSpecLinks() + initSubHeaders() initLocationHashFuzzyMatching() } @@ -144,15 +144,18 @@ * Modal Video Player */ function initVideoModal () { - if (typeof Vimeo === 'undefined') return - var modalButton = document.getElementById('modal-player') var videoModal = document.getElementById('video-modal') - var iframe = document.querySelector('iframe'); - var player = new Vimeo.Player(iframe); + + if (!modalButton || !videoModal) { + return + } + + var iframe = document.querySelector('iframe') + var player = new Vimeo.Player(iframe) var overlay = document.createElement('div') overlay.className = 'overlay' - + var isOpen = false modalButton.addEventListener('click', function(event) { event.stopPropagation() @@ -160,14 +163,16 @@ document.body.classList.toggle('stop-scroll') document.body.appendChild(overlay) player.play() + isOpen = true }) document.body.addEventListener('click', function(e) { - if (e.target !== modalButton && !videoModal.contains(e.target)) { + if (isOpen && e.target !== modalButton && !videoModal.contains(e.target)) { videoModal.classList.remove('open') document.body.classList.remove('stop-scroll') document.body.removeChild(overlay) player.unload() + isOpen = false } }) }