vuejs · NataliaTepluhina · Jan 26, 2020 · Jan 22, 2020 · Jan 22, 2020 · Jan 22, 2020
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
@@ -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>
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
@@ -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"
+  }
+}
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
@@ -0,0 +1,3 @@
+{
+  "template": "static"
+}
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
@@ -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>
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
@@ -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"
+  }
+}
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
@@ -0,0 +1,3 @@
+{
+  "template": "static"
+}
diff --git a/src/v2/examples/vue-20-dependency-injection/index.html b/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>
diff --git a/src/v2/examples/vue-20-dependency-injection/package.json 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"
+  }
+}
diff --git a/src/v2/examples/vue-20-dependency-injection/sandbox.config.json b/src/v2/examples/vue-20-dependency-injection/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "template": "static"
+}
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
@@ -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>
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
@@ -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"
+  }
+}
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
@@ -0,0 +1,3 @@
+{
+  "template": "static"
+}