diff --git a/ch02/index.html b/ch02/index.html index 59be417..a888544 100644 --- a/ch02/index.html +++ b/ch02/index.html @@ -8,7 +8,6 @@
- diff --git a/ch02/src/App.vue b/ch02/src/App.vue deleted file mode 100644 index ac46383..0000000 --- a/ch02/src/App.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - \ No newline at end of file diff --git a/ch02/src/GlobalComponent_main.ts b/ch02/src/GlobalComponent_main.ts new file mode 100644 index 0000000..8bb76fc --- /dev/null +++ b/ch02/src/GlobalComponent_main.ts @@ -0,0 +1,15 @@ +import { createApp } from 'vue' +//1. Create the app instance +const app = createApp({ + template: '' +}); + +//2. Define the component +const MyComponent = { + template: 'This is my global component' +} + +//3. Register a component globally + +app.component('MyComponent', MyComponent) +app.mount('#app') \ No newline at end of file diff --git a/ch02/src/components/Collection.ts b/ch02/src/components/Collection.ts index 632c26e..def25c6 100644 --- 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: ` - - `, - } \ No newline at end of file + } + }, + template: ` + + `, +}; + +const app = createApp({ + components: { Collection }, + template: `` +}); + + +export default app; \ No newline at end of file diff --git a/ch02/src/components/ConditionalRender.ts b/ch02/src/components/ConditionalRender.ts new file mode 100644 index 0000000..16c4deb --- /dev/null +++ b/ch02/src/components/ConditionalRender.ts @@ -0,0 +1,17 @@ +export const ConditionalRender = { + template: ` +
+
Visibility: {{isVisible}}
+
I'm the text in toggle
+
I'm the visible text
+
I'm the subtitle text
+
I'm the replacement text
+
+ `, + data() { + return { + isVisible: false, + showSubtitle: false, + } + } +} \ No newline at end of file diff --git a/ch02/src/components/HelloWorld.vue b/ch02/src/components/HelloWorld.vue deleted file mode 100644 index f8f1151..0000000 --- a/ch02/src/components/HelloWorld.vue +++ /dev/null @@ -1,3 +0,0 @@ - \ No newline at end of file diff --git a/ch02/src/components/ImageComp.ts b/ch02/src/components/ImageComp.ts index 486d0fe..405558a 100644 --- a/ch02/src/components/ImageComp.ts +++ b/ch02/src/components/ImageComp.ts @@ -1,3 +1,5 @@ +const isVisible = true; + export const ImageComp = { template: ` @@ -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 new file mode 100644 index 0000000..ab6d5c1 --- /dev/null +++ b/ch02/src/components/InputWithKey.ts @@ -0,0 +1,19 @@ +// export const InputWithKey = { +// template: ``, +// methods: { +// onEnter(e: KeyboardEvent) { + //if (e.keyCode === 13) { +// console.log('User pressed Enter!') + // } +// } +// } +// } + +export const InputWithKeyEnter = { + template: ``, + methods: { + onEnter() { + console.log('User pressed Enter!') + } + } +} \ No newline at end of file diff --git a/ch02/src/components/MemoedList.ts b/ch02/src/components/MemoedList.ts index cdb0d81..dafc8eb 100644 --- a/ch02/src/components/MemoedList.ts +++ b/ch02/src/components/MemoedList.ts @@ -1,42 +1,42 @@ export const MemoedList = { template: ` - - `, + + `, 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', }] - } } - } \ No newline at end of file + } +} \ No newline at end of file diff --git a/ch02/src/components/PrintMessage.ts b/ch02/src/components/PrintMessage.ts index ccd1058..df8a625 100644 --- 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: ` - + `, methods: { - printMessage(e: Event) { - if (e) { - e.stopPropagation() - } - - console.log("Button is clicked!") - } + printMessage(/*e: Event*/) { + // (this as ComponentOptions).printMsg = "Button is clicked!" + // if (e) { + // e.stopPropagation(); + // } + + console.log("Button is clicked!"); + }, }, - } \ No newline at end of file + data(): Data { + return { + printMsg: "Nothing to print yet!", + } + } +} \ No newline at end of file diff --git a/ch02/src/components/StepOne.vue b/ch02/src/components/StepOne.vue deleted file mode 100644 index 6909bbb..0000000 --- a/ch02/src/components/StepOne.vue +++ /dev/null @@ -1,11 +0,0 @@ - - \ No newline at end of file diff --git a/ch02/src/components/StepTwo.vue b/ch02/src/components/StepTwo.vue deleted file mode 100644 index e5d31ca..0000000 --- a/ch02/src/components/StepTwo.vue +++ /dev/null @@ -1,6 +0,0 @@ - - \ No newline at end of file diff --git a/ch02/src/components/TaskList.ts b/ch02/src/components/TaskList.ts index dc96745..7d62c79 100644 --- a/ch02/src/components/TaskList.ts +++ b/ch02/src/components/TaskList.ts @@ -6,26 +6,26 @@ export const TaskList = { // // // `, - template: ` -
    -
  • - {{title}} {{index}}: {{task.description}} -
    • -
- `, - data() { - return { - tasks: [{ - id: 'task01', - description: 'Buy groceries', - }, { - id: 'task02', - description: 'Do laundry', - }, { - id: 'task03', - description: 'Watch Moonknight', - }], - title: 'Task' - } - } - } \ No newline at end of file + template: ` +
    +
  • + {{title}} {{index}}: {{task.description}} +
    • +
+ `, + data() { + return { + tasks: [{ + id: 'task01', + description: 'Buy groceries', + }, { + id: 'task02', + description: 'Do laundry', + }, { + id: 'task03', + description: 'Watch Moonknight', + }], + title: 'Task' + } + } +} \ No newline at end of file diff --git a/ch02/src/components/WithVHtml.ts b/ch02/src/components/WithVHtml.ts index 7d02217..bce0e89 100644 --- a/ch02/src/components/WithVHtml.ts +++ b/ch02/src/components/WithVHtml.ts @@ -1,12 +1,12 @@ export const WithVHtml = { template: ` -
+
`, data() { - return { - innerContent: ` -
Hello
- ` - } + return { + innerContent: ` +
Hello
+ ` + } } - } \ No newline at end of file +} \ No newline at end of file diff --git a/ch02/src/components/WithVOnce.ts b/ch02/src/components/WithVOnce.ts new file mode 100644 index 0000000..7c890ba --- /dev/null +++ b/ch02/src/components/WithVOnce.ts @@ -0,0 +1,12 @@ +export const WithVOnce = { + template: ` +
+ +
+
{{name}}
`, + data() { + return { + name: 'Maya' + } + } +} \ No newline at end of file diff --git a/ch02/src/components/WithVText.ts b/ch02/src/components/WithVText.ts new file mode 100644 index 0000000..3aaa3d3 --- /dev/null +++ b/ch02/src/components/WithVText.ts @@ -0,0 +1,10 @@ +export const WithVText = { + template: ` +
Placeholder text
+ `, + data() { + return { + text: `Hello World` + } + } +} \ No newline at end of file diff --git a/ch02/src/components/__tests__/HelloWorld.spec.ts b/ch02/src/components/__tests__/HelloWorld.spec.ts deleted file mode 100644 index 2533202..0000000 --- a/ch02/src/components/__tests__/HelloWorld.spec.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { describe, it, expect } from 'vitest' - -import { mount } from '@vue/test-utils' -import HelloWorld from '../HelloWorld.vue' - -describe('HelloWorld', () => { - it('renders properly', () => { - const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } }) - expect(wrapper.text()).toContain('Hello Vitest') - }) -}) diff --git a/ch02/src/main.ts b/ch02/src/main.ts index 626c76f..633933e 100644 --- a/ch02/src/main.ts +++ b/ch02/src/main.ts @@ -1,25 +1,24 @@ -import { createApp, type ComponentOptions } from 'vue' -import NameInput from './components/NameInput'; -import CourseChecklist from './components/CourseChecklist'; +import { createApp, type ComponentOptions } from 'vue/dist/vue.esm-bundler.js' +// import NameInput from './components/NameInput'; +// import CourseChecklist from './components/CourseChecklist'; import type { Data } from './types/Data.type'; import './assets/main.css' // import App from './App.vue' -// import truncate from "./plugins/truncate"; -const Description = { - template: "This is the app's entrance", -} +// const Description = { +// template: "This is the app's entrance", +// } // const App = { - // template: "This is the app's entrance", - // template: "
This is the app's entrance
", - // template: ` - //

This is the app's entrance

- //

We are exploring template syntax

- // `, - // render() { - // return "This is the app's entrance" - // }, +// template: "This is the app's entrance", +// template: "
This is the app's entrance
", +// template: ` +//

This is the app's entrance

+//

We are exploring template syntax

+// `, +// render() { +// return "This is the app's entrance" +// }, // components: { Description }, // template: "" // } @@ -69,21 +68,6 @@ const App = { // template: "" // } -// const App = defineComponent({ -// template: ` -//

{{ $truncate('My truncated long text') }}

-//

{{ truncatedText }}

-// `, -// data() { -// return { -// truncatedText: this.$truncate('My 2nd truncated text') -// } -// } -// }) - - const app = createApp(App) - -// app.use(truncate, { limit: 10 }) app.mount('#app')