├── README.md ├── index.html └── main.css /README.md: -------------------------------------------------------------------------------- 1 | # Vue.js 3 Fundamentals 2 | 3 | [![](https://vueschool.io/media/0b2faaa92e00e7b6d5937c127f65119f/vue-3-fundamentals-not-transparent.jpg)](https://vueschool.io/courses/vuejs-3-fundamentals) 4 | 5 | This repository contains the example code for the [Vue.js 3 Fundamentals](https://vueschool.io/courses/vuejs-3-fundamentals) course. 6 | 7 | In this course, we will teach you the fundamental concepts of Vue.js 3 and create a solid foundation for your Vue journey. 8 | 9 | ### The Vue.js 3 Fundamentals course covers: 10 | 11 | - Introduction to two-way data binding 12 | - Template syntax and expressions 13 | - Vue directives, loops and conditional rendering 14 | - Vue Devtools 15 | - Handling user Inputs 16 | - Handling Events 17 | - Vue.js Methods and Computed Properties 18 | - Attribute Bindings and dynamic classes 19 | 20 | The course is suitable for developers who do not yet know about Vue.js or are just getting started with Vue. 21 | 22 | The course is free. [Enroll at Vue School!](https://vueschool.io/courses/vuejs-3-fundamentals) 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Shopping List App 7 | 8 | 9 | 10 | 11 |
12 |
13 |

{{ header || 'Welcome' }}

14 | 15 | 16 |
17 | 18 |
19 | 22 | 26 | 31 |
32 |

Nice job! You've bought all your items!

33 | 44 |
45 | 46 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eff8ff; 3 | height: 100vh; 4 | width: 100vw; 5 | font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, 6 | Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | margin: 0; 11 | padding: 0; 12 | } 13 | 14 | .counter { 15 | font-size: 0.8rem; 16 | padding-left: 10px; 17 | padding-right: 10px; 18 | } 19 | 20 | #shopping-list { 21 | background: #fff; 22 | padding: 2rem; 23 | margin: 1rem; 24 | border-radius: 3px; 25 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); 26 | width: 95%; 27 | max-width: 900px; 28 | } 29 | 30 | h1 { 31 | color: #3d4852; 32 | } 33 | 34 | ul { 35 | list-style: none; 36 | padding: 0; 37 | } 38 | 39 | a { 40 | color: #6cb2eb; 41 | font-size: 1.25rem; 42 | transition: all 0.1s ease-in; 43 | margin-top: 0.5rem; 44 | display: block; 45 | } 46 | 47 | a:hover { 48 | color: #3490dc; 49 | } 50 | 51 | li, 52 | p { 53 | display: flex; 54 | align-items: center; 55 | line-height: 1.75; 56 | letter-spacing: 0.5px; 57 | color: #3d4852; 58 | font-size: 1.25rem; 59 | cursor: pointer; 60 | transition: all 0.1s ease-in; 61 | } 62 | 63 | li:hover { 64 | color: #22292f; 65 | } 66 | 67 | li input { 68 | margin: 0 0.5rem 0; 69 | } 70 | 71 | #shopping-list > input, 72 | #shopping-list > select { 73 | width: 100%; 74 | border-radius: 3px; 75 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); 76 | border: 1px solid #f1f5f8; 77 | color: #606f7b; 78 | padding: 0.5rem 0.75rem; 79 | box-sizing: border-box; 80 | font-size: 1rem; 81 | letter-spacing: 0.5px; 82 | margin: 0.5rem 0; 83 | } 84 | 85 | .add-item-form, 86 | .header { 87 | display: flex; 88 | align-items: center; 89 | justify-content: space-between; 90 | } 91 | 92 | .add-item-form input { 93 | width: 70%; 94 | border-radius: 3px; 95 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); 96 | border: 1px solid #f1f5f8; 97 | color: #606f7b; 98 | padding: 0.5rem 0.75rem; 99 | box-sizing: border-box; 100 | font-size: 1rem; 101 | letter-spacing: 0.5px; 102 | margin: 0.5rem 0; 103 | } 104 | 105 | .btn { 106 | border: none; 107 | border-radius: 3px; 108 | margin: auto 0; 109 | padding: 0.5rem 0.75rem; 110 | flex-shrink: 0; 111 | cursor: pointer; 112 | font-size: 0.9rem; 113 | letter-spacing: 0.5px; 114 | transition: all 0.1s ease-in; 115 | } 116 | 117 | .btn[disabled] { 118 | background: #8795a1; 119 | } 120 | 121 | .btn[disabled]:hover { 122 | background: #606f7b; 123 | } 124 | 125 | .btn-primary { 126 | background: #6cb2eb; 127 | color: #fff; 128 | } 129 | 130 | .btn-primary:hover { 131 | background: #3490dc; 132 | } 133 | 134 | .btn-cancel { 135 | background: #ef5753; 136 | color: #fff; 137 | } 138 | 139 | .btn-cancel:hover { 140 | background: #e3342f; 141 | color: #fff; 142 | } 143 | 144 | .strikeout { 145 | text-decoration: line-through; 146 | color: #b8c2cc; 147 | } 148 | 149 | .strikeout:hover { 150 | color: #8795a1; 151 | } 152 | 153 | .priority { 154 | color: #de751f; 155 | } 156 | input[type="checkbox"]{ 157 | display: inline !important; 158 | box-shadow: none; 159 | width: auto; 160 | } 161 | --------------------------------------------------------------------------------