lesson 15: inline templates for single-use components.

.idea/workspace.xml

@@ -2,12 +2,10 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="0f813586-48e2-4acf-8923-221617ab434f" name="Default" comment="">
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson14/code.js" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson14/index.html" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson14/styles.css" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/php.xml" afterPath="$PROJECT_DIR$/.idea/php.xml" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson15/code.js" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson15/index.html" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/lesson15/styles.css" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/lesson13/index.html" afterPath="$PROJECT_DIR$/lesson13/index.html" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="TRACKING_ENABLED" value="true" />
@@ -73,6 +71,8 @@
         <option value="$PROJECT_DIR$/lesson13/index.html" />
         <option value="$PROJECT_DIR$/lesson14/code.js" />
         <option value="$PROJECT_DIR$/lesson14/index.html" />
+        <option value="$PROJECT_DIR$/lesson15/code.js" />
+        <option value="$PROJECT_DIR$/lesson15/index.html" />
       </list>
     </option>
   </component>
@@ -132,7 +132,7 @@
               <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
             </PATH_ELEMENT>
             <PATH_ELEMENT>
-              <option name="myItemId" value="lesson14" />
+              <option name="myItemId" value="lesson15" />
               <option name="myItemType" value="com.jetbrains.php.projectView.PhpTreeStructureProvider$1" />
             </PATH_ELEMENT>
           </PATH>
@@ -291,7 +291,7 @@
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="13685000" />
+    <option name="totallyTimeSpent" value="14439000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1440" height="877" extended-state="6" />
@@ -341,14 +341,6 @@
     <watches-manager />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/lesson07/styles.css">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="285">
-          <caret line="19" column="0" lean-forward="true" selection-start-line="19" selection-start-column="0" selection-end-line="19" selection-end-column="0" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/lesson06/code.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="195">
@@ -737,5 +729,29 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/lesson15/styles.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="285">
+          <caret line="19" column="0" lean-forward="true" selection-start-line="19" selection-start-column="0" selection-end-line="19" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/lesson15/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="495">
+          <caret line="31" column="0" lean-forward="true" selection-start-line="31" selection-start-column="0" selection-end-line="31" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/lesson15/code.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="105">
+          <caret line="7" column="3" lean-forward="true" selection-start-line="7" selection-start-column="3" selection-end-line="7" selection-end-column="3" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
   </component>
 </project>

lesson15/code.js

@@ -0,0 +1,12 @@
+Vue.component('progress-view', {
+  data() {
+    return {
+      completionRate: 50,
+    };
+  },
+  // No need for a template: it is inline in the HTML.
+});
+
+const app = new Vue({
+  el: '#root',
+});

lesson15/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css" />
+    <link rel="stylesheet" href="../styles.css" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <nav>
+      <h1><span class="index">15</span>Single-use components and inline templates</h1>
+      <ul>
+        <li><a href="../lesson14">Prev</a></li>
+        <li><a href="../lesson16">Next</a></li>
+      </ul>
+    </nav>
+
+    <div id="root" class="container">
+      <progress-view inline-template>
+        <div>
+        <h2>Your progress through this course is {{ completionRate }}%</h2>
+        <p><button v-if="completionRate < 100" @click="completionRate += 10">Increase completion</button></p>
+        </div>
+      </progress-view>
+    </div>
+
+    <script src="../lib/vue-2.1.3.js"></script>
+    <script src="code.js"></script>
+  </body>
+</html>

lesson15/styles.css

@@ -0,0 +1,19 @@
+body {
+  padding-top: 40px;
+}
+
+nav li {
+  display: inline;
+}
+
+nav h1 span {
+  margin-right: 0.3em;
+}
+
+button {
+  display: block;
+}
+
+[v-cloak] {
+  display: none;
+}