Skip to content

Adding pathways to free Video content #1907

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 14, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "vuejs.org",
"private": true,
"hexo": {
"version": "3.7.0"
"version": "3.7.1"
},
"scripts": {
"start": "hexo server",
Expand Down
4 changes: 3 additions & 1 deletion src/v2/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ If you’d like to learn more about Vue before diving in, we <a id="modal-player

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).

<div class="vue-mastery"><a href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/" target="_blank" rel="noopener" title="Free Vue.js Course">Watch a free video course on Vue Mastery</a></div>

## Getting Started

<p class="tip">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.</p>
Expand Down Expand Up @@ -395,4 +397,4 @@ You may have noticed that Vue components are very similar to **Custom Elements**

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!

<div id="video-modal" class="modal"><div class="video-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="https://player.vimeo.com/video/247494684" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%; margin: 0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script></div>
<div id="video-modal" class="modal"><div class="video-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="https://player.vimeo.com/video/247494684" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%; margin: 0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script><p class="modal-text">Video by <a href="https://www.vuemastery.com" target="_blank" rel="noopener" title="Vue.js Courses on Vue Mastery">Vue Mastery</a>. Watch Vue Mastery’s free <a href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/" target="_blank" rel="noopener" title="Vue.js Courses on Vue Mastery">Intro to Vue course</a>.</div>
2 changes: 2 additions & 0 deletions src/v2/guide/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ Vue provides an [official CLI](https://github.com/vuejs/vue-cli) for quickly sca

<p class="tip">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 <a href="./">the guide</a> without any build tools before using the CLI.</p>

<div class="vue-mastery"><a href="https://www.vuemastery.com/courses/real-world-vue-js/vue-cli" target="_blank" rel="noopener" title="Vue CLI">Watch a video explanation on Vue Mastery</a></div>

## 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:
Expand Down
2 changes: 2 additions & 0 deletions src/v2/guide/reactivity.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<div class="vue-mastery"><a href="https://www.vuemastery.com/courses/advanced-components/build-a-reactivity-system" target="_blank" rel="noopener" title="Vue Reactivity">Watch a video explanation on Vue Mastery</a></div>

## 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.
Expand Down
2 changes: 2 additions & 0 deletions src/v2/guide/state-management.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

<div class="vue-mastery"><a href="https://www.vuemastery.com/courses/mastering-vuex/intro-to-vuex/" target="_blank" rel="noopener" title="Vuex Tutorial">Watch a video explanation on Vue Mastery</a></div>

### 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.
Expand Down
5 changes: 4 additions & 1 deletion themes/vue/layout/index.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,10 @@
</div>

<div id="video-modal" class="modal">
<div class="video-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="https://player.vimeo.com/video/247494684" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<div class="video-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="https://player.vimeo.com/video/247494684" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div><script src="https://player.vimeo.com/api/player.js"></script>
<p class="modal-text">Video by <a href="https://www.vuemastery.com" target="_blank" rel="noopener" title="Vue.js Courses on Vue Mastery">Vue Mastery</a>. Watch Vue Mastery’s free <a href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/" target="_blank" rel="noopener" title="Vue.js Courses on Vue Mastery">Intro to Vue course</a>.
</p>
</div>

<script>
Expand Down
8 changes: 7 additions & 1 deletion themes/vue/source/css/_modal.styl
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
box-sizing: border-box
display: none
position: fixed
width: 80%
width: 75%
height: auto
padding: .5em
background-color: #f9f9f9
Expand All @@ -13,6 +13,12 @@
top: 50%
left: 50%
transform: translate(-50%, -50%)
.modal-text
margin-bottom 0.5em
text-align center
> a
color $green
font-weight 600
.overlay
position: fixed
top: 0
Expand Down
32 changes: 32 additions & 0 deletions themes/vue/source/css/_vue-mastery.styl
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions themes/vue/source/css/page.styl
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down