fix: chapter 2

mayashavin · Dec 4, 2023 · 802a141 · 802a141
1 parent 53f161d
commit 802a141
Show file tree

Hide file tree

Showing 18 changed files with 199 additions and 187 deletions.
diff --git a/ch02/index.html b/ch02/index.html
@@ -8,7 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <div id="modal"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/ch02/src/App.vue b/ch02/src/App.vue
diff --git a/ch02/src/GlobalComponent_main.ts b/ch02/src/GlobalComponent_main.ts
@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+//1. Create the app instance 
+const app = createApp({
+    template: '<MyComponent />' 
+});
+
+//2. Define the component 
+const MyComponent = {
+    template: 'This is my global component' 
+}
+
+//3. Register a component globally 
+
+app.component('MyComponent', MyComponent)
+app.mount('#app')
diff --git a/ch02/src/components/Collection.ts b/ch02/src/components/Collection.ts
@@ -1,18 +1,28 @@
-const Collection = {
-    data() {
-     return {
+import { createApp } from "vue";
+
+export const Collection = {
+  data() {
+    return {
       collection: {
-       title: 'Watch Moonknight', 
-       description: 'Log in to Disney+ and watch all the chapters',
-       priority: '5'
+        title: 'Watch Moonknight', 
+        description: 'Log in to Disney+ and watch all the chapters',
+        priority: '5'
       }
-     }
-    },
-    template: `
-    <ul>
-     <li v-for="(value, name) in collection" :key="name"> <2>
-      {{name}}: {{value}}
-     </li>
-    </ul>
-    `,
-   }
+    }
+  },
+  template: `
+  <ul>
+    <li v-for="(value, name) in collection" :key="name">
+    {{name}}: {{value}}
+    </li>
+  </ul>
+  `,
+};
+
+const app = createApp({
+  components: { Collection },
+  template: `<Collection />`
+});
+
+
+export default app;
diff --git a/ch02/src/components/ConditionalRender.ts b/ch02/src/components/ConditionalRender.ts
@@ -0,0 +1,17 @@
+export const ConditionalRender = {
+    template: `
+    <div>
+        <div>Visibility: {{isVisible}}</div> 
+        <div v-show="isVisible">I'm the text in toggle</div>
+        <div v-if="isVisible">I'm the visible text</div>
+        <div v-else-if="showSubtitle">I'm the subtitle text</div>
+        <div v-else>I'm the replacement text</div>
+    </div>
+    `, 
+    data() {
+        return { 
+            isVisible: false,
+            showSubtitle: false,
+        } 
+    }
+}
diff --git a/ch02/src/components/HelloWorld.vue b/ch02/src/components/HelloWorld.vue
diff --git a/ch02/src/components/ImageComp.ts b/ch02/src/components/ImageComp.ts
@@ -1,3 +1,5 @@
+const isVisible = true;
+
 export const ImageComp = {
     template: `
      <img v-bind="image" />
@@ -7,6 +9,11 @@ export const ImageComp = {
       image: {
        src: "https://res.cloudinary.com/mayashavin/image/upload/TheCute%20Cat",
        alt: "A random cute cate image",
+    //    class: ["cat", "image"],
+    class: {
+        cat: isVisible,
+        image: !isVisible,
+    },
        style: [{
         marginBlock: "10px",
         marginInline: "15px"

diff --git a/ch02/src/components/InputWithKey.ts b/ch02/src/components/InputWithKey.ts
@@ -0,0 +1,19 @@
+// export const InputWithKey = {
+//     template: `<input @keydown="onEnter" >`, 
+//     methods: {
+//         onEnter(e: KeyboardEvent) { 
+                //if (e.keyCode === 13) {
+//                  console.log('User pressed Enter!') 
+                // }
+//         }
+//     }
+// }
+
+export const InputWithKeyEnter = {
+    template: `<input @keydown.enter="onEnter" >`, 
+    methods: {
+        onEnter() { 
+            console.log('User pressed Enter!')
+        }
+    }
+}
diff --git a/ch02/src/components/MemoedList.ts b/ch02/src/components/MemoedList.ts
@@ -1,42 +1,42 @@
 export const MemoedList = {
     template: `
- <ul>
-  <li 
-   v-for="image in images" 
-   :key="image.id" 
-   :style=" selected === image.id ? { border: '1px solid blue' } : {}"
-   @click="selected = image.id"
-   v-memo="[selected === image.id]" <1>
-  >
-   <img :src="image.url">
-   <div>{{image.title}}</h2>
-  </li>
- </ul>
- `,
+  <ul>
+    <li 
+    v-for="image in images" 
+    :key="image.id" 
+    :style=" selected === image.id ? { border: '1px solid blue' } : {}"
+    @click="selected = image.id"
+    v-memo="[selected === image.id]" <1>
+    >
+    <img :src="image.url">
+    <div>{{image.title}}</h2>
+    </li>
+  </ul>
+  `,
     data() {
-     return {
+      return {
       selected: null,
       images: [{
-       id: 1,
-       title: 'Cute cat',
-       url: 
+        id: 1,
+        title: 'Cute cat',
+        url: 
         'https://res.cloudinary.com/mayashavin/image/upload/w_100,h_100,c_thumb/TheCute%20Cat',
       }, {
-       id: 2,
-       title: 'Cute cat no 2',
-       url: 
+        id: 2,
+        title: 'Cute cat no 2',
+        url: 
         'https://res.cloudinary.com/mayashavin/image/upload/w_100,h_100,c_thumb/cute_cat',
       }, {
-       id: 3,
-       title: 'Cute cat no 3',
-       url: 
+        id: 3,
+        title: 'Cute cat no 3',
+        url: 
         'https://res.cloudinary.com/mayashavin/image/upload/w_100,h_100,c_thumb/cat_me',
       }, {
-       id: 4,
-       title: 'Just a cat',
-       url: 
+        id: 4,
+        title: 'Just a cat',
+        url: 
         'https://res.cloudinary.com/mayashavin/image/upload/w_100,h_100,c_thumb/cat_1',
       }]
-     }
     }
-   }
+  }
+}
diff --git a/ch02/src/components/PrintMessage.ts b/ch02/src/components/PrintMessage.ts
@@ -1,14 +1,25 @@
+// import type { ComponentOptions } from 'vue';
+type Data = { 
+    printMsg: string;
+}
+
 export const PrintMessage = {
     template: `
-     <button @click="printMessage">Click me</button>
+    <button @click.stop="printMessage">Click me</button>
     `,
     methods: {
-     printMessage(e: Event) {
-      if (e) {
-       e.stopPropagation()
-      }
-
-      console.log("Button is clicked!")
-     }
+        printMessage(/*e: Event*/) {
+            // (this as ComponentOptions<Data>).printMsg = "Button is clicked!"
+            // if (e) {
+            //     e.stopPropagation();
+            // }
+
+            console.log("Button is clicked!");
+        },
     },
-   }
+    data(): Data {
+        return {
+            printMsg: "Nothing to print yet!",
+        }
+    }
+}
diff --git a/ch02/src/components/StepOne.vue b/ch02/src/components/StepOne.vue
diff --git a/ch02/src/components/StepTwo.vue b/ch02/src/components/StepTwo.vue
diff --git a/ch02/src/components/TaskList.ts b/ch02/src/components/TaskList.ts
@@ -6,26 +6,26 @@ export const TaskList = {
     //  </li>
     // </ul>
     // `,
-    template: `
- <ul>
-  <li v-for="(task, index) in tasks" :key="task.id">
-   {{title}} {{index}}: {{task.description}}
-  </li>
- </ul>
- `,
-    data() {
-     return {
-      tasks: [{
-       id: 'task01',
-       description: 'Buy groceries',
-      }, {
-       id: 'task02',
-       description: 'Do laundry',
-      }, {
-       id: 'task03',
-       description: 'Watch Moonknight',
-      }],
-      title: 'Task'
-     }
-    }
-   }
+   template: `
+   <ul>
+   <li v-for="(task, index) in tasks" :key="task.id">
+      {{title}} {{index}}: {{task.description}}
+   </li>
+   </ul>
+   `, 
+   data() {
+      return {
+         tasks: [{
+            id: 'task01',
+            description: 'Buy groceries',
+         }, {
+            id: 'task02',
+            description: 'Do laundry',
+         }, {
+            id: 'task03',
+            description: 'Watch Moonknight',
+         }],
+         title: 'Task'
+      }
+   }
+}
diff --git a/ch02/src/components/WithVHtml.ts b/ch02/src/components/WithVHtml.ts
@@ -1,12 +1,12 @@
 export const WithVHtml = {
     template: `
-     <div v-html="innerContent" />
+    <div v-html="innerContent" />
     `,
     data() {
-     return {
-      innerContent: `
-       <div>Hello</div>
-      `
-     }
+        return {
+            innerContent: `
+            <div>Hello</div>
+            `
+        }
     }
-   }
+}
diff --git a/ch02/src/components/WithVOnce.ts b/ch02/src/components/WithVOnce.ts
@@ -0,0 +1,12 @@
+export const WithVOnce = {
+    template: `
+    <div>
+    <input v-model="name" placeholder="Enter your name" >
+    </div>
+    <div v-once>{{name}}</div> `,
+    data() { 
+        return {
+            name: 'Maya' 
+        }
+    }
+}