From d71b410a8ba8783a6d43acbf498814209e42872d Mon Sep 17 00:00:00 2001 From: "Vue.js Developers" Date: Wed, 27 Feb 2019 14:17:58 +0800 Subject: [PATCH 1/7] Adding Vue School sponsor --- README.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e889555f..f3d7b2cd 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,13 @@ See the completed project here: [http://vuejs-cinema.vuejsdevelopers.com/](http: Your site will be available at *localhost:[PORT]* where `PORT` is whatever value is set in your `.env` file. -#### Lecture branches +## Sponsors + +Vue School + +[Support Vue.js Developers](https://www.patreon.com/anthonygore?utm-source=github-vjd&utm-medium=link&utm_campaign=sponsors) to get your logo here. + +## Lecture branches Each branch of of the repo shows the state of the code at the end of any particular video e.g. `video/08` shows the state at the end of video 8. @@ -105,4 +111,4 @@ If you're doing the *Vue.js Essentials - 3 Course Bundle* course on Udemy, you'l | 115 | video/59 | | 117 | video/61 | | 118 | video/62 | -| 119 | video/63 | \ No newline at end of file +| 119 | video/63 | From 7d012482320187d37bd0e31af29ce9e125edce28 Mon Sep 17 00:00:00 2001 From: Tertius Scheepers Date: Tue, 4 Jun 2019 11:02:04 +0200 Subject: [PATCH 2/7] Initial Update --- package-lock.json | 41 ++++++++++++++++++++++++++++++----------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8ac9d485..8b4ba091 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2660,7 +2660,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2678,11 +2679,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2695,15 +2698,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2806,7 +2812,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2816,6 +2823,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2828,17 +2836,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -2855,6 +2866,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -2927,7 +2939,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -2937,6 +2950,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3012,7 +3026,8 @@ }, "safe-buffer": { "version": "5.1.1", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3042,6 +3057,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3059,6 +3075,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3097,11 +3114,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.2", - "bundled": true + "bundled": true, + "optional": true } } }, From 5a8f412d78efbc58a2d8e31e915d3a571d04a1ee Mon Sep 17 00:00:00 2001 From: Tertius Scheepers Date: Wed, 5 Jun 2019 09:14:35 +0200 Subject: [PATCH 3/7] Starter code setup complete --- index.html | 18 +++++++++++------- src/main.js | 11 +++++++++++ 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index d702fb8a..50b4bc3a 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -12,13 +13,16 @@ } + -
-
- -

Vue.js Cinema

+
+
+ +

Vue.js Cinema

+
+ {{msg}}
-
- + - + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index e69de29b..b610d1aa 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,11 @@ +import Vue from 'vue'; +import './style.scss' + +new Vue({ + el: '#app', + data() { + return { + msg: 'Hello World' + } + }, +}) \ No newline at end of file From 9c6d251bf335310376679fcf432d72a6bed7b00f Mon Sep 17 00:00:00 2001 From: Tertius Scheepers Date: Fri, 7 Jun 2019 12:47:50 +0200 Subject: [PATCH 4/7] Added movie title and filter components --- .vscode/settings.json | 12 +++++++++++ index.html | 7 +++++- src/main.js | 50 +++++++++++++++++++++++++++++++++++++------ 3 files changed, 61 insertions(+), 8 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..40e6e6a4 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,12 @@ +{ + "spellright.language": [ + "en" + ], + "spellright.documentTypes": [ + "markdown", + "latex", + "plaintext", + "html", + "javascript" + ] +} \ No newline at end of file diff --git a/index.html b/index.html index 50b4bc3a..57e2d811 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,12 @@

Vue.js Cinema

- {{msg}} +
+
+ + +
+
diff --git a/src/main.js b/src/main.js index b610d1aa..1bb223d1 100644 --- a/src/main.js +++ b/src/main.js @@ -1,11 +1,47 @@ import Vue from 'vue'; -import './style.scss' +import './style.scss'; +import genres from './util/genres' new Vue({ - el: '#app', - data() { - return { - msg: 'Hello World' - } - }, +el: '#app', +components: { +'movie-list': { +template: `
+
{{movie.title}}
+
`, +data() { +return { +movies: [ +{ title: 'Pulp Fiction' }, +{ title: 'Home Alone' }, +{ title: 'Austin Powers' }, +] +} +}, +}, +'movie-filter': { +data() { +return { +genres +} +}, +template: `
+

Filter results

+
+ +
+
`, +components: { +'check-filter': { +props: [ +'title' +], +template: `
+ + {{title}} +
` +} +} +} +}, }) \ No newline at end of file From e183e6fe179cf5d698f30a57eb4506cfe242be7f Mon Sep 17 00:00:00 2001 From: Tertius Scheepers Date: Fri, 7 Jun 2019 13:01:55 +0200 Subject: [PATCH 5/7] added checked css capability --- src/main.js | 67 ++++++++++++++++++++++++++++------------------------- 1 file changed, 36 insertions(+), 31 deletions(-) diff --git a/src/main.js b/src/main.js index 1bb223d1..f12a45c4 100644 --- a/src/main.js +++ b/src/main.js @@ -3,45 +3,50 @@ import './style.scss'; import genres from './util/genres' new Vue({ -el: '#app', -components: { -'movie-list': { -template: `
+ el: '#app', + components: { + 'movie-list': { + template: `
{{movie.title}}
`, -data() { -return { -movies: [ -{ title: 'Pulp Fiction' }, -{ title: 'Home Alone' }, -{ title: 'Austin Powers' }, -] -} -}, -}, -'movie-filter': { -data() { -return { -genres -} -}, -template: `
+ data() { + return { + movies: [ + { title: 'Pulp Fiction' }, + { title: 'Home Alone' }, + { title: 'Austin Powers' }, + ] + } + }, + }, + 'movie-filter': { + data() { + return { + genres + } + }, + template: `

Filter results

`, -components: { -'check-filter': { -props: [ -'title' -], -template: `
+ components: { + 'check-filter': { + data() { + return { + checked: false + } + }, + props: [ + 'title' + ], + template: `
{{title}}
` -} -} -} -}, + } + } + } + }, }) \ No newline at end of file From 474938da96b3333b30363a84a13ca8b20c90316a Mon Sep 17 00:00:00 2001 From: Tertius Scheepers Date: Mon, 10 Jun 2019 09:52:38 +0200 Subject: [PATCH 6/7] changed font for offline --- src/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/style.scss b/src/style.scss index 4a63122f..d8e6658b 100644 --- a/src/style.scss +++ b/src/style.scss @@ -45,7 +45,8 @@ body, html { h1 { display: inline-block; - font-family: 'Orbitron', sans-serif; + // font-family: 'Orbitron', sans-serif; + font-family: sans-serif; margin: 0; padding: 0 0 0 1rem; font-size: 2.5rem; From 68dd5c73ca3c0ccd41f3b89a85e10b5e47d4aae0 Mon Sep 17 00:00:00 2001 From: Tertius Scheepers Date: Mon, 10 Jun 2019 09:54:36 +0200 Subject: [PATCH 7/7] created an emit event for checkFilter --- src/main.js | 33 ++++++++++++++++++++++----------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/src/main.js b/src/main.js index f12a45c4..05f38950 100644 --- a/src/main.js +++ b/src/main.js @@ -7,8 +7,8 @@ new Vue({ components: { 'movie-list': { template: `
-
{{movie.title}}
-
`, +
{{movie.title}}
+
`, data() { return { movies: [ @@ -26,11 +26,16 @@ new Vue({ } }, template: `
-

Filter results

-
- -
-
`, +

Filter results

+
+ +
+
`, + methods: { + checkFilter() { + console.log('CheckFilter') + } + }, components: { 'check-filter': { data() { @@ -41,10 +46,16 @@ new Vue({ props: [ 'title' ], - template: `
- - {{title}} -
` + template: `
+ + {{title}} +
`, + methods: { + checkFilter() { + this.checked = !this.checked + this.$emit('check-filter'); + } + } } } }