Moving external example code to the examples folder (#2452)

* Moving example code to examples folder

Example code from https://jsfiddle.net/chrisvfritz/50wL7mdz/

* Update index.html

* 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

* Moving example code to examples folder

Example code from https://jsfiddle.net/chrisvfritz/tdv8dt3s/

* 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

* Moving example code to examples folder

Example code from https://jsfiddle.net/chrisvfritz/ttzutdxh/

* 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

* Moving example code to examples folder

Example code from https://jsfiddle.net/09jvu65m/

* 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

* Moving example code to examples folder

Example code from https://jsfiddle.net/chrisvfritz/sbLgr0ad

* 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

* Moving example code to examples folder

Example code from https://jsfiddle.net/chrisvfritz/o3nycadu/

* 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

* Moving example code to examples folder

Example code from https://jsfiddle.net/chrisvfritz/b2qj69o1/

* 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

* Moving example code to examples folder

Example code from https://jsfiddle.net/chrisvfritz/65gLu2b6/

* 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

* Moving example code to examples folder

Example code from https://jsfiddle.net/chrisvfritz/Lp20op9o/

* 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

* Moving example code to examples folder

Example code from https://jsfiddle.net/chrisvfritz/sLrhk1bc/

* 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

* Moving example code to examples folder

Example code in https://jsfiddle.net/chrisvfritz/tf2pjsc9/

* Moving example code to examples folder

Example code from https://jsfiddle.net/chrisvfritz/bh8fLeds/

* 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

* Moving example code to examples folder

Code from https://gist.github.com/chrisvfritz/e2b6a6110e0829d78fa4aedf7cf6b235

* Add package.json

Adding package.json required for import

* 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

Author: garethx

src/v2/examples/vue-20-accessing-parent-component-instance/index.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Dependency Injection Google Maps Demo</title>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHbknPTCvUSgWwU0jJ68m4h6b7vpyP6hM"></script>
+    <script src="https://unpkg.com/vue"></script>
+    <style>
+      .map {
+        width: 100%;
+        height: 400px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <google-map>
+        <google-map-marker v-bind:places="vueConfCities"></google-map-marker>
+      </google-map>
+    </div>
+
+    <script>
+      Vue.component("google-map", {
+        data: function() {
+          return {
+            map: null
+          };
+        },
+        mounted: function() {
+          this.map = new google.maps.Map(this.$el, {
+            center: { lat: 0, lng: 0 },
+            zoom: 1
+          });
+        },
+        methods: {
+          getMap: function(found) {
+            var vm = this;
+            function checkForMap() {
+              if (vm.map) {
+                found(vm.map);
+              } else {
+                setTimeout(checkForMap, 50);
+              }
+            }
+            checkForMap();
+          }
+        },
+        template: '<div class="map"><slot></slot></div>'
+      });
+
+      Vue.component("google-map-marker", {
+        props: ["places"],
+        created: function() {
+          var vm = this;
+          vm.$parent.getMap(function(map) {
+            vm.places.forEach(function(place) {
+              new google.maps.Marker({
+                position: place.position,
+                map: map
+              });
+            });
+          });
+        },
+        render(h) {
+          return null;
+        }
+      });
+
+      new Vue({
+        el: "#app",
+        data: {
+          vueConfCities: [
+            {
+              name: "Wrocław",
+              position: {
+                lat: 51.107885,
+                lng: 17.038538
+              }
+            },
+            {
+              name: "New Orleans",
+              position: {
+                lat: 29.951066,
+                lng: -90.071532
+              }
+            }
+          ]
+        }
+      });
+    </script>
+  </body>
+</html>

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"
+  }
+}

src/v2/examples/vue-20-accessing-parent-component-instance/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "static"
+}

src/v2/examples/vue-20-component-blog-post-example/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Component Blog Post Example</title>
+    <script src="https://unpkg.com/vue"></script>
+  </head>
+  <body>
+    <div id="blog-post-demo" class="demo">
+      <blog-post
+        v-for="post in posts"
+        v-bind:key="post.id"
+        v-bind:title="post.title"
+      ></blog-post>
+    </div>
+
+    <script>
+      Vue.component("blog-post", {
+        props: ["title"],
+        template: "<h3>{{ title }}</h3>"
+      });
+
+      new Vue({
+        el: "#blog-post-demo",
+        data: {
+          posts: []
+        },
+        created: function() {
+          // Alias the component instance as `vm`, so that we
+          // can access it inside the promise function
+          var vm = this;
+          // Fetch our array of posts from an API
+          fetch("https://jsonplaceholder.typicode.com/posts")
+            .then(function(response) {
+              return response.json();
+            })
+            .then(function(data) {
+              vm.posts = data;
+            });
+        }
+      });
+    </script>
+  </body>
+</html>

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"
+  }
+}

src/v2/examples/vue-20-component-blog-post-example/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "static"
+}

src/v2/examples/vue-20-dependency-injection/index.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Dependency Injection Google Maps Demo</title>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHbknPTCvUSgWwU0jJ68m4h6b7vpyP6hM"></script>
+    <script src="https://unpkg.com/vue"></script>
+    <style>
+      .map {
+        width: 100%;
+        height: 400px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <google-map>
+        <google-map-marker v-bind:places="vueConfCities"></google-map-marker>
+      </google-map>
+    </div>
+
+    <script>
+      Vue.component("google-map", {
+        provide: function() {
+          return {
+            getMap: this.getMap
+          };
+        },
+        data: function() {
+          return {
+            map: null
+          };
+        },
+        mounted: function() {
+          this.map = new google.maps.Map(this.$el, {
+            center: { lat: 0, lng: 0 },
+            zoom: 1
+          });
+        },
+        methods: {
+          getMap: function(found) {
+            var vm = this;
+            function checkForMap() {
+              if (vm.map) {
+                found(vm.map);
+              } else {
+                setTimeout(checkForMap, 50);
+              }
+            }
+            checkForMap();
+          }
+        },
+        template: '<div class="map"><slot></slot></div>'
+      });
+
+      Vue.component("google-map-marker", {
+        inject: ["getMap"],
+        props: ["places"],
+        created: function() {
+          var vm = this;
+          vm.getMap(function(map) {
+            vm.places.forEach(function(place) {
+              new google.maps.Marker({
+                position: place.position,
+                map: map
+              });
+            });
+          });
+        },
+        render(h) {
+          return null;
+        }
+      });
+
+      new Vue({
+        el: "#app",
+        data: {
+          vueConfCities: [
+            {
+              name: "Wrocław",
+              position: {
+                lat: 51.107885,
+                lng: 17.038538
+              }
+            },
+            {
+              name: "New Orleans",
+              position: {
+                lat: 29.951066,
+                lng: -90.071532
+              }
+            }
+          ]
+        }
+      });
+    </script>
+  </body>
+</html>

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"
+  }
+}

src/v2/examples/vue-20-dependency-injection/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "static"
+}

src/v2/examples/vue-20-dynamic-components-with-binding/index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Dynamic Components Example</title>
+    <script src="https://unpkg.com/vue"></script>
+    <style>
+      .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;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="dynamic-component-demo" class="demo">
+      <button
+        v-for="tab in tabs"
+        v-bind:key="tab.name"
+        v-bind:class="['tab-button', { active: currentTab.name === tab.name }]"
+        v-on:click="currentTab = tab"
+      >
+        {{ tab.name }}
+      </button>
+
+      <component v-bind:is="currentTab.component" class="tab"></component>
+    </div>
+
+    <script>
+      var tabs = [
+        {
+          name: "Home",
+          component: {
+            template: "<div>Home component</div>"
+          }
+        },
+        {
+          name: "Posts",
+          component: {
+            template: "<div>Posts component</div>"
+          }
+        },
+        {
+          name: "Archive",
+          component: {
+            template: "<div>Archive component</div>"
+          }
+        }
+      ];
+
+      new Vue({
+        el: "#dynamic-component-demo",
+        data: {
+          tabs: tabs,
+          currentTab: tabs[0]
+        }
+      });
+    </script>
+  </body>
+</html>

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"
+  }
+}

src/v2/examples/vue-20-dynamic-components-with-binding/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "static"
+}