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/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 | diff --git a/index.html b/index.html index d702fb8a..57e2d811 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -12,13 +13,21 @@ } + -
-
- -

Vue.js Cinema

+
+
+ +

Vue.js Cinema

+
+
+
+ + +
+
-
- + - + + \ No newline at end of file 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 } } }, diff --git a/src/main.js b/src/main.js index e69de29b..05f38950 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,63 @@ +import Vue from 'vue'; +import './style.scss'; +import genres from './util/genres' + +new Vue({ + 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

+
+ +
+
`, + methods: { + checkFilter() { + console.log('CheckFilter') + } + }, + components: { + 'check-filter': { + data() { + return { + checked: false + } + }, + props: [ + 'title' + ], + template: `
+ + {{title}} +
`, + methods: { + checkFilter() { + this.checked = !this.checked + this.$emit('check-filter'); + } + } + } + } + } + }, +}) \ No newline at end of file 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;