Companies Home Search Profile

Vue JS Essentials with Vuex and Vue Router

Focused View

Stephen Grider

10:22:03

13 View
  • 1 - How to Get Help.mp4
    01:07
  • 1 - Rendering with String Templates.html
  • 2 - Course Resources.html
  • 2 - JS Expressions in Templates.html
  • 2 - diagrams.zip
  • 3 - Join Our Community.html
  • 4 - Our First Vue App.mp4
    08:05
  • 5 - App Overview.mp4
    03:07
  • 6 - A Codepen Starter.mp4
    02:24
  • 7 - Vue Templates and Instances.mp4
    04:35
  • 8 - Creating the Template.mp4
    02:12
  • 9 - Linking Templates and Instances.mp4
    03:50
  • 10 - Step by Step Implementation.mp4
    03:25
  • 11 - Defining Instance Methods.mp4
    04:42
  • 12 - Defining Vue Directives.mp4
    05:12
  • 13 - Retrieving Event Information.mp4
    02:40
  • 14 - Imperative vs Declarative Programming.mp4
    10:24
  • 15 - Declarative Apps with the Vue API.mp4
    05:59
  • 16 - Data Computed and Methods.mp4
    02:43
  • 17 - Updated Data Values.mp4
    04:32
  • 18 - Computed Properties.mp4
    05:34
  • 19 - Review from Start to Finish.mp4
    04:53
  • 20 - Template Placement.mp4
    03:50
  • 21 - Referencing Data in the Template.mp4
    03:44
  • 22 - Expressions in Templates.mp4
    05:50
  • 23 - Exercise Solution.mp4
    01:46
  • 24 - Exercise Solution.mp4
    02:25
  • 25 - App Overview.mp4
    02:08
  • 26 - App Challenges.mp4
    03:29
  • 27 - Generating a New Project.mp4
    02:32
  • 28 - Why Use Vue CLI.mp4
    04:01
  • 29 - Project Walkthrough.mp4
    04:27
  • 30 - Vue Files.mp4
    04:42
  • 31 - Behind the Scenes of Vue Files.mp4
    04:48
  • 32 - Vue Components vs Vue Instances.mp4
    05:23
  • 3 - Events and Methods.html
  • 4 - Component Data.html
  • 5 - Events Data and Directives.html
  • 33 - Starting from Scratch.mp4
    05:37
  • 34 - The App Component.mp4
    03:43
  • 35 - Another Way of Specifying Content.mp4
    04:01
  • 36 - Multiple Ways of DOM Attachment.mp4
    05:05
  • 37 - Making the SearchBar.mp4
    02:19
  • 38 - Nesting Components.mp4
    04:07
  • 39 - Event Directives.mp4
    02:10
  • 40 - Shorthand Event Syntax.mp4
    02:09
  • 41 - Data Sharing Between Components.mp4
    03:46
  • 42 - Communication with Props and Events.mp4
    02:17
  • 43 - Emitting Events.mp4
    03:10
  • 44 - Listening for Custom Events.mp4
    04:48
  • 45 - Youtube API Signup.mp4
    05:28
  • 46 - Searching Youtube.mp4
    05:11
  • 47 - Investigating Video Responses.mp4
    02:38
  • 48 - Rendering a List of Videos.mp4
    04:05
  • 49 - Updating Data Causes Rerenders.mp4
    03:21
  • 50 - Data in Components vs Instances.mp4
    04:11
  • 51 - Updating Data.mp4
    05:07
  • 52 - Communicating from Parent to Child.mp4
    06:54
  • 53 - Prop Validation.mp4
    05:41
  • 54 - Separate List Components.mp4
    04:20
  • 55 - Lists with V.mp4
    03:49
  • 56 - Handling Props with V.mp4
    06:20
  • 57 - Keys with V.mp4
    03:04
  • 58 - Including Bootstrap Styling.mp4
    02:11
  • 59 - Styling the Search Bar.mp4
    03:56
  • 60 - Styling the Video List.mp4
    02:38
  • 61 - Thumbnail Image Reference.mp4
    05:31
  • 62 - Thumbnail By Computed Property.mp4
    04:34
  • 63 - More List Item Styling.mp4
    05:29
  • 64 - Handling Nested Clicks.mp4
    04:23
  • 65 - Event Handling in the VideoList.mp4
    04:49
  • 66 - Receiving Events in the App.mp4
    03:04
  • 67 - Passing Props to the Video Detail.mp4
    04:56
  • 68 - Updating Data.mp4
    05:06
  • 69 - The V.mp4
    04:01
  • 70 - Referencing Video Title and Description.mp4
    04:18
  • 71 - Crafting the Embed URL.mp4
    07:40
  • 72 - Responsive Embeds.mp4
    02:27
  • 73 - Two Column Layout.mp4
    03:18
  • 74 - App Review.mp4
    02:46
  • 75 - Exercise Solution.mp4
    01:50
  • 76 - Exercise Solution.mp4
    03:08
  • 77 - App Overview.mp4
    02:44
  • 78 - App Challenges.mp4
    05:08
  • 79 - Additional Dependencies.mp4
    01:14
  • 80 - A Bit of Boilerplate.mp4
    04:23
  • 81 - Building the Header.mp4
    04:08
  • 82 - Including Semantic UI.mp4
    05:31
  • 83 - Styling the Header.mp4
    05:44
  • 84 - Imgur Overview.mp4
    03:55
  • 85 - OAuth Overview.mp4
    05:24
  • 86 - Imgur API Signup.mp4
    06:51
  • 87 - Handling App Logic.mp4
    05:52
  • 88 - Vuex Introduction.mp4
    03:28
  • 89 - Vuex Modules.mp4
    11:51
  • 90 - Connecting Vuex to Vue.mp4
    06:41
  • 91 - Initial Auth Module Design.mp4
    06:39
  • 92 - Auth Module Mutations.mp4
    07:10
  • 93 - Auth Module State and Getters.mp4
    06:53
  • 94 - Updating State Values.mp4
    03:10
  • 95 - Logging Out with Actions.mp4
    04:32
  • 96 - Separate API Helpers.mp4
    08:06
  • 97 - Forming the OAuth2 URL.mp4
    08:13
  • 98 - Initiating the Login Flow.mp4
    03:32
  • 99 - Wiring in the Auth Module.mp4
    03:39
  • 100 - Initial OAuth Request.mp4
    13:16
  • 101 - Extracting the Access Token.mp4
    04:35
  • 102 - Wiring up Vue Router.mp4
    07:08
  • 103 - Browser vs Hash Routers.mp4
    04:59
  • 104 - Component Insertion Point.mp4
    02:30
  • 105 - Component Lifecycle Methods.mp4
    06:52
  • 106 - Calling Actions.mp4
    03:21
  • 107 - Parsing the Access Token.mp4
    06:19
  • 108 - Data in Components with MapGetters.mp4
    06:45
  • 109 - The V.mp4
    05:40
  • 110 - Persisting Login State.mp4
    06:27
  • 111 - Button Styling.mp4
    03:15
  • 112 - Logging Out Users.mp4
    02:40
  • 113 - Automatic Component Updates.mp4
    01:52
  • 114 - Clearing LocalStorage Tokens.mp4
    02:24
  • 115 - Programmatic Navigation.mp4
    07:21
  • 116 - Additional Route Config.mp4
    04:40
  • 117 - Navigation with Router.mp4
    06:16
  • 118 - Image Module Deisgn.mp4
    08:23
  • 119 - Module Implementation.mp4
    03:51
  • 120 - Fetch Images API Documentation.mp4
    02:33
  • 121 - Fetching Images.mp4
    05:32
  • 122 - Communicating Across Modules.mp4
    06:32
  • 123 - Testing Images Reponse.mp4
    07:22
  • 124 - Image Upload via Imgur.mp4
    03:37
  • 125 - Committing Images to State.mp4
    03:10
  • 126 - Mapping the Images Getter.mp4
    02:50
  • 127 - Listing Images.mp4
    02:40
  • 128 - Image Upload Overview.mp4
    03:06
  • 129 - Upload Form HTML.mp4
    04:52
  • 130 - Styling the Upload Form.mp4
    06:29
  • 131 - The Upload Images Action.mp4
    02:29
  • 132 - File Change Event.mp4
    02:55
  • 133 - Accepting Multiple Image Files.mp4
    06:13
  • 134 - The Path to Upload.mp4
    03:44
  • 135 - Attaching Images with FormData.mp4
    07:20
  • 136 - Concurrent Uploads.mp4
    05:44
  • 137 - Layout with CSS Grid.mp4
    03:05
  • 138 - Hide Images on Logout.mp4
    02:27
  • 139 - Expanding the App.mp4
    02:06
  • 140 - Bonus.html
  • Description


    Have limited time to learn Vue, Vuex, and Vue Router? Take this course and learn Vue in 11 hours!

    What You'll Learn?


    • Understand how to create interesting Vue applications
    • Use Vuex to manage and update data stored in application state
    • Navigate users between pages using Vue Router
    • Authenticate users with an advanced OAuth2 flow
    • Build beautiful drag and drop image upload
    • Style content intelligently using CSS Grids

    Who is this for?


  • Engineers looking to harness the power of Vue
  • Beginners learning about web development
  • What You Need to Know?


  • Basic knowledge of Javascript
  • More details


    Description

    State management with Vuex? Yep.  Drag and drop image upload? Covered!  Authentication with OAuth2?   Its here!

    If you're looking to learn Vue, Vuex, and Vue Router in record time you're in the right place!  I built this course to help you understand Vue in a fraction of the time that other courses requires.  You'll find absolutely no filler content here, only direct, accurate, and concise explanations of exactly how Vue works.

    Vue is an extremely popular front end Javascript framework made for developing dynamic and interactive web apps.  Vue has grown tremendously in popularity in the last few years, and is poised to overtake even React and Angular as the king of all web frameworks.  The secret of Vue is its simplicity - a little bit of knowledge of how Vue works goes a long way!  To help you master Vue, I built this course specifically tailored to be completed in the smallest amount of time possible.  No time is spent with unnecessary or unimportant topics, only the most relevant information is presented.

    In just 11 hours, you can become a master of Vue!  

    Vue can be used by itself, but it gets even better when used with Vuex and Vue Router as well.  Vuex is a state management framework, which is used to fetch, store, and move data around your application.  In this course, you'll get a deep understanding of how Vuex works and how it works so well with Vue by getting plenty of practice fetching data, storing it, and then retrieving it for use inside of a Vue application.  Vue Router is used to navigate users around to different pages in a single page application.  Vue Router is incredibly simple to get started with - you'll master its inner workings after I show you one simple example.

    Throughout this course, you'll get practical experience with the following:

    • Producing dynamic, responsive applications using Vue
    • Upload images to a remote server using drag and drop image upload
    • Log users into your app using OAuth2 Authentication
    • Use a cutting edge project boilerplate with Vue CLI
    • Reduce the amount of code you write using Template Directives
    • Communicate between components using Props and Events
    • Update Vue components using reactive data properties
    • Progamatically navigate users around your application using Vue Router
    • Model application data using the powerful Vuex framework
    • Persist information stored in your app using Local Storage
    • Develop a master-level understanding of the differences between imperative and declarative programming
    • Learn how Vue gives developers multiple tools to accomplish task, and know which the best is for you

    All of these topics are communicated with the utmost respect for your learning time.  Every section has been written and re-written to be as concise as possible.  If you want to learn Vue as fast as possible then look no further!  Sign up today and master Vue!

    Who this course is for:

    • Engineers looking to harness the power of Vue
    • Beginners learning about web development

    User Reviews
    Rating
    0
    0
    0
    0
    0
    average 0
    Total votes0
    Focused display
    Category
    Stephen Grider
    Stephen Grider
    Instructor's Courses
    Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area.  With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers.  Invest in yourself by learning from Stephen's published courses.
    Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.
    • language english
    • Training sessions 137
    • duration 10:22:03
    • English subtitles has
    • Release Date 2024/03/13

    Courses related to Vue JS

    Real World Vue
    VueMasteryReal World Vue
    1:31:54
    06/12/2023
    Subtitle
    Easier Project Setup With the Vue.js CLI 3
    TutsPlusEasier Project Setup With the Vue.js CLI 3
    1:19:19
    English subtitles
    06/08/2023