+ With a unique key on each conditional element, the
+ transition is now applied.
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-priority-d-rules-correct-example/package.json b/src/v2/examples/vue-20-priority-d-rules-correct-example/package.json
new file mode 100644
index 0000000000..7afc08c225
--- /dev/null
+++ b/src/v2/examples/vue-20-priority-d-rules-correct-example/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-priority-d-rules-correct-example",
+ "version": "1.0.0",
+ "description": "A unique key on each conditional element so the transition is applied.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-priority-d-rules-correct-example/sandbox.config.json b/src/v2/examples/vue-20-priority-d-rules-correct-example/sandbox.config.json
new file mode 100644
index 0000000000..5866ed7445
--- /dev/null
+++ b/src/v2/examples/vue-20-priority-d-rules-correct-example/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/index.html b/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/index.html
new file mode 100644
index 0000000000..22ed5bab0e
--- /dev/null
+++ b/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/index.html
@@ -0,0 +1,54 @@
+
+
+
+ Priority D Rules Unintended Consequences
+
+
+
+
+
+
+
+
+
+
+
+ When clicking on the <button> above, the transition
+ is never applied because Vue is reusing the same element for render
+ efficiency. To force Vue to treat these as separate elements, a
+ unique key must be added
+ to each conditional element.
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/package.json b/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/package.json
new file mode 100644
index 0000000000..43c1c3a9f2
--- /dev/null
+++ b/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-priority-d-rules-unintended-consequences",
+ "version": "1.0.0",
+ "description": "Lacking a unique key on each conditional element, the transition is never applied.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/sandbox.config.json b/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/sandbox.config.json
new file mode 100644
index 0000000000..5866ed7445
--- /dev/null
+++ b/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-programmatic-event-listeners/index.html b/src/v2/examples/vue-20-programmatic-event-listeners/index.html
new file mode 100644
index 0000000000..48329aba91
--- /dev/null
+++ b/src/v2/examples/vue-20-programmatic-event-listeners/index.html
@@ -0,0 +1,32 @@
+
+
+
+ Programmatic Event Listeners using Pikaday
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/v2/examples/vue-20-programmatic-event-listeners/package.json b/src/v2/examples/vue-20-programmatic-event-listeners/package.json
new file mode 100644
index 0000000000..42312caa1f
--- /dev/null
+++ b/src/v2/examples/vue-20-programmatic-event-listeners/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "vue-20-programmatic-event-listeners",
+ "version": "1.0.0",
+ "description": "Vue.js Programmatic Event Listeners example using Pikaday",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve"
+ },
+ "keywords": [],
+ "license": "MIT",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-programmatic-event-listeners/sandbox.config.json b/src/v2/examples/vue-20-programmatic-event-listeners/sandbox.config.json
new file mode 100644
index 0000000000..5866ed7445
--- /dev/null
+++ b/src/v2/examples/vue-20-programmatic-event-listeners/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/src/v2/examples/vue-20-single-file-components/Hello.vue b/src/v2/examples/vue-20-single-file-components/Hello.vue
new file mode 100644
index 0000000000..9ca04cbb4c
--- /dev/null
+++ b/src/v2/examples/vue-20-single-file-components/Hello.vue
@@ -0,0 +1,20 @@
+
+
{{ greeting }} World!
+
+
+
+
+
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-single-file-components/index.html b/src/v2/examples/vue-20-single-file-components/index.html
new file mode 100644
index 0000000000..865e670f40
--- /dev/null
+++ b/src/v2/examples/vue-20-single-file-components/index.html
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/v2/examples/vue-20-single-file-components/index.js b/src/v2/examples/vue-20-single-file-components/index.js
new file mode 100644
index 0000000000..4cd7af61fb
--- /dev/null
+++ b/src/v2/examples/vue-20-single-file-components/index.js
@@ -0,0 +1,10 @@
+import Vue from "vue";
+import App from "./Hello";
+
+Vue.config.productionTip = false;
+
+new Vue({
+ el: "#app",
+ template: "",
+ components: { App }
+});
diff --git a/src/v2/examples/vue-20-single-file-components/package.json b/src/v2/examples/vue-20-single-file-components/package.json
new file mode 100644
index 0000000000..36dd9df6e4
--- /dev/null
+++ b/src/v2/examples/vue-20-single-file-components/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "vue-20-single-file-components",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "vue": "^2.6.11"
+ },
+ "devDependencies": {},
+ "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"],
+ "keywords": [],
+ "description": "Hello.vue single-file components example using a .vue extension."
+}
diff --git a/src/v2/guide/components-dynamic-async.md b/src/v2/guide/components-dynamic-async.md
index 4cdb29249f..fdfceafb38 100644
--- a/src/v2/guide/components-dynamic-async.md
+++ b/src/v2/guide/components-dynamic-async.md
@@ -193,7 +193,7 @@ new Vue({
{% endraw %}
-Now the _Posts_ tab maintains its state (the selected post) even when it's not rendered. See [this fiddle](https://jsfiddle.net/chrisvfritz/Lp20op9o/) for the complete code.
+Now the _Posts_ tab maintains its state (the selected post) even when it's not rendered. See [this example](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-keep-alive-with-dynamic-components) for the complete code.
Note that `` requires the components being switched between to all have names, either using the `name` option on a component, or through local/global registration.
diff --git a/src/v2/guide/components-edge-cases.md b/src/v2/guide/components-edge-cases.md
index 9aa3adb56d..452213268e 100644
--- a/src/v2/guide/components-edge-cases.md
+++ b/src/v2/guide/components-edge-cases.md
@@ -63,7 +63,7 @@ There are cases however, particularly shared component libraries, when this _mig
```
-The `` component might define a `map` property that all subcomponents need access to. In this case `` might want to access that map with something like `this.$parent.getMap`, in order to add a set of markers to it. You can see this pattern [in action here](https://jsfiddle.net/chrisvfritz/ttzutdxh/).
+The `` component might define a `map` property that all subcomponents need access to. In this case `` might want to access that map with something like `this.$parent.getMap`, in order to add a set of markers to it. You can see this pattern [in action here](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-accessing-parent-component-instance).
Keep in mind, however, that components built with this pattern are still inherently fragile. For example, imagine we add a new `` component and when `` appears within that, it should only render markers that fall within that region:
@@ -154,7 +154,7 @@ Then in any descendants, we can use the `inject` option to receive specific prop
inject: ['getMap']
```
-You can see the [full example here](https://jsfiddle.net/chrisvfritz/tdv8dt3s/). The advantage over using `$parent` is that we can access `getMap` in _any_ descendant component, without exposing the entire instance of ``. This allows us to more safely keep developing that component, without fear that we might change/remove something that a child component is relying on. The interface between these components remains clearly defined, just as with `props`.
+You can see the [full example here](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dependency-injection). The advantage over using `$parent` is that we can access `getMap` in _any_ descendant component, without exposing the entire instance of ``. This allows us to more safely keep developing that component, without fear that we might change/remove something that a child component is relying on. The interface between these components remains clearly defined, just as with `props`.
In fact, you can think of dependency injection as sort of "long-range props", except:
@@ -233,7 +233,7 @@ methods: {
}
```
-See [this fiddle](https://jsfiddle.net/09jvu65m/) for the full code. Note, however, that if you find yourself having to do a lot of setup and cleanup within a single component, the best solution will usually be to create more modular components. In this case, we'd recommend creating a reusable `` component.
+See [this example](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-programmatic-event-listeners) for the full code. Note, however, that if you find yourself having to do a lot of setup and cleanup within a single component, the best solution will usually be to create more modular components. In this case, we'd recommend creating a reusable `` component.
To learn more about programmatic listeners, check out the API for [Events Instance Methods](https://vuejs.org/v2/api/#Instance-Methods-Events).
diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md
index 52d8611955..c199b3c44d 100644
--- a/src/v2/guide/components.md
+++ b/src/v2/guide/components.md
@@ -203,7 +203,7 @@ Then want to render a component for each one:
>
```
-Above, you'll see that we can use `v-bind` to dynamically pass props. This is especially useful when you don't know the exact content you're going to render ahead of time, like when [fetching posts from an API](https://jsfiddle.net/chrisvfritz/sbLgr0ad).
+Above, you'll see that we can use `v-bind` to dynamically pass props. This is especially useful when you don't know the exact content you're going to render ahead of time, like when [fetching posts from an API](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-component-blog-post-example).
That's all you need to know about props for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Props](components-props.html).
@@ -601,7 +601,7 @@ In the example above, `currentTabComponent` can contain either:
- the name of a registered component, or
- a component's options object
-See [this fiddle](https://jsfiddle.net/chrisvfritz/o3nycadu/) to experiment with the full code, or [this version](https://jsfiddle.net/chrisvfritz/b2qj69o1/) for an example binding to a component's options object, instead of its registered name.
+See [this example](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components) to experiment with the full code, or [this version](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components-with-binding) for an example binding to a component's options object, instead of its registered name.
Keep in mind that this attribute can be used with regular HTML elements, however they will be treated as components, which means all attributes **will be bound as DOM attributes**. For some properties such as `value` to work as you would expect, you will need to bind them using the [`.prop` modifier](../api/#v-bind).
diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md
index 98d9f813fb..6b40c4915b 100644
--- a/src/v2/guide/index.md
+++ b/src/v2/guide/index.md
@@ -20,7 +20,7 @@ If you are an experienced frontend developer and want to know how Vue compares t
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:
+The easiest way to try out Vue.js is using the [Hello World example](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-hello-world). 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:
``` html
diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md
index 8d0987d862..fb4c5a4c5d 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`:
-
+
Now we get:
diff --git a/src/v2/guide/transitioning-state.md b/src/v2/guide/transitioning-state.md
index d9cc1ca97e..8e485c6dab 100644
--- a/src/v2/guide/transitioning-state.md
+++ b/src/v2/guide/transitioning-state.md
@@ -366,7 +366,7 @@ function generatePoints (stats) {
{% endraw %}
-See [this fiddle](https://jsfiddle.net/chrisvfritz/65gLu2b6/) for the complete code behind the above demo.
+See [this example](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-state-transitions) for the complete code behind the above demo.
## Organizing Transitions into Components
diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md
index 41b4d857fc..e8ff604be0 100644
--- a/src/v2/guide/transitions.md
+++ b/src/v2/guide/transitions.md
@@ -1244,7 +1244,7 @@ new Vue({
One important note is that these FLIP transitions do not work with elements set to `display: inline`. As an alternative, you can use `display: inline-block` or place elements in a flex context.
-These FLIP animations are also not limited to a single axis. Items in a multidimensional grid can be [transitioned too](https://jsfiddle.net/chrisvfritz/sLrhk1bc/):
+These FLIP animations are also not limited to a single axis. Items in a multidimensional grid can be [transitioned too](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-list-move-transitions):
{% raw %}
diff --git a/src/v2/style-guide/index.md b/src/v2/style-guide/index.md
index add001a8f4..8ff9c9d4bf 100644
--- a/src/v2/style-guide/index.md
+++ b/src/v2/style-guide/index.md
@@ -1755,7 +1755,7 @@ computed: {
**It's usually best to use `key` with `v-if` + `v-else`, if they are the same element type (e.g. both `
` elements).**
-By default, Vue updates the DOM as efficiently as possible. That means when switching between elements of the same type, it simply patches the existing element, rather than removing it and adding a new one in its place. This can have [unintended consequences](https://jsfiddle.net/chrisvfritz/bh8fLeds/) if these elements should not actually be considered the same.
+By default, Vue updates the DOM as efficiently as possible. That means when switching between elements of the same type, it simply patches the existing element, rather than removing it and adding a new one in its place. This can have [unintended consequences](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-priority-d-rules-unintended-consequences) if these elements should not actually be considered the same.
{% raw %}
+