diff --git a/src/v2/cookbook/avoiding-memory-leaks.md b/src/v2/cookbook/avoiding-memory-leaks.md index f4b0f071ed..3f47fe492a 100644 --- a/src/v2/cookbook/avoiding-memory-leaks.md +++ b/src/v2/cookbook/avoiding-memory-leaks.md @@ -78,7 +78,7 @@ new Vue({ To see this memory leak in action, open this [CodePen example](https://codepen.io/freeman-g/pen/qobpxo) using Chrome and then open the Chrome Task Manager. To open the Chrome Task Manager on Mac, choose Chrome Top Navigation > Window > Task Manager or on Windows, use the Shift+Esc shortcut. Now, click the show/hide button 50 or so times. You should see the memory usage in the Chrome Task Manager increase and never be reclaimed. -![Memory Leak Example](/images/memory-leak-example.png) +![Memory Leak Example](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/memory-leak-example.png) ## Resolving the Memory Leak diff --git a/src/v2/cookbook/client-side-storage.md b/src/v2/cookbook/client-side-storage.md index 915ff798bf..13c662e8b9 100644 --- a/src/v2/cookbook/client-side-storage.md +++ b/src/v2/cookbook/client-side-storage.md @@ -48,15 +48,15 @@ You can run this yourself here: Type something in the form and then reload this page. You'll note that the value you typed previously will show up automatically. Don't forget that your browser provides excellent developer tools for inspecting client-side storage. Here's an example in Firefox: -![Storage devtools in Firefox](/images/devtools-storage.png) +![Storage devtools in Firefox](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/devtools-storage.png) And here it is in Chrome: -![Storage devtools in Chrome](/images/devtools-storage-chrome.png) +![Storage devtools in Chrome](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/devtools-storage-chrome.png) And then finally, an example in Microsoft Edge. Note that you can find application storage values under the Debugger tab. -![Storage devtools in Edge](/images/devtools-storage-edge.png) +![Storage devtools in Edge](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/devtools-storage-edge.png)

As a quick aside, these dev tools also offer you a way to remove storage values. This can be very useful when testing.

diff --git a/src/v2/cookbook/debugging-in-vscode.md b/src/v2/cookbook/debugging-in-vscode.md index 5c79d7b6dd..9d2752f60d 100644 --- a/src/v2/cookbook/debugging-in-vscode.md +++ b/src/v2/cookbook/debugging-in-vscode.md @@ -45,7 +45,7 @@ module.exports = { Click on the Debugging icon in the Activity Bar to bring up the Debug view, then click on the gear icon to configure a launch.json file, selecting **Chrome/Firefox: Launch** as the environment. Replace content of the generated launch.json with the corresponding configuration: -![Add Chrome Configuration](/images/config_add.png) +![Add Chrome Configuration](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/config_add.png) ```json { @@ -78,7 +78,7 @@ Click on the Debugging icon in the Activity Bar to bring up the Debug view, then 1. Set a breakpoint in **src/components/HelloWorld.vue** on `line 90` where the `data` function returns a string. - ![Breakpoint Renderer](/images/breakpoint_set.png) + ![Breakpoint Renderer](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/breakpoint_set.png) 2. Open your favorite terminal at the root folder and serve the app using Vue CLI: @@ -90,7 +90,7 @@ Click on the Debugging icon in the Activity Bar to bring up the Debug view, then 4. Your breakpoint should now be hit as a new browser instance opens `http://localhost:8080`. - ![Breakpoint Hit](/images/breakpoint_hit.png) + ![Breakpoint Hit](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/breakpoint_hit.png) ## Alternative Patterns @@ -98,7 +98,7 @@ Click on the Debugging icon in the Activity Bar to bring up the Debug view, then There are other methods of debugging, varying in complexity. The most popular and simple of which is to use the excellent Vue.js devtools [for Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) and [for Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/). Some of the benefits of working with the devtools are that they enable you to live-edit data properties and see the changes reflected immediately. The other major benefit is the ability to do time travel debugging for Vuex. -![Devtools Timetravel Debugger](/images/devtools-timetravel.gif) +![Devtools Timetravel Debugger](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/devtools-timetravel.gif)

Please note that if the page uses a production/minified build of Vue.js (such as the standard link from a CDN), devtools inspection is disabled by default so the Vue pane won't show up. If you switch to an unminified version, you may have to give the page a hard refresh to see them.

diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md index c199b3c44d..46c214e550 100644 --- a/src/v2/guide/components.md +++ b/src/v2/guide/components.md @@ -124,7 +124,7 @@ new Vue({ el: '#components-demo3' }) It's common for an app to be organized into a tree of nested components: -![Component Tree](/images/components.png) +![Component Tree](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/components.png) For example, you might have components for a header, sidebar, and content area, each typically containing other components for navigation links, blog posts, etc. diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index bff865cf56..40b448b916 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -283,7 +283,7 @@ var app6 = new Vue({ The component system is another important concept in Vue, because it's an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components: -![Component Tree](/images/components.png) +![Component Tree](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/components.png) In Vue, a component is essentially a Vue instance with pre-defined options. Registering a component in Vue is straightforward: diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md index 36fc78fde6..1910e45272 100644 --- a/src/v2/guide/instance.md +++ b/src/v2/guide/instance.md @@ -150,4 +150,4 @@ There are also other hooks which will be called at different stages of the insta Below is a diagram for the instance lifecycle. You don't need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference. -![The Vue Instance Lifecycle](/images/lifecycle.png) +![The Vue Instance Lifecycle](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/lifecycle.png) diff --git a/src/v2/guide/reactivity.md b/src/v2/guide/reactivity.md index 6b67644d75..ae8006dd46 100644 --- a/src/v2/guide/reactivity.md +++ b/src/v2/guide/reactivity.md @@ -16,7 +16,7 @@ The getter/setters are invisible to the user, but under the hood they enable Vue Every component instance has a corresponding **watcher** instance, which records any properties "touched" during the component's render as dependencies. Later on when a dependency's setter is triggered, it notifies the watcher, which in turn causes the component to re-render. -![Reactivity Cycle](/images/data.png) +![Reactivity Cycle](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/data.png) ## Change Detection Caveats diff --git a/src/v2/guide/render-function.md b/src/v2/guide/render-function.md index ea66e1fbce..5ac84413d6 100644 --- a/src/v2/guide/render-function.md +++ b/src/v2/guide/render-function.md @@ -100,7 +100,7 @@ When a browser reads this code, it builds a [tree of "DOM nodes"](https://javasc The tree of DOM nodes for the HTML above looks like this: -![DOM Tree Visualization](/images/dom-tree.png) +![DOM Tree Visualization](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/dom-tree.png) Every element is a node. Every piece of text is a node. Even comments are nodes! A node is just a piece of the page. And as in a family tree, each node can have children (i.e. each piece can contain other pieces). diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index e576979679..cc818a1c27 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -21,7 +21,7 @@ All of these are solved by **single-file components** with a `.vue` extension, m Here's an example of a file we'll call `Hello.vue`: -Single-file component example (click for code as text) +Single-file component example (click for code as text) Now we get: @@ -31,7 +31,7 @@ Now we get: As promised, we can also use preprocessors such as Pug, Babel (with ES2015 modules), and Stylus for cleaner and more feature-rich components. -Single-file component example with preprocessors (click for code as text) +Single-file component example with preprocessors (click for code as text) These specific languages are only examples. You could as easily use Bublé, TypeScript, SCSS, PostCSS - or whatever other preprocessors that help you be productive. If using Webpack with `vue-loader`, it also has first-class support for CSS Modules. diff --git a/src/v2/guide/state-management.md b/src/v2/guide/state-management.md index 55b411950a..0c6a69ad5e 100644 --- a/src/v2/guide/state-management.md +++ b/src/v2/guide/state-management.md @@ -71,7 +71,7 @@ var vmB = new Vue({ }) ``` -![State Management](/images/state.png) +![State Management](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/state.png)

It's important to note that you should never replace the original state object in your actions - the components and the store need to share reference to the same object in order for mutations to be observed.

diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index a693cfb8db..b4cb431e50 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -106,7 +106,7 @@ There are six classes applied for enter/leave transitions. 6. `v-leave-to`: **Only available in versions 2.1.8+.** Ending state for leave. Added one frame after a leaving transition is triggered (at the same time `v-leave` is removed), removed when the transition/animation finishes. -![Transition Diagram](/images/transition.png) +![Transition Diagram](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/transition.png) Each of these classes will be prefixed with the name of the transition. Here the `v-` prefix is the default when you use a `` element with no name. If you use `` for example, then the `v-enter` class would instead be `my-transition-enter`.