diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md
index e79d28d800..6fd34c1263 100644
--- a/src/v2/cookbook/form-validation.md
+++ b/src/v2/cookbook/form-validation.md
@@ -1,435 +1,435 @@
----
-title: Form Validation
-type: cookbook
-order: 3
----
-
-## Base Example
-
-
-
-Form validation is natively supported by the browser, but sometimes different browsers will handle things in a manner which makes relying on it a bit tricky. Even when validation is supported perfectly, there may be times when custom validations are needed and a more manual, Vue-based solution may be more appropriate. Let's begin with a simple example.
-
-Given a form of three fields, make two required. Let's look at the HTML first:
-
-``` html
-
-```
-
-Let's cover it from the top. The `
-```
-
-While the change here is small, note the `novalidate="true"` on top. This is important because the browser will attempt to validate the email address in the field when `type="email"`. Frankly it may make more sense to trust the browser in this case, but as we wanted an example with custom validation, we're disabling it. Here's the updated JavaScript.
-
-``` js
-const app = new Vue({
- el: '#app',
- data: {
- errors: [],
- name: null,
- email: null,
- movie: null
- },
- methods: {
- checkForm: function (e) {
- this.errors = [];
-
- if (!this.name) {
- this.errors.push("Name required.");
- }
- if (!this.email) {
- this.errors.push('Email required.');
- } else if (!this.validEmail(this.email)) {
- this.errors.push('Valid email required.');
- }
-
- if (!this.errors.length) {
- return true;
- }
-
- e.preventDefault();
- },
- validEmail: function (email) {
- var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
- return re.test(email);
- }
- }
-})
-```
-
-As you can see, we've added `validEmail` as a new method and it is simply called from `checkForm`. You can play with this example here:
-
-See the Pen form validation 2 by Raymond Camden (@cfjedimaster) on CodePen.
-
-
-## Another Example of Custom Validation
-
-For the third example, we've built something you've probably seen in survey apps. The user is asked to spend a "budget" for a set of features for a new Star Destroyer model. The total must equal 100. First, the HTML.
-
-``` html
-
-```
-
-Note the set of inputs covering the five different features. Note the addition of `.number` to the `v-model` attribute. This tells Vue to cast the value to a number when you use it. However, there is a bug with this feature such that when the value is blank, it turns back into a string. You'll see the workaround below. To make it a bit easier for the user, we also added a current total right below so they can see, in real time, what their total is. Now let's look at the JavaScript.
-
-``` js
-const app = new Vue({
- el: '#app',
- data:{
- errors: [],
- weapons: 0,
- shields: 0,
- coffee: 0,
- ac: 0,
- mousedroids: 0
- },
- computed: {
- total: function () {
- // must parse because Vue turns empty value to string
- return Number(this.weapons) +
- Number(this.shields) +
- Number(this.coffee) +
- Number(this.ac+this.mousedroids);
- }
- },
- methods:{
- checkForm: function (e) {
- this.errors = [];
-
- if (this.total != 100) {
- this.errors.push('Total must be 100!');
- }
-
- if (!this.errors.length) {
- return true;
- }
-
- e.preventDefault();
- }
- }
-})
-```
-
-We set up the total value as a computed value, and outside of that bug I ran into, it was simple enough to setup. My checkForm method now just needs to see if the total is 100 and that's it. You can play with this here:
-
-See the Pen form validation 3 by Raymond Camden (@cfjedimaster) on CodePen.
-
-
-## Server-side Validation
-
-In my final example, we built something that makes use of Ajax to validate at the server. The form will ask you to name a new product and will then check to ensure that the name is unique. We wrote a quick [OpenWhisk](http://openwhisk.apache.org/) serverless action to do the validation. While it isn't terribly important, here is the logic:
-
-``` js
-function main(args) {
- return new Promise((resolve, reject) => {
- // bad product names: vista, empire, mbp
- const badNames = ['vista', 'empire', 'mbp'];
-
- if (badNames.includes(args.name)) {
- reject({error: 'Existing product'});
- }
-
- resolve({status: 'ok'});
- });
-}
-```
-
-Basically any name but "vista", "empire", and "mbp" are acceptable. Ok, so let's look at the form.
-
-``` html
-
-```
-
-There isn't anything special here. So let's go on to the JavaScript.
-
-``` js
-const apiUrl = 'https://openwhisk.ng.bluemix.net/api/v1/web/rcamden%40us.ibm.com_My%20Space/safeToDelete/productName.json?name=';
-
-const app = new Vue({
- el: '#app',
- data: {
- errors: [],
- name: ''
- },
- methods:{
- checkForm: function (e) {
- e.preventDefault();
-
- this.errors = [];
-
- if (this.name === '') {
- this.errors.push('Product name is required.');
- } else {
- fetch(apiUrl + encodeURIComponent(this.name))
- .then(res => res.json())
- .then(res => {
- if (res.error) {
- this.errors.push(res.error);
- } else {
- // redirect to a new URL, or do something on success
- alert('ok!');
- }
- });
- }
- }
- }
-})
-```
-
-We start off with a variable representing the URL of the API that is running on OpenWhisk. Now look at `checkForm`. In this version, we always prevent the form from submitting (which, by the way, could be done in the HTML with Vue as well). You can see a basic check on `this.name` being empty, and then we hit the API. If it's bad, we add an error as before. If it's good, right now we do nothing (just an alert), but you could navigate the user to a new page with the product name in the URL, or do other actions as well. You can run this demo below:
-
-See the Pen form validation 4 by Raymond Camden (@cfjedimaster) on CodePen.
-
-
-## Alternative Patterns
-
-While this cookbook entry focused on doing form validation "by hand", there are, of course, some great Vue libraries that will handle a lot of this for you. Switching to a prepackage library may impact the final size of your application, but the benefits could be tremendous. You have code that is (most likely) heavily tested and also updated on a regular basis. Some examples of form validation libraries for Vue include:
-
-* [vuelidate](https://github.com/monterail/vuelidate)
-* [VeeValidate](https://logaretm.github.io/vee-validate/)
+---
+title: Form Validation
+type: cookbook
+order: 3
+---
+
+## Base Example
+
+
+
+Form validation is natively supported by the browser, but sometimes different browsers will handle things in a manner which makes relying on it a bit tricky. Even when validation is supported perfectly, there may be times when custom validations are needed and a more manual, Vue-based solution may be more appropriate. Let's begin with a simple example.
+
+Given a form of three fields, make two required. Let's look at the HTML first:
+
+``` html
+
+```
+
+Let's cover it from the top. The `
+```
+
+While the change here is small, note the `novalidate="true"` on top. This is important because the browser will attempt to validate the email address in the field when `type="email"`. Frankly it may make more sense to trust the browser in this case, but as we wanted an example with custom validation, we're disabling it. Here's the updated JavaScript.
+
+``` js
+const app = new Vue({
+ el: '#app',
+ data: {
+ errors: [],
+ name: null,
+ email: null,
+ movie: null
+ },
+ methods: {
+ checkForm: function (e) {
+ this.errors = [];
+
+ if (!this.name) {
+ this.errors.push("Name required.");
+ }
+ if (!this.email) {
+ this.errors.push('Email required.');
+ } else if (!this.validEmail(this.email)) {
+ this.errors.push('Valid email required.');
+ }
+
+ if (!this.errors.length) {
+ return true;
+ }
+
+ e.preventDefault();
+ },
+ validEmail: function (email) {
+ var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+ return re.test(email);
+ }
+ }
+})
+```
+
+As you can see, we've added `validEmail` as a new method and it is simply called from `checkForm`. You can play with this example here:
+
+See the Pen form validation 2 by Raymond Camden (@cfjedimaster) on CodePen.
+
+
+## Another Example of Custom Validation
+
+For the third example, we've built something you've probably seen in survey apps. The user is asked to spend a "budget" for a set of features for a new Star Destroyer model. The total must equal 100. First, the HTML.
+
+``` html
+
+```
+
+Note the set of inputs covering the five different features. Note the addition of `.number` to the `v-model` attribute. This tells Vue to cast the value to a number when you use it. However, there is a bug with this feature such that when the value is blank, it turns back into a string. You'll see the workaround below. To make it a bit easier for the user, we also added a current total right below so they can see, in real time, what their total is. Now let's look at the JavaScript.
+
+``` js
+const app = new Vue({
+ el: '#app',
+ data:{
+ errors: [],
+ weapons: 0,
+ shields: 0,
+ coffee: 0,
+ ac: 0,
+ mousedroids: 0
+ },
+ computed: {
+ total: function () {
+ // must parse because Vue turns empty value to string
+ return Number(this.weapons) +
+ Number(this.shields) +
+ Number(this.coffee) +
+ Number(this.ac+this.mousedroids);
+ }
+ },
+ methods:{
+ checkForm: function (e) {
+ this.errors = [];
+
+ if (this.total != 100) {
+ this.errors.push('Total must be 100!');
+ }
+
+ if (!this.errors.length) {
+ return true;
+ }
+
+ e.preventDefault();
+ }
+ }
+})
+```
+
+We set up the total value as a computed value, and outside of that bug I ran into, it was simple enough to setup. My checkForm method now just needs to see if the total is 100 and that's it. You can play with this here:
+
+See the Pen form validation 3 by Raymond Camden (@cfjedimaster) on CodePen.
+
+
+## Server-side Validation
+
+In my final example, we built something that makes use of Ajax to validate at the server. The form will ask you to name a new product and will then check to ensure that the name is unique. We wrote a quick [OpenWhisk](http://openwhisk.apache.org/) serverless action to do the validation. While it isn't terribly important, here is the logic:
+
+``` js
+function main(args) {
+ return new Promise((resolve, reject) => {
+ // bad product names: vista, empire, mbp
+ const badNames = ['vista', 'empire', 'mbp'];
+
+ if (badNames.includes(args.name)) {
+ reject({error: 'Existing product'});
+ }
+
+ resolve({status: 'ok'});
+ });
+}
+```
+
+Basically any name but "vista", "empire", and "mbp" are acceptable. Ok, so let's look at the form.
+
+``` html
+
+```
+
+There isn't anything special here. So let's go on to the JavaScript.
+
+``` js
+const apiUrl = 'https://openwhisk.ng.bluemix.net/api/v1/web/rcamden%40us.ibm.com_My%20Space/safeToDelete/productName.json?name=';
+
+const app = new Vue({
+ el: '#app',
+ data: {
+ errors: [],
+ name: ''
+ },
+ methods:{
+ checkForm: function (e) {
+ e.preventDefault();
+
+ this.errors = [];
+
+ if (this.name === '') {
+ this.errors.push('Product name is required.');
+ } else {
+ fetch(apiUrl + encodeURIComponent(this.name))
+ .then(res => res.json())
+ .then(res => {
+ if (res.error) {
+ this.errors.push(res.error);
+ } else {
+ // redirect to a new URL, or do something on success
+ alert('ok!');
+ }
+ });
+ }
+ }
+ }
+})
+```
+
+We start off with a variable representing the URL of the API that is running on OpenWhisk. Now look at `checkForm`. In this version, we always prevent the form from submitting (which, by the way, could be done in the HTML with Vue as well). You can see a basic check on `this.name` being empty, and then we hit the API. If it's bad, we add an error as before. If it's good, right now we do nothing (just an alert), but you could navigate the user to a new page with the product name in the URL, or do other actions as well. You can run this demo below:
+
+See the Pen form validation 4 by Raymond Camden (@cfjedimaster) on CodePen.
+
+
+## Alternative Patterns
+
+While this cookbook entry focused on doing form validation "by hand", there are, of course, some great Vue libraries that will handle a lot of this for you. Switching to a prepackage library may impact the final size of your application, but the benefits could be tremendous. You have code that is (most likely) heavily tested and also updated on a regular basis. Some examples of form validation libraries for Vue include:
+
+* [vuelidate](https://github.com/monterail/vuelidate)
+* [VeeValidate](https://logaretm.github.io/vee-validate/)
diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md
index 333ae884c3..60171d440b 100644
--- a/src/v2/guide/class-and-style.md
+++ b/src/v2/guide/class-and-style.md
@@ -7,7 +7,7 @@ order: 6
A common need for data binding is manipulating an element's class list and its inline styles. Since they are both attributes, we can use `v-bind` to handle them: we only need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when `v-bind` is used with `class` and `style`. In addition to strings, the expressions can also evaluate to objects or arrays.
## Binding HTML Classes
-
+
### Object Syntax
diff --git a/src/v2/guide/components-dynamic-async.md b/src/v2/guide/components-dynamic-async.md
index 6c3daabb43..4cdb29249f 100644
--- a/src/v2/guide/components-dynamic-async.md
+++ b/src/v2/guide/components-dynamic-async.md
@@ -201,7 +201,7 @@ Check out more details on `` in the [API reference](../api/#keep-ali
## Async Components
-
+
In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders. For example:
diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md
index b14ee344f9..9d4c027fc3 100644
--- a/src/v2/guide/components-registration.md
+++ b/src/v2/guide/components-registration.md
@@ -6,7 +6,7 @@ order: 101
> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
-
+
## Component Names
diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md
index 35dc38b4db..1d84a97a50 100644
--- a/src/v2/guide/components.md
+++ b/src/v2/guide/components.md
@@ -4,7 +4,7 @@ type: guide
order: 11
---
-
+
## Base Example
diff --git a/src/v2/guide/custom-directive.md b/src/v2/guide/custom-directive.md
index b086c5e7ea..5951f163f9 100644
--- a/src/v2/guide/custom-directive.md
+++ b/src/v2/guide/custom-directive.md
@@ -6,7 +6,7 @@ order: 302
## Intro
-
+
In addition to the default set of directives shipped in core (`v-model` and `v-show`), Vue also allows you to register your own custom directives. Note that in Vue 2.0, the primary form of code reuse and abstraction is components - however there may be cases where you need some low-level DOM access on plain elements, and this is where custom directives would still be useful. An example would be focusing on an input element, like this one:
diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md
index 45f3826357..2b3d56073f 100644
--- a/src/v2/guide/index.md
+++ b/src/v2/guide/index.md
@@ -12,7 +12,7 @@ If you’d like to learn more about Vue before diving in, we Watch a free video course on Vue Mastery
+
## Getting Started
@@ -403,4 +403,4 @@ Although Vue doesn't use custom elements internally, it has [great interoperabil
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 c17cbb8f13..35b9a014b5 100644
--- a/src/v2/guide/installation.md
+++ b/src/v2/guide/installation.md
@@ -76,7 +76,7 @@ Vue provides an [official CLI](https://github.com/vuejs/vue-cli) for quickly sca
The CLI assumes prior knowledge of Node.js and the associated build tools. If you are new to Vue or front-end build tools, we strongly suggest going through the guide without any build tools before using the CLI.
-
+
## Explanation of Different Builds
diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md
index 87ec1874a0..16525cc7df 100644
--- a/src/v2/guide/instance.md
+++ b/src/v2/guide/instance.md
@@ -123,7 +123,7 @@ In the future, you can consult the [API reference](../api/#Instance-Properties)
## Instance Lifecycle Hooks
-
+
Each Vue instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called **lifecycle hooks**, giving users the opportunity to add their own code at specific stages.
diff --git a/src/v2/guide/reactivity.md b/src/v2/guide/reactivity.md
index 1400c68f86..cbc8198e6c 100644
--- a/src/v2/guide/reactivity.md
+++ b/src/v2/guide/reactivity.md
@@ -6,7 +6,7 @@ order: 601
Now it's time to take a deep dive! One of Vue's most distinct features is the unobtrusive reactivity system. Models are just plain JavaScript objects. When you modify them, the view updates. It makes state management simple and intuitive, but it's also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue's reactivity system.
-
+
## How Changes Are Tracked
diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md
index fe16a3ae52..8d0987d862 100644
--- a/src/v2/guide/single-file-components.md
+++ b/src/v2/guide/single-file-components.md
@@ -6,7 +6,7 @@ order: 401
## Introduction
-
+
In many Vue projects, global components will be defined using `Vue.component`, followed by `new Vue({ el: '#container' })` to target a container element in the body of every page.
diff --git a/src/v2/guide/state-management.md b/src/v2/guide/state-management.md
index a566eaedbb..2e183c0f99 100644
--- a/src/v2/guide/state-management.md
+++ b/src/v2/guide/state-management.md
@@ -8,7 +8,7 @@ order: 502
Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them. To solve this problem, Vue offers [vuex](https://github.com/vuejs/vuex): our own Elm-inspired state management library. It even integrates into [vue-devtools](https://github.com/vuejs/vue-devtools), providing zero-setup access to [time travel debugging](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif).
-
+
### Information for React Developers
diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
index 098562083b..6bb6d33fb3 100644
--- a/themes/vue/layout/index.ejs
+++ b/themes/vue/layout/index.ejs
@@ -119,9 +119,33 @@
diff --git a/themes/vue/layout/partials/learn_dropdown.ejs b/themes/vue/layout/partials/learn_dropdown.ejs
index 1882d25d16..dfc305f039 100644
--- a/themes/vue/layout/partials/learn_dropdown.ejs
+++ b/themes/vue/layout/partials/learn_dropdown.ejs
@@ -14,8 +14,20 @@
Video Courses
diff --git a/themes/vue/layout/partials/platinum_sponsors.ejs b/themes/vue/layout/partials/platinum_sponsors.ejs
index 472ada314e..831ed92c8e 100644
--- a/themes/vue/layout/partials/platinum_sponsors.ejs
+++ b/themes/vue/layout/partials/platinum_sponsors.ejs
@@ -3,7 +3,7 @@
Platinum Sponsors
<%_ for (const sponsor of theme.platinum_sponsors) {_%>
-
+
 %>)
<%_ } _%>
diff --git a/themes/vue/layout/partials/sponsors.ejs b/themes/vue/layout/partials/sponsors.ejs
index 82f96e9fe5..513b2d9259 100644
--- a/themes/vue/layout/partials/sponsors.ejs
+++ b/themes/vue/layout/partials/sponsors.ejs
@@ -1,14 +1,14 @@
Patreon Sponsors
<%_ for (const sponsor of theme.platinum_sponsors) {_%>
-
+
 %>)
<%_ } _%>
<%_ for (const sponsor of theme.gold_sponsors) {_%>
-
+
<%_ } _%>
@@ -20,13 +20,21 @@
OpenCollective Sponsors
Platinum
<%_ for (let i = 0; i < 2; i++) {_%>
-
+
<%_ } _%>
Gold
<%_ for (let i = 0; i < 8; i++) {_%>
-
+
<%_ } _%>
diff --git a/themes/vue/layout/partials/sponsors_sidebar.ejs b/themes/vue/layout/partials/sponsors_sidebar.ejs
index 79ea740dbe..0a7f95cbf3 100644
--- a/themes/vue/layout/partials/sponsors_sidebar.ejs
+++ b/themes/vue/layout/partials/sponsors_sidebar.ejs
@@ -3,7 +3,7 @@
Special Sponsor
<%_ for (const sponsor of theme.special_sponsors) {_%>
-
+
<%_ } _%>
diff --git a/themes/vue/layout/partners-page.ejs b/themes/vue/layout/partners-page.ejs
index b2af5e47d4..e340164a55 100644
--- a/themes/vue/layout/partners-page.ejs
+++ b/themes/vue/layout/partners-page.ejs
@@ -1,7 +1,8 @@
Vue Partners are premium shops that provide first-class Vue consulting and development.
- If your company is interested in being listed as a partner, please contact us at partners@vuejs.org.
+ If your company is interested in being listed as a partner, please contact us at
+ partners@vuejs.org.
Active Partners
@@ -9,8 +10,11 @@
<% for (let partner of page.partners_list) { %>
@@ -22,7 +26,9 @@
Link
- <%- partner.url_text %>
+
+ <%- partner.url_text %>
+
@@ -52,7 +58,13 @@
@@ -66,7 +78,7 @@
<% } %>
<% for( let link of partner.social_links) { %>
-
+
<%= link.name %>
diff --git a/themes/vue/source/css/_partners.styl b/themes/vue/source/css/_partners.styl
index da37f048af..28ef83e078 100644
--- a/themes/vue/source/css/_partners.styl
+++ b/themes/vue/source/css/_partners.styl
@@ -70,6 +70,8 @@
color: #0077B5
&.instagram
color: #C13584
+ &.youtube
+ color: #f00
i
vertical-align: text-bottom
font-size: 1.3em
 ? partner.logo : url_for(`/images/${partner.logo}`) %>){kind=logo}
+