From c14d4a3954c18d4f0e31df0d604e7a1d50982645 Mon Sep 17 00:00:00 2001 From: Alex Kyriakidis Date: Wed, 29 May 2019 16:12:31 +0200 Subject: [PATCH 01/11] add vueschool class --- themes/vue/source/css/_scrimba.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/vue/source/css/_scrimba.styl b/themes/vue/source/css/_scrimba.styl index 2a5d16e966..be2cd296a5 100644 --- a/themes/vue/source/css/_scrimba.styl +++ b/themes/vue/source/css/_scrimba.styl @@ -1,4 +1,4 @@ -.scrimba +.scrimba, .vueschool background-color #e7ecf3 padding 1em 1.25em border-radius 2px From 67b1ad5ea7c349b6294a20eef67f094088806155 Mon Sep 17 00:00:00 2001 From: Alex Kyriakidis Date: Wed, 29 May 2019 16:13:45 +0200 Subject: [PATCH 02/11] add link for Vue.js Fundamentals course --- src/v2/guide/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 379bddd78f..17cb027c46 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -13,6 +13,7 @@ If you’d like to learn more about Vue before diving in, we Watch a free video course on Vue Mastery +
Watch a free video course on Vue School
## Getting Started From 80964630e468accd0f3bd89817b14ce77818ed0a Mon Sep 17 00:00:00 2001 From: Alex Kyriakidis Date: Wed, 29 May 2019 16:40:09 +0200 Subject: [PATCH 03/11] add link for form validation lesson --- src/v2/cookbook/form-validation.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index f21e2ae8b8..e7133dd0a4 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -6,6 +6,8 @@ order: 3 ## Base Example +
Watch a free lesson on Vue School
+ 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: From 71239650e72df251696ecb19999f5fa8c52c538e Mon Sep 17 00:00:00 2001 From: Alex Kyriakidis Date: Wed, 29 May 2019 16:44:09 +0200 Subject: [PATCH 04/11] add link for Lifecycle Hooks lesson --- src/v2/guide/instance.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md index 268bab16d2..87ec1874a0 100644 --- a/src/v2/guide/instance.md +++ b/src/v2/guide/instance.md @@ -123,6 +123,8 @@ In the future, you can consult the [API reference](../api/#Instance-Properties) ## Instance Lifecycle Hooks +
Watch a free lesson on Vue School
+ 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. For example, the [`created`](../api/#created) hook can be used to run code after an instance is created: From 9e5e766ac5d05edc6c8baff732a5d52cdd978869 Mon Sep 17 00:00:00 2001 From: Alex Kyriakidis Date: Wed, 29 May 2019 17:01:23 +0200 Subject: [PATCH 05/11] add link for Class Binding lesson --- src/v2/guide/class-and-style.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md index 2c40d5033c..333ae884c3 100644 --- a/src/v2/guide/class-and-style.md +++ b/src/v2/guide/class-and-style.md @@ -7,6 +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 +
Watch a free video lesson on Vue School
### Object Syntax From dfc0867bd8348cd65d7249f87ca88f5cd52528f3 Mon Sep 17 00:00:00 2001 From: Alex Kyriakidis Date: Wed, 29 May 2019 17:07:49 +0200 Subject: [PATCH 06/11] add link for Component Registration lesson --- src/v2/guide/components-registration.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index 8c4404aa35..b14ee344f9 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -6,6 +6,8 @@ order: 101 > This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components. +
Watch a free video lesson on Vue School
+ ## Component Names When registering a component, it will always be given a name. For example, in the global registration we've seen so far: From 2b77c6a3e356c632796c3b2cad0c36092d013574 Mon Sep 17 00:00:00 2001 From: Alex Kyriakidis Date: Wed, 29 May 2019 17:04:58 +0200 Subject: [PATCH 07/11] add link for Components Fundamentals course --- src/v2/guide/components.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md index 038d803e74..35dc38b4db 100644 --- a/src/v2/guide/components.md +++ b/src/v2/guide/components.md @@ -4,6 +4,8 @@ type: guide order: 11 --- +
Watch a free video course on Vue School
+ ## Base Example Here's an example of a Vue component: From 7b29696532b26786168b8a44576a9180d5527b68 Mon Sep 17 00:00:00 2001 From: Alex Kyriakidis Date: Wed, 29 May 2019 17:21:39 +0200 Subject: [PATCH 08/11] add link for Async Components lesson --- src/v2/guide/components-dynamic-async.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/v2/guide/components-dynamic-async.md b/src/v2/guide/components-dynamic-async.md index 5d589d1906..6c3daabb43 100644 --- a/src/v2/guide/components-dynamic-async.md +++ b/src/v2/guide/components-dynamic-async.md @@ -201,6 +201,8 @@ Check out more details on `` in the [API reference](../api/#keep-ali ## Async Components +
Watch a free video lesson on Vue School
+ 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: ``` js From 1703c06e2835ff611957c8bd972897d7628ef82b Mon Sep 17 00:00:00 2001 From: Alex Kyriakidis Date: Wed, 29 May 2019 17:25:21 +0200 Subject: [PATCH 09/11] add link for Custom Vue Directives lesson --- src/v2/guide/custom-directive.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/v2/guide/custom-directive.md b/src/v2/guide/custom-directive.md index a62499665a..03d0c484ad 100644 --- a/src/v2/guide/custom-directive.md +++ b/src/v2/guide/custom-directive.md @@ -6,6 +6,8 @@ order: 302 ## Intro +
Watch a free video lesson on Vue School
+ 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: {% raw %} From cb45398738b5f1c0dd1be0bb36463d1ba8939bf3 Mon Sep 17 00:00:00 2001 From: Alex Kyriakidis Date: Wed, 29 May 2019 17:27:37 +0200 Subject: [PATCH 10/11] add link for Intro to Single File Components lesson --- src/v2/guide/single-file-components.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index c7de7d32a3..ef4f1d101d 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -6,6 +6,8 @@ order: 401 ## Introduction +
Watch a free video lesson on Vue School
+ 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. This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views. In more complex projects however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent: From 2db908f4e74cc2cfb4bd38bc944fd0dbada2061e Mon Sep 17 00:00:00 2001 From: Alex Kyriakidis Date: Thu, 4 Jul 2019 14:45:35 +0200 Subject: [PATCH 11/11] Update index.md --- src/v2/guide/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 17cb027c46..379bddd78f 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -13,7 +13,6 @@ If you’d like to learn more about Vue before diving in, we Watch a free video course on Vue Mastery -
Watch a free video course on Vue School
## Getting Started