Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

  1. Урок 1. 00:01:40
    Welcome to the Course!
  2. Урок 2. 00:07:52
    What is "Vue.js"?
  3. Урок 3. 00:02:36
    Different Ways of Using Vue
  4. Урок 4. 00:03:12
    Exploring Vue Alternatives
  5. Урок 5. 00:07:27
    Building A First App With Just JavaScript
  6. Урок 6. 00:11:40
    Re-building the App with Vue
  7. Урок 7. 00:01:11
    Vue vs "Vanilla JavaScript" (just JavaScript)
  8. Урок 8. 00:02:05
    Setting Up the Course Development Environment
  9. Урок 9. 00:02:59
    Course Outline & What's In The Course
  10. Урок 10. 00:03:24
    How To Get The Most Out Of This Course
  11. Урок 11. 00:00:49
    Module Introduction
  12. Урок 12. 00:08:41
    Creating and Connecting Vue App Instances
  13. Урок 13. 00:03:36
    Interpolation and Data Binding
  14. Урок 14. 00:05:38
    Binding Attributes with the "v-bind" Directive
  15. Урок 15. 00:05:48
    Understanding "methods" in Vue Apps
  16. Урок 16. 00:03:24
    Working with Data inside of a Vue App
  17. Урок 17. 00:03:32
    Outputting Raw HTML Content with v-html
  18. Урок 18. 00:04:13
    A First Summary
  19. Урок 19. 00:07:18
    Understanding Event Binding
  20. Урок 20. 00:06:13
    Events & Methods
  21. Урок 21. 00:03:00
    Working with Event Arguments
  22. Урок 22. 00:09:00
    Using the Native Event Object
  23. Урок 23. 00:09:55
    Exploring Event Modifiers
  24. Урок 24. 00:02:09
    Locking Content with v-once
  25. Урок 25. 00:06:33
    Data Binding + Event Binding = Two-Way Binding
  26. Урок 26. 00:06:47
    Methods used for Data Binding: How It Works
  27. Урок 27. 00:05:59
    Introducing Computed Properties
  28. Урок 28. 00:10:50
    Working with Watchers
  29. Урок 29. 00:02:28
    Methods vs Computed Properties vs Watchers
  30. Урок 30. 00:01:54
    v-bind and v-on Shorthands
  31. Урок 31. 00:07:20
    Dynamic Styling with Inline Styles
  32. Урок 32. 00:06:32
    Adding CSS Classes Dynamically
  33. Урок 33. 00:01:58
    Classes & Computed Properties
  34. Урок 34. 00:01:23
    Dynamic Classes: Array Syntax
  35. Урок 35. 00:04:28
    Module Summary
  36. Урок 36. 00:01:36
    Module Introduction
  37. Урок 37. 00:03:17
    Understanding the Problem
  38. Урок 38. 00:05:10
    Rendering Content Conditionally
  39. Урок 39. 00:04:19
    v-if, v-else and v-else-if
  40. Урок 40. 00:02:26
    Using v-show Instead Of v-if
  41. Урок 41. 00:06:21
    Rendering Lists of Data
  42. Урок 42. 00:05:13
    Diving Deeper Into v-for
  43. Урок 43. 00:04:00
    Removing List Items
  44. Урок 44. 00:08:27
    Lists & Keys
  45. Урок 45. 00:02:16
    Module Summary
  46. Урок 46. 00:01:19
    Module Introduction
  47. Урок 47. 00:12:28
    Project Setup & First Methods
  48. Урок 48. 00:07:08
    Updating the Health Bars
  49. Урок 49. 00:06:24
    Adding a "Special Attack"
  50. Урок 50. 00:04:48
    Adding a "Heal" Functionality
  51. Урок 51. 00:09:39
    Adding a "Game Over" Screen
  52. Урок 52. 00:06:09
    Finishing the Core Functionality
  53. Урок 53. 00:14:12
    Adding a Battle Log
  54. Урок 54. 00:01:32
    Module Introduction
  55. Урок 55. 00:04:27
    An Introduction to Vue's Reactivity
  56. Урок 56. 00:08:11
    Vue Reactivity: A Deep Dive
  57. Урок 57. 00:03:54
    One App vs Multiple Apps
  58. Урок 58. 00:03:57
    Understanding Templates
  59. Урок 59. 00:05:23
    Working with Refs
  60. Урок 60. 00:06:27
    How Vue Updates the DOM
  61. Урок 61. 00:04:47
    Vue App Lifecycle - Theory
  62. Урок 62. 00:09:49
    Vue App Lifecycle - Practice
  63. Урок 63. 00:01:31
    Module Introduction
  64. Урок 64. 00:08:40
    Understanding the Problem
  65. Урок 65. 00:10:55
    Introducing Components
  66. Урок 66. 00:01:01
    The Why: Building Complex User Interfaces With Components
  67. Урок 67. 00:01:36
    Module Introduction
  68. Урок 68. 00:03:30
    Why We Need A Development Server
  69. Урок 69. 00:05:51
    Why We Want A Better Developer Experience
  70. Урок 70. 00:08:28
    Installing & Using the Vue CLI
  71. Урок 71. 00:06:00
    Inspecting the Created Project
  72. Урок 72. 00:06:05
    Inspecting the Vue Code & ".vue" Files
  73. Урок 73. 00:01:16
    Adding the "Vetur" Extension to VS Code
  74. Урок 74. 00:01:41
    More on ".vue" Files
  75. Урок 75. 00:05:06
    A New Vue Project
  76. Урок 76. 00:09:33
    Creating a Basic Vue App
  77. Урок 77. 00:08:15
    Adding a Component
  78. Урок 78. 00:02:17
    Adding Styling
  79. Урок 79. 00:01:42
    Module Introduction
  80. Урок 80. 00:10:04
    Introducing "Props" (Parent => Child Communication)
  81. Урок 81. 00:06:31
    Prop Behavior & Changing Props
  82. Урок 82. 00:07:15
    Validating Props
  83. Урок 83. 00:05:38
    Working with Dynamic Prop Values
  84. Урок 84. 00:11:16
    Emitting Custom Events (Child => Parent Communication)
  85. Урок 85. 00:04:06
    Defining & Validating Custom Events
  86. Урок 86. 00:13:16
    Demo: Adding Components & Connecting Them
  87. Урок 87. 00:06:25
    Demo: Adding More Component Communication
  88. Урок 88. 00:06:27
    A Potential Problem
  89. Урок 89. 00:08:17
    Provide + Inject To The Rescue
  90. Урок 90. 00:04:00
    Provide + Inject for Functions / Methods
  91. Урок 91. 00:02:07
    Provide + Inject vs Props & Custom Events
  92. Урок 92. 00:04:45
    Module Summary
  93. Урок 93. 00:01:39
    Module Introduction
  94. Урок 94. 00:02:39
    Project Setup
  95. Урок 95. 00:09:23
    Global vs Local Components
  96. Урок 96. 00:05:16
    Scoped Styles
  97. Урок 97. 00:06:25
    Introducing Slots
  98. Урок 98. 00:05:36
    Named Slots
  99. Урок 99. 00:02:27
    Slot Styles & Compilation
  100. Урок 100. 00:07:20
    More on Slots
  101. Урок 101. 00:09:35
    Scoped Slots
  102. Урок 102. 00:07:08
    Dynamic Components
  103. Урок 103. 00:02:45
    Keeping Dynamic Components Alive
  104. Урок 104. 00:09:25
    Applying What We Know & A Problem
  105. Урок 105. 00:03:51
    Teleporting Elements
  106. Урок 106. 00:01:24
    Working with Fragments
  107. Урок 107. 00:03:03
    The Vue Style Guide
  108. Урок 108. 00:02:57
    Moving to a Different Folder Structure
  109. Урок 109. 00:03:39
    Module Summary
  110. Урок 110. 00:01:38
    Module Introduction
  111. Урок 111. 00:05:25
    Setup & First Steps
  112. Урок 112. 00:10:47
    First Components & Props
  113. Урок 113. 00:07:20
    Styling and More Components
  114. Урок 114. 00:07:01
    Header & BaseCard Components
  115. Урок 115. 00:05:20
    Adding a Base Button
  116. Урок 116. 00:08:39
    Dynamic Components & Attribute Fallthrough
  117. Урок 117. 00:04:59
    Adding & Styling Tabs
  118. Урок 118. 00:04:13
    Adding a Form
  119. Урок 119. 00:08:28
    Fetching User Input
  120. Урок 120. 00:12:20
    Adding a Modal Dialog
  121. Урок 121. 00:06:43
    Deleting Items
  122. Урок 122. 00:01:30
    Adding "Teleport"
  123. Урок 123. 00:00:34
    Module Introduction
  124. Урок 124. 00:06:04
    v-model & Inputs
  125. Урок 125. 00:06:55
    Working with v-model Modifiers and Numbers
  126. Урок 126. 00:02:27
    v-model and Dropdowns
  127. Урок 127. 00:07:14
    Using v-model with Checkboxes & Radiobuttons
  128. Урок 128. 00:05:14
    Adding Basic Form Validation
  129. Урок 129. 00:06:28
    Building a Custom Control Component
  130. Урок 130. 00:06:49
    Using v-model on Custom Components
  131. Урок 131. 00:01:15
    Module Summary
  132. Урок 132. 00:01:10
    Module Introduction
  133. Урок 133. 00:05:05
    Starting App & Why we need a Backend
  134. Урок 134. 00:03:22
    Adding a Backend
  135. Урок 135. 00:05:25
    How To (Not) Send Http Requests
  136. Урок 136. 00:05:46
    Sending a POST Request to Store Data
  137. Урок 137. 00:09:52
    Getting Data (GET Request) & Transforming Response Data
  138. Урок 138. 00:02:01
    Loading Data When a Component Mounts
  139. Урок 139. 00:02:56
    Showing a "Loading..." Message
  140. Урок 140. 00:03:01
    Handling the "No Data" State
  141. Урок 141. 00:06:43
    Handling Technical / Browser-side Errors
  142. Урок 142. 00:06:50
    Handling Error Responses
  143. Урок 143. 00:01:33
    Module Summary
  144. Урок 144. 00:00:42
    Module Introduction
  145. Урок 145. 00:04:40
    What & Why?
  146. Урок 146. 00:04:37
    Routing Setup
  147. Урок 147. 00:06:26
    Registering & Rendering Routes
  148. Урок 148. 00:04:56
    Navigating with router-link
  149. Урок 149. 00:03:06
    Styling Active Links
  150. Урок 150. 00:04:02
    Programmatic Navigation
  151. Урок 151. 00:10:47
    Passing Data with Route Params (Dynamic Segments)
  152. Урок 152. 00:03:01
    Navigation & Dynamic Paths
  153. Урок 153. 00:05:32
    Updating Params Data with Watchers
  154. Урок 154. 00:03:38
    Passing Params as Props
  155. Урок 155. 00:07:51
    Redirecting & "Catch All" Routes
  156. Урок 156. 00:05:35
    Using Nested Routes
  157. Урок 157. 00:05:22
    More Fun with Named Routes & Location Objects
  158. Урок 158. 00:04:00
    Using Query Params
  159. Урок 159. 00:05:52
    Rendering Multiple Routes with Named Router Views
  160. Урок 160. 00:06:18
    Controlling Scroll Behavior
  161. Урок 161. 00:07:32
    Introducing Navigation Guards
  162. Урок 162. 00:06:51
    Diving Deeper Into Navigation Guards
  163. Урок 163. 00:01:28
    The Global "afterEach" Guard
  164. Урок 164. 00:07:14
    Beyond Entering: Route Leave Guards
  165. Урок 165. 00:02:15
    Utilizing Route Metadata
  166. Урок 166. 00:04:50
    Organizing Route Files
  167. Урок 167. 00:02:13
    Summary
  168. Урок 168. 00:01:12
    Module Introduction
  169. Урок 169. 00:07:29
    Animation Basics & CSS Transitions
  170. Урок 170. 00:04:21
    Understanding CSS Animations
  171. Урок 171. 00:04:28
    Why Is "Just CSS" Not Enough?
  172. Урок 172. 00:04:47
    Playing CSS Animations with Vue's Help
  173. Урок 173. 00:05:03
    Using the Transition Component
  174. Урок 174. 00:02:29
    CSS Animations with the Transition Component
  175. Урок 175. 00:03:35
    Using Custom CSS Class Names
  176. Урок 176. 00:08:39
    Example: Animating a Modal
  177. Урок 177. 00:09:16
    Transitioning Between Multiple Elements
  178. Урок 178. 00:08:32
    Using Transition Events
  179. Урок 179. 00:14:58
    Building JavaScript Transitions (instead of CSS)
  180. Урок 180. 00:03:06
    Disabling CSS Transitions
  181. Урок 181. 00:06:45
    Getting Started with Animated Lists
  182. Урок 182. 00:05:27
    Animating Lists with "transition-group"
  183. Урок 183. 00:03:54
    Animate List Item Movement
  184. Урок 184. 00:12:16
    Animating Route Changes
  185. Урок 185. 00:01:00
    Module Introduction
  186. Урок 186. 00:07:12
    What & Why?
  187. Урок 187. 00:04:44
    Creating & Using a Store
  188. Урок 188. 00:02:37
    Connecting Components to State
  189. Урок 189. 00:06:31
    Introducing Mutations - A Better Way of Changing Data
  190. Урок 190. 00:04:08
    Passing Data to Mutations with Payloads
  191. Урок 191. 00:07:42
    Introducing Getters - A Better Way Of Getting Data
  192. Урок 192. 00:07:34
    Running Async Code with Actions
  193. Урок 193. 00:02:03
    Understanding the Action "Context"
  194. Урок 194. 00:05:58
    Using Mapper Helpers
  195. Урок 195. 00:08:10
    Example: Adding More State
  196. Урок 196. 00:04:11
    Organizing your Store with Modules
  197. Урок 197. 00:04:28
    Understanding Local Module State
  198. Урок 198. 00:05:04
    Namespacing Modules
  199. Урок 199. 00:08:45
    Structuring Vuex Code & Files
  200. Урок 200. 00:01:52
    A Challenge!
  201. Урок 201. 00:12:01
    Challenge Solution (1/3)
  202. Урок 202. 00:11:28
    Challenge Solution (2/3)
  203. Урок 203. 00:03:19
    Challenge Solution (3/3)
  204. Урок 204. 00:01:20
    Summary
  205. Урок 205. 00:02:36
    Module Introduction
  206. Урок 206. 00:04:27
    Planning the Project / Web App
  207. Урок 207. 00:05:12
    Planning the Data Requirements
  208. Урок 208. 00:05:07
    Planning the Layout / Components
  209. Урок 209. 00:05:59
    Registering Routes
  210. Урок 210. 00:05:28
    Adding Route Page Components
  211. Урок 211. 00:07:43
    Working on the Main Layout & Styling
  212. Урок 212. 00:05:23
    Wiring Up Pages
  213. Урок 213. 00:12:16
    Adding Vuex and Coach Data
  214. Урок 214. 00:11:22
    Working on the Coaches List and List Items
  215. Урок 215. 00:12:55
    Adding a Couple of Base Components (Base Card, Base Button, Base Badge)
  216. Урок 216. 00:08:25
    Building the Coach Detail Component
  217. Урок 217. 00:11:11
    Filtering Coaches
  218. Урок 218. 00:10:14
    Registering as a Coach: The Form
  219. Урок 219. 00:13:38
    Adding Coaches to Vuex
  220. Урок 220. 00:12:36
    Adding Form Validation
  221. Урок 221. 00:08:10
    Working on the Contact Form
  222. Урок 222. 00:08:32
    Storing Requests (Messages) With Vuex
  223. Урок 223. 00:10:02
    Outputting Incoming Requests (Messages)
  224. Урок 224. 00:04:46
    Filtering Requests for the Active Coach
  225. Урок 225. 00:11:06
    Sending a PUT Http Request to Store Coach Data
  226. Урок 226. 00:07:52
    Fetching Coach Data (GET Http Request)
  227. Урок 227. 00:06:39
    Rendering a Loading Spinner
  228. Урок 228. 00:09:19
    Adding Http Error Handling
  229. Урок 229. 00:15:49
    Sending Coaching Requests Http Requests
  230. Урок 230. 00:08:30
    Caching Http Response Data
  231. Урок 231. 00:10:21
    Adding Route Transitions
  232. Урок 232. 00:02:20
    The "Not Found" Page & Summary
  233. Урок 233. 00:01:01
    Module Introduction
  234. Урок 234. 00:06:10
    How Authentication Works in Vue Apps (or any SPA)
  235. Урок 235. 00:05:57
    Locking / Protecting Backend Resources
  236. Урок 236. 00:09:55
    Adding an Authentication Page (Login & Signup)
  237. Урок 237. 00:04:23
    Preparing Vuex
  238. Урок 238. 00:09:06
    Adding a "Signup" Action & Flow
  239. Урок 239. 00:05:32
    Better UX: Loading Spinner & Error Handling
  240. Урок 240. 00:03:16
    Adding a "Login" Action & Flow
  241. Урок 241. 00:04:21
    Attaching the Token to Outgoing Requests
  242. Урок 242. 00:04:05
    Updating the UI Based on Auth State
  243. Урок 243. 00:03:35
    Adding a "Logout" Action & Flow
  244. Урок 244. 00:11:42
    Authentication & Routing (incl. Navigation Guards)
  245. Урок 245. 00:08:53
    Adding "Auto Login"
  246. Урок 246. 00:13:35
    Adding "Auto Logout"
  247. Урок 247. 00:01:20
    Summary
  248. Урок 248. 00:01:11
    Module Introduction
  249. Урок 249. 00:02:51
    What To Deploy?
  250. Урок 250. 00:12:17
    Optimization: Using Asynchronous Components
  251. Урок 251. 00:03:55
    Building the Project For Production
  252. Урок 252. 00:08:56
    Deploying a Vue App
  253. Урок 253. 00:02:01
    Module Introduction
  254. Урок 254. 00:06:52
    Which Problem Does The Composition API Solve?
  255. Урок 255. 00:11:31
    Replacing "data" with "refs"
  256. Урок 256. 00:10:58
    Building "reactive" Objects
  257. Урок 257. 00:08:24
    Reactivity: A Deep Dive
  258. Урок 258. 00:07:03
    Replacing "methods" with Regular Functions
  259. Урок 259. 00:07:53
    Replacing "Computed Properties" with the "computed" Function
  260. Урок 260. 00:02:59
    Two-Way-Binding and the Composition API
  261. Урок 261. 00:05:43
    Working with Watchers
  262. Урок 262. 00:01:38
    A First Summary
  263. Урок 263. 00:04:50
    How To Use Template Refs
  264. Урок 264. 00:07:58
    Components, Props & The Composition API
  265. Урок 265. 00:02:34
    Emitting Custom Events
  266. Урок 266. 00:03:43
    Working with Provide/ Inject
  267. Урок 267. 00:05:15
    Lifecycle Hooks in the Composition API
  268. Урок 268. 00:01:57
    Migrating from Options API to Composition API - An Example Project
  269. Урок 269. 00:06:41
    Migrating a First Component
  270. Урок 270. 00:12:39
    Migrating a Big Component
  271. Урок 271. 00:11:57
    Migrating the Remaining Components
  272. Урок 272. 00:07:28
    Routing, Params & The Composition API
  273. Урок 273. 00:05:09
    The Route & Router Objects and the Composition API
  274. Урок 274. 00:04:34
    Using Vuex with the Composition API
  275. Урок 275. 00:03:11
    Summary
  276. Урок 276. 00:01:17
    Module Introduction
  277. Урок 277. 00:04:55
    Reusability Concepts
  278. Урок 278. 00:04:49
    Using Mixins
  279. Урок 279. 00:03:12
    Understanding Mixin Merging
  280. Урок 280. 00:02:53
    Global Mixins
  281. Урок 281. 00:03:29
    Disadvantages of Mixins
  282. Урок 282. 00:08:41
    Custom Hooks / Composables & The Composition API
  283. Урок 283. 00:03:49
    More Custom Composition Functions
  284. Урок 284. 00:01:28
    Why Hooks / Composables Beat Mixins
  285. Урок 285. 00:11:30
    Example: Creating a "Search" Hook
  286. Урок 286. 00:08:44
    Custom Hooks Gotchas
  287. Урок 287. 00:02:55
    More Thoughts on Custom Hooks / Composables
  288. Урок 288. 00:05:30
    Example: A Custom "Sort" Hook
  289. Урок 289. 00:00:56
    Thanks for being part of the course!
  290. Урок 290. 00:03:09
    Course Roundup & Next Steps
  291. Урок 291. 00:06:31
    Vue 3 - Overview
  292. Урок 292. 00:17:52
    Important Changes & Migration Steps
  293. Урок 293. 00:05:28
    Vue 3: New Features
  294. Урок 294. 00:23:46
    The New Composition API (Optional!)