slots

vueschool · Mar 13, 2019 · 5d48da8 · 5d48da8
1 parent 9a4a02a
commit 5d48da8
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 0 deletions.
diff --git a/slots/app.js b/slots/app.js
@@ -0,0 +1,12 @@
+Vue.component('todo-item', {
+  template: '#todo-item-template',
+  data () {
+    return {
+      completed: false
+    }
+  }
+})
+
+new Vue({
+  el: '#app'
+})
diff --git a/slots/index.html b/slots/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Vue.js Slots Fundamentals</title>
+</head>
+
+<body>
+  <div id="app">
+    <h1>Vue.js Slots Fundamentals</h1>
+
+    <todo-item>
+      Buy Bananas
+
+      <template #description>
+        <p>
+          Bananas are good for your health.
+        </p>
+      </template>
+
+      <template #button-text>
+        Make it rain
+      </template>
+
+    </todo-item>
+
+    <todo-item>
+      Eat Bananas
+
+      <template #description>
+        <p>
+          Bananas are good.
+        </p>
+      </template>
+
+    </todo-item>
+
+  </div>
+
+  <script type="text/x-template" id="todo-item-template">
+    <div>
+      <input type="checkbox" v-model="completed">
+      <span :class="{done: completed}">
+        <slot></slot>
+      </span>
+      <slot name="description"></slot>
+      <button>
+        <slot name="button-text">Highlight</slot>
+      </button>
+    </div>
+  </script>
+
+
+  <script src="https://unpkg.com/vue"></script>
+  <script src="app.js"></script>
+  <style>
+    .done {
+      color: green;
+      text-decoration: line-through;
+    }
+  </style>
+</body>
+
+</html>