• Урок 1. 00:03:09
    Course Introduction
  • Урок 2. 00:04:46
    Let's Create our First VueJS Application
  • Урок 3. 00:04:13
    Extending the VueJS Application
  • Урок 4. 00:03:45
    Course Structure
  • Урок 5. 00:01:57
    Take Advantage of all Course Resources!
  • Урок 6. 00:02:04
    Setup VueJS Locally
  • Урок 7. 00:00:46
    Module Introduction
  • Урок 8. 00:02:36
    Understanding VueJS Templates
  • Урок 9. 00:02:43
    How the VueJS Template Syntax and Instance Work Together
  • Урок 10. 00:01:50
    Accessing Data in the Vue Instance
  • Урок 11. 00:02:44
    Binding to Attributes
  • Урок 12. 00:01:28
    Understanding and Using Directives
  • Урок 13. 00:01:42
    Disable Re-Rendering with v-once
  • Урок 14. 00:02:44
    How to Output Raw HTML
  • Урок 15. 00:01:51
    Listening to Events
  • Урок 16. 00:02:37
    Getting Event Data from the Event Object
  • Урок 17. 00:01:54
    Passing your own Arguments with Events
  • Урок 18. 00:03:24
    Modifying an Event - with Event Modifiers
  • Урок 19. 00:02:04
    Listening to Keyboard Events
  • Урок 20. 00:03:20
    Writing JavaScript Code in the Templates
  • Урок 21. 00:01:50
    Using Two-Way-Binding
  • Урок 22. 00:09:33
    Reacting to Changes with Computed Properties
  • Урок 23. 00:03:54
    An Alternative to Computed Properties: Watching for Changes
  • Урок 24. 00:01:27
    Saving Time with Shorthands
  • Урок 25. 00:04:23
    Dynamic Styling with CSS Classes - Basics
  • Урок 26. 00:01:36
    Dynamic Styling with CSS Classes - Using Objects
  • Урок 27. 00:03:28
    Dynamic Styling with CSS Classes - Using Names
  • Урок 28. 00:03:16
    Setting Styles Dynamically (without CSS Classes)
  • Урок 29. 00:01:15
    Styling Elements with the Array Syntax
  • Урок 30. 00:00:45
    Module Wrap Up
  • Урок 31. 00:00:50
    Module Introduction
  • Урок 32. 00:03:39
    Conditional Rendering with v-if
  • Урок 33. 00:01:37
    Using an Alternative v-if Syntax
  • Урок 34. 00:01:44
    Don't Detach it with v-show
  • Урок 35. 00:02:27
    Rendering Lists with v-for
  • Урок 36. 00:01:52
    Getting the Current Index
  • Урок 37. 00:01:11
    Using an Alternative v-for Syntax
  • Урок 38. 00:04:45
    Looping through Objects
  • Урок 39. 00:00:58
    Looping through a List of Numbers
  • Урок 40. 00:04:09
    Keeping Track of Elements when using v-for
  • Урок 41. 00:00:52
    Module Wrap Up
  • Урок 42. 00:02:55
    Introduction & Challenge
  • Урок 43. 00:02:38
    Setting up the Course Project
  • Урок 44. 00:05:17
    Creating the Vue Instance and Styling the Healthbars
  • Урок 45. 00:02:03
    Showing the Player Controls Conditionally
  • Урок 46. 00:01:54
    Implementing a "Start Game" Method
  • Урок 47. 00:08:04
    Implementing a "Attack" Method
  • Урок 48. 00:04:53
    Write better Code - Time for Refactoring!
  • Урок 49. 00:02:12
    Implementing a "Special Attack"
  • Урок 50. 00:02:22
    Implementing a "Heal" Method
  • Урок 51. 00:01:00
    Finishing the Action Buttons
  • Урок 52. 00:02:42
    Creating an Action Log
  • Урок 53. 00:02:21
    Printing the Log (v-for)
  • Урок 54. 00:01:58
    Finishing the Log
  • Урок 55. 00:01:45
    Styling the Log Conditionally
  • Урок 56. 00:01:29
    Wrap Up
  • Урок 57. 00:01:05
    Module Introduction
  • Урок 58. 00:02:59
    Some Basics about the VueJS Instance
  • Урок 59. 00:02:53
    Using Multiple Vue Instances
  • Урок 60. 00:03:30
    Accessing the Vue Instance from Outside
  • Урок 61. 00:04:02
    How VueJS manages your Data and Methods
  • Урок 62. 00:04:56
    A Closer Look at $el and $data
  • Урок 63. 00:05:49
    Placing $refs and Using them on your Templates
  • Урок 64. 00:00:59
    Where to learn more about the Vue API
  • Урок 65. 00:06:43
    Mounting a Template
  • Урок 66. 00:04:57
    Using Components
  • Урок 67. 00:02:36
    Limitations of some Templates
  • Урок 68. 00:03:26
    How VueJS Updates the DOM
  • Урок 69. 00:03:13
    The VueJS Instance Lifecycle
  • Урок 70. 00:05:40
    The VueJS Instance Lifecycle in Practice
  • Урок 71. 00:00:55
    Module Wrap Up
  • Урок 72. 00:01:34
    Module Introduction
  • Урок 73. 00:02:48
    Why do we need a Development Server?
  • Урок 74. 00:03:52
    What does "Development Workflow" mean?
  • Урок 75. 00:02:36
    Using the Vue CLI to create Projects
  • Урок 76. 00:04:19
    Installing the Vue CLI and Creating a new Project
  • Урок 77. 00:03:41
    An Overview over the Webpack Template Folder Structure
  • Урок 78. 00:06:47
    Understanding ".vue" Files
  • Урок 79. 00:01:12
    Understanding the Object in the Vue File
  • Урок 80. 00:00:50
    How to Build your App for Production
  • Урок 81. 00:01:12
    Module Wrap Up
  • Урок 82. 00:01:05
    Module Introduction
  • Урок 83. 00:04:57
    An Introduction to Components
  • Урок 84. 00:04:05
    Storing Data in Components with the Data Method
  • Урок 85. 00:02:51
    Registering Components Locally and Globally
  • Урок 86. 00:03:22
    The "Root Component" in the App.vue File
  • Урок 87. 00:04:25
    Creating a Component
  • Урок 88. 00:05:33
    Using Components
  • Урок 89. 00:02:44
    Moving to a Better Folder Structure
  • Урок 90. 00:04:32
    How to Name your Component Tags (Selectors)
  • Урок 91. 00:05:06
    Scoping Component Styles
  • Урок 92. 00:00:51
    Module Wrap Up
  • Урок 93. 00:00:47
    Module Introduction
  • Урок 94. 00:02:53
    Communication Problems
  • Урок 95. 00:03:11
    Using Props for Parent => Child Communication
  • Урок 96. 00:01:11
    Naming "props"
  • Урок 97. 00:01:29
    Using "props" in the Child Component
  • Урок 98. 00:04:58
    Validating "props"
  • Урок 99. 00:05:56
    Using Custom Events for Child => Parent Communication
  • Урок 100. 00:01:08
    Understanding Unidirectional Data Flow
  • Урок 101. 00:02:24
    Communicating with Callback Functions
  • Урок 102. 00:06:26
    Communication between Sibling Components
  • Урок 103. 00:05:33
    Using an Event Bus for Communication
  • Урок 104. 00:02:15
    Centralizing Code in an Event Bus
  • Урок 105. 00:00:42
    Wrap Up
  • Урок 106. 00:00:39
    Module Introduction
  • Урок 107. 00:03:01
    Setting up the Module Project
  • Урок 108. 00:02:20
    Passing Content - The Suboptimal Solution
  • Урок 109. 00:00:43
    Passing Content with Slots
  • Урок 110. 00:03:04
    How Slot Content gets Compiled and Styled
  • Урок 111. 00:02:51
    Using Multiple Slots (Named Slots)
  • Урок 112. 00:02:02
    Default Slots and Slot Defaults
  • Урок 113. 00:00:46
    A Summary on Slots
  • Урок 114. 00:05:32
    Switching Multiple Components with Dynamic Components
  • Урок 115. 00:02:08
    Understanding Dynamic Component Behavior
  • Урок 116. 00:00:59
    Keeping Dynamic Components Alive
  • Урок 117. 00:01:19
    Dynamic Component Lifecycle Hooks
  • Урок 118. 00:01:12
    Wrap Up
  • Урок 119. 00:01:37
    Module Introduction
  • Урок 120. 00:01:23
    Setting up the Project
  • Урок 121. 00:01:29
    Initializing the Application
  • Урок 122. 00:04:05
    Creating the Application Components
  • Урок 123. 00:02:14
    Passing Data with Props and Slots
  • Урок 124. 00:04:09
    Allowing Users to Create Quotes with a NewQuote Component
  • Урок 125. 00:03:35
    Adding Quotes with Custom Events
  • Урок 126. 00:01:07
    Adding a Info Box
  • Урок 127. 00:03:41
    Allowing for Quote Deletion
  • Урок 128. 00:03:53
    Controlling Quotes with a Progress Bar
  • Урок 129. 00:02:14
    Finishing Touches and State Management
  • Урок 130. 00:00:55
    Module Introduction
  • Урок 131. 00:03:47
    A Basic <input> Form Binding
  • Урок 132. 00:02:43
    Grouping Data and Pre-Populating Inputs
  • Урок 133. 00:02:59
    Modifying User Input with Input Modifiers
  • Урок 134. 00:02:54
    Binding <textarea> and Saving Line Breaks
  • Урок 135. 00:04:06
    Using Checkboxes and Saving Data in Arrays
  • Урок 136. 00:02:31
    Using Radio Buttons
  • Урок 137. 00:05:10
    Handling Dropdowns with <select> and <option>
  • Урок 138. 00:02:50
    What v-model does and How to Create a Custom Control
  • Урок 139. 00:05:14
    Creating a Custom Control (Input)
  • Урок 140. 00:02:09
    Submitting a Form
  • Урок 141. 00:00:44
    Wrap Up
  • Урок 142. 00:00:54
    Module Introduction
  • Урок 143. 00:03:35
    Understanding Directives
  • Урок 144. 00:02:29
    How Directives Work - Hook Functions
  • Урок 145. 00:01:23
    Creating a Simple Directive
  • Урок 146. 00:01:09
    Passing Values to Custom Directives
  • Урок 147. 00:02:41
    Passing Arguments to Custom Directives
  • Урок 148. 00:02:25
    Modifying a Custom Directive with Modifiers
  • Урок 149. 00:00:29
    Custom Directives - A Summary
  • Урок 150. 00:01:38
    Registering Directives Locally
  • Урок 151. 00:04:28
    Using Multiple Modifiers
  • Урок 152. 00:02:14
    Passing more Complex Values to Directives
  • Урок 153. 00:00:45
    Wrap Up
  • Урок 154. 00:00:46
    Module Introduction
  • Урок 155. 00:04:33
    Creating a Local Filter
  • Урок 156. 00:01:46
    Global Filters and How to Chain Multiple Filters
  • Урок 157. 00:05:16
    An (often-times better) Alternative to Filters: Computed Properties
  • Урок 158. 00:02:24
    Understanding Mixins
  • Урок 159. 00:02:26
    Creating and Using Mixins
  • Урок 160. 00:02:59
    How Mixins get Merged
  • Урок 161. 00:03:27
    Creating a Global Mixin (Special Case!)
  • Урок 162. 00:02:34
    Mixins and Scope
  • Урок 163. 00:01:57
    Wrap Up
  • Урок 164. 00:01:09
    Module Introduction
  • Урок 165. 00:01:02
    Understanding Transitions
  • Урок 166. 00:03:12
    Preparing Code to use Transitions
  • Урок 167. 00:03:10
    Setting Up a Transition
  • Урок 168. 00:02:28
    Assigning CSS Classes for Transitions
  • Урок 169. 00:03:22
    Creating a "Fade" Transition with the CSS Transition Property
  • Урок 170. 00:04:00
    Creating a "Slide" Transition with the CSS Animation Property
  • Урок 171. 00:03:32
    Mixing Transition and Animation Properties
  • Урок 172. 00:00:34
    Animating v-if and v-show
  • Урок 173. 00:01:31
    Setting Up an Initial (on-load) Animation
  • Урок 174. 00:04:02
    Using Different CSS Class Names
  • Урок 175. 00:02:34
    Using Dynamic Names and Attributes
  • Урок 176. 00:00:35
    Transitioning between Multiple Elements (Theory)
  • Урок 177. 00:04:43
    Transitioning between Multiple Elements (Practice)
  • Урок 178. 00:02:07
    Listening to Transition Event Hooks
  • Урок 179. 00:08:04
    Understanding JavaScript Animations
  • Урок 180. 00:01:29
    Excluding CSS from your Animation
  • Урок 181. 00:06:19
    Creating an Animation in JavaScript
  • Урок 182. 00:05:58
    Animating Dynamic Components
  • Урок 183. 00:00:45
    Animating Lists with <transition-group>
  • Урок 184. 00:04:21
    Using <transition-group> - Preparations
  • Урок 185. 00:06:13
    Using <transition-group> to Animate a List
  • Урок 186. 00:01:16
    Understanding the App
  • Урок 187. 00:12:05
    Creating the App
  • Урок 188. 00:06:39
    Adding Animations
  • Урок 189. 00:01:04
    Wrap Up
  • Урок 190. 00:01:43
    Module Introduction
  • Урок 191. 00:04:01
    Accessing Http via vue-resource - Setup
  • Урок 192. 00:05:25
    Creating an Application and Setting Up a Server (Firebase)
  • Урок 193. 00:06:11
    POSTing Data to a Server (Sending a POST Request)
  • Урок 194. 00:06:55
    GETting and Transforming Data (Sending a GET Request)
  • Урок 195. 00:02:49
    Configuring vue-resource Globally
  • Урок 196. 00:03:35
    Intercepting Requests
  • Урок 197. 00:02:52
    Intercepting Responses
  • Урок 198. 00:04:43
    Where the "resource" in vue-resource Comes From
  • Урок 199. 00:02:40
    Creating Custom Resources
  • Урок 200. 00:00:29
    Resources vs "Normal" Http Requests
  • Урок 201. 00:05:07
    Understanding Template URLs
  • Урок 202. 00:01:43
    Wrap Up
  • Урок 203. 00:01:39
    Module Introduction
  • Урок 204. 00:02:17
    Setting up the VueJS Router (vue-router)
  • Урок 205. 00:06:44
    Setting Up and Loading Routes
  • Урок 206. 00:04:15
    Understanding Routing Modes (Hash vs History)
  • Урок 207. 00:03:46
    Navigating with Router Links
  • Урок 208. 00:03:21
    Where am I? - Styling Active Links
  • Урок 209. 00:02:43
    Navigating from Code (Imperative Navigation)
  • Урок 210. 00:02:00
    Setting Up Route Parameters
  • Урок 211. 00:02:04
    Fetching and Using Route Parameters
  • Урок 212. 00:03:05
    Reacting to Changes in Route Parameters
  • Урок 213. 00:04:40
    Setting Up Child Routes (Nested Routes)
  • Урок 214. 00:03:10
    Navigating to Nested Routes
  • Урок 215. 00:02:05
    Making Router Links more Dynamic
  • Урок 216. 00:03:22
    A Better Way of Creating Links - With Named Routes
  • Урок 217. 00:02:55
    Using Query Parameters
  • Урок 218. 00:03:28
    Multiple Router Views (Named Router Views)
  • Урок 219. 00:02:14
    Redirecting
  • Урок 220. 00:01:07
    Setting Up "Catch All" Routes / Wildcards
  • Урок 221. 00:02:35
    Animating Route Transitions
  • Урок 222. 00:03:29
    Passing the Hash Fragment
  • Урок 223. 00:03:22
    Controlling the Scroll Behavior
  • Урок 224. 00:01:14
    Protecting Routes with Guards
  • Урок 225. 00:07:52
    Using the "beforeEnter" Guard
  • Урок 226. 00:03:32
    Using the "beforeLeave" Guard
  • Урок 227. 00:07:09
    Loading Routes Lazily
  • Урок 228. 00:01:03
    Wrap Up
  • Урок 229. 00:01:13
    Module Introduction
  • Урок 230. 00:02:26
    Why a Different State Management May Be Needed
  • Урок 231. 00:01:33
    Understanding "Centralized State"
  • Урок 232. 00:06:50
    Using the Centralized State
  • Урок 233. 00:02:42
    Why a Centralized State Alone Won't Fix It
  • Урок 234. 00:00:49
    Understanding Getters
  • Урок 235. 00:02:41
    Using Getters
  • Урок 236. 00:06:58
    Mapping Getters to Properties
  • Урок 237. 00:01:15
    Understanding Mutations
  • Урок 238. 00:04:52
    Using Mutations
  • Урок 239. 00:01:35
    Why Mutations have to run Synchronously
  • Урок 240. 00:01:33
    How Actions improve Mutations
  • Урок 241. 00:05:00
    Using Actions
  • Урок 242. 00:04:59
    Mapping Actions to Methods
  • Урок 243. 00:04:15
    A Summary of Vuex
  • Урок 244. 00:05:57
    Two-Way-Binding (v-model) and Vuex
  • Урок 245. 00:01:02
    Improving Folder Structures
  • Урок 246. 00:04:57
    Modularizing the State Management
  • Урок 247. 00:04:19
    Using Separate Files
  • Урок 248. 00:06:45
    Using Namespaces to Avoid Naming Problems
  • Урок 249. 00:00:51
    Wrap Up
  • Урок 250. 00:03:12
    Project Introduction
  • Урок 251. 00:02:46
    Project Setup and Planning
  • Урок 252. 00:02:56
    Creating the First Components
  • Урок 253. 00:04:43
    Setup Project Routes
  • Урок 254. 00:06:45
    Adding a Header and Navigation
  • Урок 255. 00:01:23
    Planning the Next Steps
  • Урок 256. 00:06:32
    Creating Stocks Components
  • Урок 257. 00:05:58
    Adding a "Buy" Button
  • Урок 258. 00:10:22
    Setting up the Vuex State Management
  • Урок 259. 00:10:03
    Adding a Portfolio Module to Vuex
  • Урок 260. 00:06:52
    Working on the Portfolio Stocks
  • Урок 261. 00:02:22
    Connecting the Portfolio with Vuex
  • Урок 262. 00:02:01
    Time to fix some Errors
  • Урок 263. 00:03:42
    Displaying the Funds
  • Урок 264. 00:05:42
    Adding some Order Checks
  • Урок 265. 00:01:49
    Making Funds Look Nicer with Filters
  • Урок 266. 00:05:31
    Ending the Day - Randomizing Stocks
  • Урок 267. 00:03:15
    Animating the Route Transitions
  • Урок 268. 00:02:18
    Saving & Fetching Data - Adding a Dropdown
  • Урок 269. 00:02:17
    Setting up vue-resource and Firebase
  • Урок 270. 00:02:52
    Saving Data (PUT Request)
  • Урок 271. 00:05:05
    Fetching Data (GET Request)
  • Урок 272. 00:02:51
    Testing and Bug Fixes
  • Урок 273. 00:01:23
    Project Wrap Up
  • Урок 274. 00:02:00
    Bonus: Debugging Vuex with Vue Developer Tools
  • Урок 275. 00:01:13
    Module Introduction
  • Урок 276. 00:01:46
    Preparing for Deployment
  • Урок 277. 00:05:58
    Deploying the App (Example: AWS S3)
  • Урок 278. 00:00:59
    Course Roundup
  • Урок 279. 00:02:00
    Time to Practice (1) - Outputting Data to Templates (Problem)
  • Урок 280. 00:06:13
    Time to Practice (1) - Outputting Data to Templates (Solution)
  • Урок 281. 00:01:43
    Time to Practice (2) - Events (Problem)
  • Урок 282. 00:04:55
    Time to Practice (2) - Events (Solution)
  • Урок 283. 00:02:30
    Time to Practice (3) - Reactive Properties (Problem)
  • Урок 284. 00:05:48
    Time to Practice (3) - Reactive Properties (Solution)
  • Урок 285. 00:03:50
    Time to Practice (4) - Styling (Problem)
  • Урок 286. 00:18:18
    Time to Practice (4) - Styling (Solution)
  • Урок 287. 00:01:41
    Time to Practice (5) - Conditionals and Lists (Problem)
  • Урок 288. 00:09:39
    Time to Practice (5) - Conditionals and Lists (Solution)
  • Урок 289. 00:01:46
    Time to Practice (6) - Components (Problem)
  • Урок 290. 00:02:13
    Time to Practice (6) - Components (Solution)
  • Урок 291. 00:03:07
    Time to Practice (7) - Component Communication (Problem)
  • Урок 292. 00:10:18
    Time to Practice (7) - Component Communication (Solution)
  • Урок 293. 00:01:28
    Time to Practice (8) - Slots and Dynamic Components (Problem)
  • Урок 294. 00:03:01
    Time to Practice (8) - Slots and Dynamic Components (Solution)
  • Урок 295. 00:01:31
    Time to Practice (9) - Forms (Problem)
  • Урок 296. 00:15:18
    Time to Practice (9) - Forms (Solution)
  • Урок 297. 00:00:55
    Time to Practice (10) - Directives (Problem)
  • Урок 298. 00:05:56
    Time to Practice (10) - Directives (Solution)
  • Урок 299. 00:01:09
    Time to Practice (11) - Filters and Mixins (Problem)
  • Урок 300. 00:08:13
    Time to Practice (11) - Filters and Mixins (Solution)
  • Урок 301. 00:00:38
    About this Section
  • Урок 302. 00:01:08
    Module Introduction
  • Урок 303. 00:02:47
    Project Setup
  • Урок 304. 00:02:13
    Axios Setup
  • Урок 305. 00:05:40
    Sending a POST Request
  • Урок 306. 00:02:53
    Sending a GET Request
  • Урок 307. 00:05:49
    Accessing & Using Response Data
  • Урок 308. 00:05:44
    Setting a Global Request Configuration
  • Урок 309. 00:05:50
    Using Interceptors
  • Урок 310. 00:04:58
    Custom Axios Instances
  • Урок 311. 00:00:59
    Wrap Up
  • Урок 312. 00:00:53
    About this Section
  • Урок 313. 00:02:00
    Module Introduction
  • Урок 314. 00:03:11
    How Authentication Works in SPAs
  • Урок 315. 00:02:37
    Project Setup
  • Урок 316. 00:05:15
    Adding User Signup
  • Урок 317. 00:02:42
    Adding User Signin (Login)
  • Урок 318. 00:04:27
    Using Vuex to send Auth Requests
  • Урок 319. 00:03:46
    Storing Auth Data in Vuex
  • Урок 320. 00:08:42
    Accessing other Resources from Vuex
  • Урок 321. 00:05:39
    Sending the Token to the Backend
  • Урок 322. 00:02:49
    Protecting Routes (Auth Guard)
  • Урок 323. 00:03:02
    Updating the UI State (based on Authentication State)
  • Урок 324. 00:05:02
    Adding User Logout
  • Урок 325. 00:05:37
    Adding Auto Logout
  • Урок 326. 00:10:37
    Adding Auto Login
  • Урок 327. 00:01:02
    Wrap Up
  • Урок 328. 00:00:58
    About this Section
  • Урок 329. 00:01:06
    Module Introduction
  • Урок 330. 00:02:05
    Installing Vuelidate
  • Урок 331. 00:10:15
    Adding a Validator
  • Урок 332. 00:04:56
    Adding Validation UI Feedback
  • Урок 333. 00:02:11
    Controlling Styles for Invalid Entries
  • Урок 334. 00:06:34
    More Validators
  • Урок 335. 00:06:17
    Validating Passwords For Equality
  • Урок 336. 00:04:53
    Using the Required-Unless Validator
  • Урок 337. 00:07:20
    Validating Arrays
  • Урок 338. 00:02:13
    Controlling the Form Submit Button
  • Урок 339. 00:02:47
    Creating Custom Validators
  • Урок 340. 00:09:17
    Async Validators
  • Урок 341. 00:01:06
    Wrap Up
  • Урок 342. 00:03:19
    Module Introduction
  • Урок 343. 00:04:42
    Creating a Project
  • Урок 344. 00:04:50
    Analyzing the Created Project
  • Урок 345. 00:04:06
    Using Plugins
  • Урок 346. 00:03:15
    CSS Pre-Processors
  • Урок 347. 00:07:29
    Environment Variables
  • Урок 348. 00:03:44
    Building the Project
  • Урок 349. 00:02:40
    Instant Prototyping
  • Урок 350. 00:08:40
    Different Build Targets
  • Урок 351. 00:01:20
    Using the "Old" CLI Templates (vue init)
  • Урок 352. 00:05:06
    Using the Graphical User Interface (GUI)