From 731518fdefd39481783113709f68cb05ecb9e43c Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 12:51:34 +0000 Subject: [PATCH 01/27] Moving example code to examples folder Example code from https://jsfiddle.net/chrisvfritz/50wL7mdz/ --- src/v2/examples/vue-20-hello-world/index.html | 22 +++++++++++++++++++ .../examples/vue-20-hello-world/package.json | 14 ++++++++++++ .../vue-20-hello-world/sandbox.config.json | 3 +++ 3 files changed, 39 insertions(+) create mode 100644 src/v2/examples/vue-20-hello-world/index.html create mode 100644 src/v2/examples/vue-20-hello-world/package.json create mode 100644 src/v2/examples/vue-20-hello-world/sandbox.config.json diff --git a/src/v2/examples/vue-20-hello-world/index.html b/src/v2/examples/vue-20-hello-world/index.html new file mode 100644 index 0000000000..aebb149ee4 --- /dev/null +++ b/src/v2/examples/vue-20-hello-world/index.html @@ -0,0 +1,22 @@ + + + + + + Vue 2.0 Hello World + + +
+

{{ message }}

+
+ + diff --git a/src/v2/examples/vue-20-hello-world/package.json b/src/v2/examples/vue-20-hello-world/package.json new file mode 100644 index 0000000000..c02e41273c --- /dev/null +++ b/src/v2/examples/vue-20-hello-world/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-hello-world", + "version": "1.0.0", + "description": "The easiest way to try out Vue.js, edit this Hello World example", + "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-hello-world/sandbox.config.json b/src/v2/examples/vue-20-hello-world/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-hello-world/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} From 405ea5854e1cfe185f759dd1a522468fd4545f1f Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 13:03:31 +0000 Subject: [PATCH 02/27] Update index.html --- src/v2/examples/vue-20-hello-world/index.html | 39 +++++++++---------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/src/v2/examples/vue-20-hello-world/index.html b/src/v2/examples/vue-20-hello-world/index.html index aebb149ee4..aa8403c6b7 100644 --- a/src/v2/examples/vue-20-hello-world/index.html +++ b/src/v2/examples/vue-20-hello-world/index.html @@ -1,22 +1,21 @@ - - - - - Vue 2.0 Hello World - - -
-

{{ message }}

-
- + + + My first Vue app + + + +
+ {{ message }} +
+ + + From eb299d73ea2f7784dc337d439b3a917375cf0486 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 13:06:08 +0000 Subject: [PATCH 03/27] Example app to pull code from example folder Once merged the URL https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-hello-world will work. For testing, use https://codesandbox.io/s/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-hello-world --- src/v2/guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From e74dc9eefdb40218c6f8ac45a6102631f8086d79 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 13:24:37 +0000 Subject: [PATCH 04/27] Moving example code to examples folder Example code from https://jsfiddle.net/chrisvfritz/tdv8dt3s/ --- .../vue-20-dependency-injection/index.html | 97 +++++++++++++++++++ .../vue-20-dependency-injection/package.json | 14 +++ .../sandbox.config.json | 3 + 3 files changed, 114 insertions(+) create mode 100644 src/v2/examples/vue-20-dependency-injection/index.html create mode 100644 src/v2/examples/vue-20-dependency-injection/package.json create mode 100644 src/v2/examples/vue-20-dependency-injection/sandbox.config.json diff --git a/src/v2/examples/vue-20-dependency-injection/index.html b/src/v2/examples/vue-20-dependency-injection/index.html new file mode 100644 index 0000000000..47b143b500 --- /dev/null +++ b/src/v2/examples/vue-20-dependency-injection/index.html @@ -0,0 +1,97 @@ + + + + Dependency Injection Google Maps Demo + + + + + +
+ + + +
+ + + + diff --git a/src/v2/examples/vue-20-dependency-injection/package.json b/src/v2/examples/vue-20-dependency-injection/package.json new file mode 100644 index 0000000000..a4a7d58da3 --- /dev/null +++ b/src/v2/examples/vue-20-dependency-injection/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-dependency-injection", + "version": "1.0.0", + "description": "Vue.js Dependency Injection example using Google Maps.", + "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-dependency-injection/sandbox.config.json b/src/v2/examples/vue-20-dependency-injection/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-dependency-injection/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} From d433ff45a3e504c33e720fb08f93d5dcb8b6b79b Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 13:28:17 +0000 Subject: [PATCH 05/27] Example app to pull code from example folder Once merged the URL https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dependency-injection will work. For testing, use https://codesandbox.io/s/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-dependency-injection --- src/v2/guide/components-edge-cases.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/components-edge-cases.md b/src/v2/guide/components-edge-cases.md index 9aa3adb56d..ad5b8b6229 100644 --- a/src/v2/guide/components-edge-cases.md +++ b/src/v2/guide/components-edge-cases.md @@ -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: From 6483cf7740b4f345b5910345bdfb6acbb5d04cdd Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 13:34:37 +0000 Subject: [PATCH 06/27] Moving example code to examples folder Example code from https://jsfiddle.net/chrisvfritz/ttzutdxh/ --- .../index.html | 91 +++++++++++++++++++ .../package.json | 14 +++ .../sandbox.config.json | 3 + 3 files changed, 108 insertions(+) create mode 100644 src/v2/examples/vue-20-accessing-parent-component-instance/index.html create mode 100644 src/v2/examples/vue-20-accessing-parent-component-instance/package.json create mode 100644 src/v2/examples/vue-20-accessing-parent-component-instance/sandbox.config.json diff --git a/src/v2/examples/vue-20-accessing-parent-component-instance/index.html b/src/v2/examples/vue-20-accessing-parent-component-instance/index.html new file mode 100644 index 0000000000..b446ec77fb --- /dev/null +++ b/src/v2/examples/vue-20-accessing-parent-component-instance/index.html @@ -0,0 +1,91 @@ + + + + Dependency Injection Google Maps Demo + + + + + +
+ + + +
+ + + + diff --git a/src/v2/examples/vue-20-accessing-parent-component-instance/package.json b/src/v2/examples/vue-20-accessing-parent-component-instance/package.json new file mode 100644 index 0000000000..f01eaa982e --- /dev/null +++ b/src/v2/examples/vue-20-accessing-parent-component-instance/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-accessing-parent-component-instance", + "version": "1.0.0", + "description": "Vue.js example accessing Parent Component Instance using Google Maps.", + "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-accessing-parent-component-instance/sandbox.config.json b/src/v2/examples/vue-20-accessing-parent-component-instance/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-accessing-parent-component-instance/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} From 036c9efd598553144cc12629410c20dabc4a57ee Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 13:37:01 +0000 Subject: [PATCH 07/27] Example app to pull code from example folder Once deployed the URL https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-accessing-parent-component-instance will work. For testing, use https://codesandbox.io/s/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-accessing-parent-component-instance --- src/v2/guide/components-edge-cases.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/components-edge-cases.md b/src/v2/guide/components-edge-cases.md index ad5b8b6229..234cd106c9 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: From ca2dd0cfce2ec9f54592ba76291acdb4f1c3fe19 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 13:42:27 +0000 Subject: [PATCH 08/27] Moving example code to examples folder Example code from https://jsfiddle.net/09jvu65m/ --- .../index.html | 32 +++++++++++++++++++ .../package.json | 14 ++++++++ .../sandbox.config.json | 3 ++ 3 files changed, 49 insertions(+) create mode 100644 src/v2/examples/vue-20-programmatic-event-listeners/index.html create mode 100644 src/v2/examples/vue-20-programmatic-event-listeners/package.json create mode 100644 src/v2/examples/vue-20-programmatic-event-listeners/sandbox.config.json 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" +} From 69cf7fd55c1282d7dc0a75f8b584d1ebc5c022a3 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 13:44:28 +0000 Subject: [PATCH 09/27] Example app to pull code from example folder Once merged the link https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-programmatic-event-listeners will work. For testing, use https://codesandbox.io/s/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-programmatic-event-listeners --- src/v2/guide/components-edge-cases.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/components-edge-cases.md b/src/v2/guide/components-edge-cases.md index 234cd106c9..452213268e 100644 --- a/src/v2/guide/components-edge-cases.md +++ b/src/v2/guide/components-edge-cases.md @@ -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). From 2d81e426ac4d6ed0e1e6bc6e800de3679cbf13bb Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 13:52:52 +0000 Subject: [PATCH 10/27] Moving example code to examples folder Example code from https://jsfiddle.net/chrisvfritz/sbLgr0ad --- .../index.html | 43 +++++++++++++++++++ .../package.json | 14 ++++++ .../sandbox.config.json | 3 ++ 3 files changed, 60 insertions(+) create mode 100644 src/v2/examples/vue-20-component-blog-post-example/index.html create mode 100644 src/v2/examples/vue-20-component-blog-post-example/package.json create mode 100644 src/v2/examples/vue-20-component-blog-post-example/sandbox.config.json diff --git a/src/v2/examples/vue-20-component-blog-post-example/index.html b/src/v2/examples/vue-20-component-blog-post-example/index.html new file mode 100644 index 0000000000..4f88009fcb --- /dev/null +++ b/src/v2/examples/vue-20-component-blog-post-example/index.html @@ -0,0 +1,43 @@ + + + + Component Blog Post Example + + + +
+ +
+ + + + diff --git a/src/v2/examples/vue-20-component-blog-post-example/package.json b/src/v2/examples/vue-20-component-blog-post-example/package.json new file mode 100644 index 0000000000..65197ee445 --- /dev/null +++ b/src/v2/examples/vue-20-component-blog-post-example/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-component-blog-post-example", + "version": "1.0.0", + "description": "Dynamically passing props, like when fetching posts from an API.", + "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-component-blog-post-example/sandbox.config.json b/src/v2/examples/vue-20-component-blog-post-example/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-component-blog-post-example/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} From a9f4ce573e91dd74b81483c9c59d89b4267cf179 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 13:57:03 +0000 Subject: [PATCH 11/27] Example app to pull code from example folder Once merged, the url https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-component-blog-post-example will work. For testing, use https://codesandbox.io/s/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-component-blog-post-example --- src/v2/guide/components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md index 52d8611955..142b3c0f43 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). From af94556ec6c07f0f0b8cdc4af850027044840b0d Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 14:02:14 +0000 Subject: [PATCH 12/27] Moving example code to examples folder Example code from https://jsfiddle.net/chrisvfritz/o3nycadu/ --- .../vue-20-dynamic-components/index.html | 68 +++++++++++++++++++ .../vue-20-dynamic-components/package.json | 14 ++++ .../sandbox.config.json | 3 + 3 files changed, 85 insertions(+) create mode 100644 src/v2/examples/vue-20-dynamic-components/index.html create mode 100644 src/v2/examples/vue-20-dynamic-components/package.json create mode 100644 src/v2/examples/vue-20-dynamic-components/sandbox.config.json diff --git a/src/v2/examples/vue-20-dynamic-components/index.html b/src/v2/examples/vue-20-dynamic-components/index.html new file mode 100644 index 0000000000..9098d1bff5 --- /dev/null +++ b/src/v2/examples/vue-20-dynamic-components/index.html @@ -0,0 +1,68 @@ + + + + Dynamic Components Example + + + + +
+ + + +
+ + + + diff --git a/src/v2/examples/vue-20-dynamic-components/package.json b/src/v2/examples/vue-20-dynamic-components/package.json new file mode 100644 index 0000000000..67cb7f7c07 --- /dev/null +++ b/src/v2/examples/vue-20-dynamic-components/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-dynamic-components", + "version": "1.0.0", + "description": "Used to dynamically switch between components, like in a tabbed interface.", + "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-dynamic-components/sandbox.config.json b/src/v2/examples/vue-20-dynamic-components/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-dynamic-components/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} From 21d69dec622e0540fda94652a2332bed631b9952 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 14:04:24 +0000 Subject: [PATCH 13/27] Example app to pull code from example folder Once merged, the link https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components will work. For testing, use https://codesandbox.io/s/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components --- src/v2/guide/components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md index 142b3c0f43..94f21f8769 100644 --- a/src/v2/guide/components.md +++ b/src/v2/guide/components.md @@ -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://jsfiddle.net/chrisvfritz/b2qj69o1/) 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). From 6c453216b26b12ebc46c8d861492bf85a8200433 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 14:10:06 +0000 Subject: [PATCH 14/27] Moving example code to examples folder Example code from https://jsfiddle.net/chrisvfritz/b2qj69o1/ --- .../index.html | 74 +++++++++++++++++++ .../package.json | 14 ++++ .../sandbox.config.json | 3 + 3 files changed, 91 insertions(+) create mode 100644 src/v2/examples/vue-20-dynamic-components-with-binding/index.html create mode 100644 src/v2/examples/vue-20-dynamic-components-with-binding/package.json create mode 100644 src/v2/examples/vue-20-dynamic-components-with-binding/sandbox.config.json diff --git a/src/v2/examples/vue-20-dynamic-components-with-binding/index.html b/src/v2/examples/vue-20-dynamic-components-with-binding/index.html new file mode 100644 index 0000000000..7116c02dc5 --- /dev/null +++ b/src/v2/examples/vue-20-dynamic-components-with-binding/index.html @@ -0,0 +1,74 @@ + + + + Dynamic Components Example + + + + +
+ + + +
+ + + + diff --git a/src/v2/examples/vue-20-dynamic-components-with-binding/package.json b/src/v2/examples/vue-20-dynamic-components-with-binding/package.json new file mode 100644 index 0000000000..fdff914b68 --- /dev/null +++ b/src/v2/examples/vue-20-dynamic-components-with-binding/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-dynamic-components-with-binding", + "version": "1.0.0", + "description": "Showing binding to a component's options object.", + "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-dynamic-components-with-binding/sandbox.config.json b/src/v2/examples/vue-20-dynamic-components-with-binding/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-dynamic-components-with-binding/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} From 9ecbbff545358a1801dac975624f982bb13d11a4 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 14:12:57 +0000 Subject: [PATCH 15/27] Example app to pull code from example folder Once merged, the link https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components-with-binding will work. For testing, use https://codesandbox.io/s/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components-with-binding --- src/v2/guide/components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md index 94f21f8769..c199b3c44d 100644 --- a/src/v2/guide/components.md +++ b/src/v2/guide/components.md @@ -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 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://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). From 7c19e7c76c2d9f1350104420919d2923ad114358 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 14:22:52 +0000 Subject: [PATCH 16/27] Moving example code to examples folder Example code from https://jsfiddle.net/chrisvfritz/65gLu2b6/ --- .../index.html | 129 ++++++++++++++++++ .../package.json | 14 ++ .../sandbox.config.json | 3 + 3 files changed, 146 insertions(+) create mode 100644 src/v2/examples/vue-20-dynamic-state-transitions/index.html create mode 100644 src/v2/examples/vue-20-dynamic-state-transitions/package.json create mode 100644 src/v2/examples/vue-20-dynamic-state-transitions/sandbox.config.json diff --git a/src/v2/examples/vue-20-dynamic-state-transitions/index.html b/src/v2/examples/vue-20-dynamic-state-transitions/index.html new file mode 100644 index 0000000000..ab6ee87c9a --- /dev/null +++ b/src/v2/examples/vue-20-dynamic-state-transitions/index.html @@ -0,0 +1,129 @@ + + + + Dynamic State Transitions + + + + + +
+ + + + + + + + + + +
+ + + + diff --git a/src/v2/examples/vue-20-dynamic-state-transitions/package.json b/src/v2/examples/vue-20-dynamic-state-transitions/package.json new file mode 100644 index 0000000000..6880b42447 --- /dev/null +++ b/src/v2/examples/vue-20-dynamic-state-transitions/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-dynamic-state-transitions", + "version": "1.0.0", + "description": "Data backing state transitions can be updated in real time, like in this example.", + "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-dynamic-state-transitions/sandbox.config.json b/src/v2/examples/vue-20-dynamic-state-transitions/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-dynamic-state-transitions/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} From 5ae4e0e3ed526d07950d0684129d1f4037d7dca2 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 14:24:58 +0000 Subject: [PATCH 17/27] Example app to pull code from example folder Once merged, the link https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-state-transitions will work. For testing, use https://codesandbox.io/s/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-state-transitions --- src/v2/guide/transitioning-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From 40f78f19aec2abce64588c3cf627e49a1f9fa65c Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 14:36:17 +0000 Subject: [PATCH 18/27] Moving example code to examples folder Example code from https://jsfiddle.net/chrisvfritz/Lp20op9o/ --- .../index.html | 97 +++++++++++++++++++ .../package.json | 14 +++ .../sandbox.config.json | 3 + .../style.css | 49 ++++++++++ 4 files changed, 163 insertions(+) create mode 100644 src/v2/examples/vue-20-keep-alive-with-dynamic-components/index.html create mode 100644 src/v2/examples/vue-20-keep-alive-with-dynamic-components/package.json create mode 100644 src/v2/examples/vue-20-keep-alive-with-dynamic-components/sandbox.config.json create mode 100644 src/v2/examples/vue-20-keep-alive-with-dynamic-components/style.css diff --git a/src/v2/examples/vue-20-keep-alive-with-dynamic-components/index.html b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/index.html new file mode 100644 index 0000000000..09ba8c5fc9 --- /dev/null +++ b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/index.html @@ -0,0 +1,97 @@ + + + + Vue Component Blog Post Example + + + + +
+ + + + + +
+ + + + diff --git a/src/v2/examples/vue-20-keep-alive-with-dynamic-components/package.json b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/package.json new file mode 100644 index 0000000000..7bf11e28e3 --- /dev/null +++ b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-keep-alive-with-dynamic-components", + "version": "1.0.0", + "description": "The Posts tab maintains its state (the selected post) even when it's not rendered.", + "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-keep-alive-with-dynamic-components/sandbox.config.json b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-keep-alive-with-dynamic-components/style.css b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/style.css new file mode 100644 index 0000000000..5681ac6cb3 --- /dev/null +++ b/src/v2/examples/vue-20-keep-alive-with-dynamic-components/style.css @@ -0,0 +1,49 @@ +.tab-button { + padding: 6px 10px; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + border: 1px solid #ccc; + cursor: pointer; + background: #f0f0f0; + margin-bottom: -1px; + margin-right: -1px; +} +.tab-button:hover { + background: #e0e0e0; +} +.tab-button.active { + background: #e0e0e0; +} +.tab { + border: 1px solid #ccc; + padding: 10px; +} +.posts-tab { + display: flex; +} +.posts-sidebar { + max-width: 40vw; + margin: 0; + padding: 0 10px 0 0; + list-style-type: none; + border-right: 1px solid #ccc; +} +.posts-sidebar li { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + cursor: pointer; +} +.posts-sidebar li:hover { + background: #eee; +} +.posts-sidebar li.selected { + background: lightblue; +} +.selected-post-container { + padding-left: 10px; +} +.selected-post > :first-child { + margin-top: 0; + padding-top: 0; +} From 78cda7a6ff0375dce56ef59e2c0af305fc8f6c19 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 14:38:09 +0000 Subject: [PATCH 19/27] Example app to pull code from example folder Once merged, the link https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-keep-alive-with-dynamic-components will work. For testing, use https://codesandbox.io/s/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-keep-alive-with-dynamic-components --- src/v2/guide/components-dynamic-async.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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.

From 5c644efef0c7e30fb8019564c83a6073782386ab Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 15:00:19 +0000 Subject: [PATCH 20/27] Moving example code to examples folder Example code from https://jsfiddle.net/chrisvfritz/sLrhk1bc/ --- .../vue-20-list-move-transitions/index.html | 43 +++++++++++++++++++ .../vue-20-list-move-transitions/package.json | 14 ++++++ .../sandbox.config.json | 3 ++ .../vue-20-list-move-transitions/style.css | 25 +++++++++++ 4 files changed, 85 insertions(+) create mode 100644 src/v2/examples/vue-20-list-move-transitions/index.html create mode 100644 src/v2/examples/vue-20-list-move-transitions/package.json create mode 100644 src/v2/examples/vue-20-list-move-transitions/sandbox.config.json create mode 100644 src/v2/examples/vue-20-list-move-transitions/style.css diff --git a/src/v2/examples/vue-20-list-move-transitions/index.html b/src/v2/examples/vue-20-list-move-transitions/index.html new file mode 100644 index 0000000000..538f602c27 --- /dev/null +++ b/src/v2/examples/vue-20-list-move-transitions/index.html @@ -0,0 +1,43 @@ + + + + List Move Transitions Sudoku Example + + + + + +
+

Lazy Sudoku

+

Keep hitting the shuffle button until you win.

+ + + +
+ {{ cell.number }} +
+ +
+ + + + diff --git a/src/v2/examples/vue-20-list-move-transitions/package.json b/src/v2/examples/vue-20-list-move-transitions/package.json new file mode 100644 index 0000000000..f18a53b340 --- /dev/null +++ b/src/v2/examples/vue-20-list-move-transitions/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-list-move-transitions", + "version": "1.0.0", + "description": "Example showing list entering/leaving transitions in Sudoku.", + "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-list-move-transitions/sandbox.config.json b/src/v2/examples/vue-20-list-move-transitions/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-list-move-transitions/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-list-move-transitions/style.css b/src/v2/examples/vue-20-list-move-transitions/style.css new file mode 100644 index 0000000000..103973e3ca --- /dev/null +++ b/src/v2/examples/vue-20-list-move-transitions/style.css @@ -0,0 +1,25 @@ +.container { + display: flex; + flex-wrap: wrap; + width: 238px; + margin-top: 10px; +} +.cell { + display: flex; + justify-content: space-around; + align-items: center; + width: 25px; + height: 25px; + border: 1px solid #aaa; + margin-right: -1px; + margin-bottom: -1px; +} +.cell:nth-child(3n) { + margin-right: 0; +} +.cell:nth-child(27n) { + margin-bottom: 0; +} +.cell-move { + transition: transform 1s; +} From 8bdf36f918f89cc6457eefc68b53049e425cd738 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 15:03:14 +0000 Subject: [PATCH 21/27] Example app to pull code from example folder Once merged, the link https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-list-move-transitions will work. For testing, use https://codesandbox.io/s/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-list-move-transitions --- src/v2/guide/transitions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 %}
From 6826c769d915a169cd28f133e65309466276619f Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 15:47:22 +0000 Subject: [PATCH 22/27] Moving example code to examples folder Example code in https://jsfiddle.net/chrisvfritz/tf2pjsc9/ --- .../index.html | 47 +++++++++++++++++++ .../package.json | 14 ++++++ .../sandbox.config.json | 3 ++ 3 files changed, 64 insertions(+) create mode 100644 src/v2/examples/vue-20-priority-d-rules-correct-example/index.html create mode 100644 src/v2/examples/vue-20-priority-d-rules-correct-example/package.json create mode 100644 src/v2/examples/vue-20-priority-d-rules-correct-example/sandbox.config.json diff --git a/src/v2/examples/vue-20-priority-d-rules-correct-example/index.html b/src/v2/examples/vue-20-priority-d-rules-correct-example/index.html new file mode 100644 index 0000000000..dcc0ce7d33 --- /dev/null +++ b/src/v2/examples/vue-20-priority-d-rules-correct-example/index.html @@ -0,0 +1,47 @@ + + + + Priority D Rules Correct Example + + + + +
+ + + + + +

+ 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" +} From 7178ff6b60957061ef6a4be8385b61bbf5ab5050 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 15:51:26 +0000 Subject: [PATCH 23/27] Moving example code to examples folder Example code from https://jsfiddle.net/chrisvfritz/bh8fLeds/ --- .../index.html | 54 +++++++++++++++++++ .../package.json | 14 +++++ .../sandbox.config.json | 3 ++ 3 files changed, 71 insertions(+) create mode 100644 src/v2/examples/vue-20-priority-d-rules-unintended-consequences/index.html create mode 100644 src/v2/examples/vue-20-priority-d-rules-unintended-consequences/package.json create mode 100644 src/v2/examples/vue-20-priority-d-rules-unintended-consequences/sandbox.config.json 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" +} From 016d9787f95fc9a6000edc59191967b80d67265a Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 15:54:10 +0000 Subject: [PATCH 24/27] Example app to pull code from example folder Once merged, the link https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-priority-d-rules-unintended-consequences will work. For testing, use https://codesandbox.io/s/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-priority-d-rules-unintended-consequences Likewise with the app referenced in the explanation text https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-priority-d-rules-correct-example / https://codesandbox.io/s/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-priority-d-rules-correct-example --- src/v2/style-guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 %}
{% endraw %} #### Bad From 3f694d372cdccf91ecce4565c2dca17769ed89d5 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 16:14:13 +0000 Subject: [PATCH 25/27] Moving example code to examples folder Code from https://gist.github.com/chrisvfritz/e2b6a6110e0829d78fa4aedf7cf6b235 --- .../vue-20-single-file-components/Hello.vue | 20 +++++++++++++++++++ .../vue-20-single-file-components/index.html | 1 + .../vue-20-single-file-components/index.js | 10 ++++++++++ 3 files changed, 31 insertions(+) create mode 100644 src/v2/examples/vue-20-single-file-components/Hello.vue create mode 100644 src/v2/examples/vue-20-single-file-components/index.html create mode 100644 src/v2/examples/vue-20-single-file-components/index.js 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 @@ + + + + + \ 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 } +}); From ef41825fb0e8721a4af8b80457a85322ebce8793 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 16:19:29 +0000 Subject: [PATCH 26/27] Add package.json Adding package.json required for import --- .../vue-20-single-file-components/package.json | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/v2/examples/vue-20-single-file-components/package.json 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." +} From caf6aa01012717cf192201af765817a7c3d33482 Mon Sep 17 00:00:00 2001 From: garethx Date: Wed, 22 Jan 2020 16:21:34 +0000 Subject: [PATCH 27/27] Example app to pull code from example folder Once merged, the link https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-single-file-components will work. For testing, use https://codesandbox.io/s/github/garethx/vuejs.org/tree/master/src/v2/examples/vue-20-single-file-components --- src/v2/guide/single-file-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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`: -Single-file component example (click for code as text) +Single-file component example (click for code as text) Now we get: