From bfdbe4a6450785a515fcf1ae313a6d0e1396e47d Mon Sep 17 00:00:00 2001 From: Dustin Delatore Date: Fri, 14 Dec 2018 14:17:34 -0500 Subject: [PATCH 1/3] Added free Vue Mastery videos where it will help with learning --- src/v2/guide/index.md | 2 ++ src/v2/guide/installation.md | 2 ++ src/v2/guide/reactivity.md | 2 ++ src/v2/guide/state-management.md | 2 ++ themes/vue/source/css/_vue-mastery.styl | 32 +++++++++++++++++++++++++ themes/vue/source/css/page.styl | 1 + 6 files changed, 41 insertions(+) create mode 100644 themes/vue/source/css/_vue-mastery.styl diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index b176d13727..b6a1d531d6 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -14,6 +14,8 @@ If you are an experienced frontend developer and want to know how Vue compares t ## Getting Started +
Watch a free video course on Vue Mastery
+

The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.

The easiest way to try out Vue.js is using the [JSFiddle Hello World example](https://jsfiddle.net/chrisvfritz/50wL7mdz/). Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an index.html file and include Vue with: diff --git a/src/v2/guide/installation.md b/src/v2/guide/installation.md index 94fbf778aa..d0f344adec 100644 --- a/src/v2/guide/installation.md +++ b/src/v2/guide/installation.md @@ -62,6 +62,8 @@ 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.

+
Watch a video explanation on Vue Mastery
+ ## Explanation of Different Builds In the [`dist/` directory of the NPM package](https://cdn.jsdelivr.net/npm/vue/dist/) you will find many different builds of Vue.js. Here's an overview of the difference between them: diff --git a/src/v2/guide/reactivity.md b/src/v2/guide/reactivity.md index c6e53acd19..a0e35694f4 100644 --- a/src/v2/guide/reactivity.md +++ b/src/v2/guide/reactivity.md @@ -6,6 +6,8 @@ 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. +
Watch a video explanation on Vue Mastery
+ ## How Changes Are Tracked When you pass a plain JavaScript object to a Vue instance as its `data` option, Vue will walk through all of its properties and convert them to [getter/setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters) using [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty). This is an ES5-only and un-shimmable feature, which is why Vue doesn't support IE8 and below. diff --git a/src/v2/guide/state-management.md b/src/v2/guide/state-management.md index 291becba51..a566eaedbb 100644 --- a/src/v2/guide/state-management.md +++ b/src/v2/guide/state-management.md @@ -8,6 +8,8 @@ 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). +
Watch a video explanation on Vue Mastery
+ ### Information for React Developers If you're coming from React, you may be wondering how vuex compares to [redux](https://github.com/reactjs/redux), the most popular Flux implementation in that ecosystem. Redux is actually view-layer agnostic, so it can easily be used with Vue via [simple bindings](https://yarnpkg.com/en/packages?q=redux%20vue&p=1). Vuex is different in that it _knows_ it's in a Vue app. This allows it to better integrate with Vue, offering a more intuitive API and improved development experience. diff --git a/themes/vue/source/css/_vue-mastery.styl b/themes/vue/source/css/_vue-mastery.styl new file mode 100644 index 0000000000..57ed75d303 --- /dev/null +++ b/themes/vue/source/css/_vue-mastery.styl @@ -0,0 +1,32 @@ +.vue-mastery + background-color #e7ecf3 + padding 1em 1.25em + border-radius 2px + color #486491 + position relative + margin-top 1em + a + color #486491 !important + position relative + padding-left 36px + &:before + content '' + position absolute + display block + width 30px + height 30px + top -5px + left -4px + border-radius 50% + background-color #73abfe + &:after + content '' + position absolute + display block + width 0 + height 0 + top 5px + left 8px + border-top 5px solid transparent + border-bottom 5px solid transparent + border-left 8px solid #fff \ No newline at end of file diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl index 7067cf6a01..e6bc76ae1c 100644 --- a/themes/vue/source/css/page.styl +++ b/themes/vue/source/css/page.styl @@ -13,6 +13,7 @@ @import "_style-guide" @import "_modal" @import "_scrimba" +@import "_vue-mastery" #header box-shadow: 0 0 1px rgba(0,0,0,.25) From 34ccff9ae1413a17462b320b95099eb3b517b0e6 Mon Sep 17 00:00:00 2001 From: Dustin Delatore Date: Fri, 14 Dec 2018 14:41:15 -0500 Subject: [PATCH 2/3] Add modal description to Why Vue.js video --- package.json | 2 +- src/v2/guide/index.md | 4 ++-- themes/vue/layout/index.ejs | 5 ++++- themes/vue/source/css/_modal.styl | 8 +++++++- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index cabf4cd6bf..2c9aaceb26 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "vuejs.org", "private": true, "hexo": { - "version": "3.7.0" + "version": "3.7.1" }, "scripts": { "start": "hexo server", diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index b6a1d531d6..d61255c314 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -12,10 +12,10 @@ If you’d like to learn more about Vue before diving in, we Watch a free video course on Vue Mastery +## Getting Started +

The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.

The easiest way to try out Vue.js is using the [JSFiddle Hello World example](https://jsfiddle.net/chrisvfritz/50wL7mdz/). Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an index.html file and include Vue with: diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs index 608882772e..10eed9f2ca 100644 --- a/themes/vue/layout/index.ejs +++ b/themes/vue/layout/index.ejs @@ -118,7 +118,10 @@ +