Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS AWS Certified Developer - Associate CompTIA Security+
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 15.5 hours on-demand video
  • 7 articles
  • 15 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development Vue JS

Vue JS 2: From Beginner to Professional (includes Vuex)

Learn Vue JS, and become a VueJS professional. Build complex SPAs with Vue.js, a simple and popular JavaScript framework
Rating: 4.4 out of 54.4 (865 ratings)
4,172 students
Created by Bo Andersen
Last updated 11/2019
English
English [Auto], Italian [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • How to build advanced Vue.js applications
  • How to build single page applications (SPA)
  • Understand the theory and how Vue works under the hood
  • How to manage state in large applications with Vuex
  • Communicating with servers with HTTP
  • Use modern tools for developing and building applications (e.g. webpack)

Course content

14 sections • 221 lectures • 15h 19m total length

  • Preview06:41
  • Preview02:27
  • Preview03:12
  • Preview01:13
  • Guidelines for the course Q&A
    01:31

  • Introduction to this section
    00:50
  • Working with templates
    04:19
  • Methods
    07:03
  • A word about ES6 arrow functions
    02:18
  • Introduction to directives
    04:38
  • Exercises: String interpolation, methods and directives
    07:05
  • Using expressions with directives
    01:54
  • Introduction to events
    02:09
  • Passing arguments to event listeners
    04:02
  • Directive & event modifiers
    05:15
  • Key modifiers
    03:57
  • Modifier keys
    04:17
  • Exercises: Events & modifiers
    08:39
  • Two-way data binding
    07:32
  • Security: Outputting and escaping HTML
    03:42
  • Rendering elements only once
    01:31
  • Conditionally rendering elements
    06:56
  • Showing and hiding elements
    02:09
  • Hiding elements until the Vue instance is ready
    04:23
  • Looping through arrays
    06:31
  • Accessing the loop index
    01:33
  • Looping through object properties
    03:17
  • Looping through number ranges
    02:01
  • Understanding the v-for update strategy
    06:16
  • Array change detection
    04:33
  • Exercises: Two-way data binding, conditionals, and loops
    04:21
  • Optimizing performance with computed properties
    06:54
  • Adding getters & setters to computed properties
    04:58
  • Watchers
    09:14
  • Exercises: Computed properties & watchers
    06:39
  • Filters
    06:39
  • Exercises: Filters
    05:44
  • Styling with inline CSS styles
    10:11
  • Styling with CSS classes
    10:20
  • Exercises: Styling with inline styles and classes
    06:38
  • Shorthands for events and bindings
    03:19

  • Preview03:19
  • Full source code available within GitHub repository
    00:11
  • Displaying products
    06:09
  • Adding products to the cart
    02:48
  • Displaying the cart info in the menu
    04:43
  • Switching between views
    04:26
  • Displaying the cart
    05:29
  • Handling adding products already in cart
    04:35
  • Increasing and decreasing product quantities
    06:48
  • Checking out
    03:07
  • Wrap up
    02:41

  • Introduction to this section
    00:55
  • Accessing a Vue instance outside of its declaration
    02:26
  • Using multiple Vue instances on the same page
    02:58
  • Proxying
    06:56
  • Understanding reactivity
    06:40
  • Asynchronous update queue
    05:22
  • Preview04:28
  • Adding watchers dynamically
    08:28
  • Accessing the DOM with $refs
    07:49
  • Mounting templates dynamically
    03:14
  • Using inline templates
    05:41
  • Destroying a Vue instance
    01:40
  • Vue instance lifecycle & hooks
    Preview04:13
  • Using lifecycle hooks
    11:34

  • Introduction to this section
    00:59
  • Installing Chrome developer tools extension
    01:30
  • Introduction to Vue CLI
    02:26
  • Creating a project with Vue CLI
    04:43
  • Understanding the project structure
    08:14
  • Single file components
    01:43
  • Building for production
    01:19

  • Introduction to components
    06:16
  • Why the data property must be a function
    03:39
  • Global & Local Components
    03:44
  • Component naming conventions
    02:07
  • Creating a component in the project
    04:21
  • Exercises: Global, local and child components
    08:54
  • Organizing components
    02:04
  • Global & scoped styles
    04:41
  • Passing data to components
    04:46
  • Validating passed data
    03:13
  • Working with events
    07:08
  • Communicating through an event bus
    04:43
  • Exercises: Passing data & events
    09:05
  • Slots
    03:44
  • Named slots
    03:16
  • Dynamic components
    04:49
  • Keeping dynamic components alive
    01:41
  • Dynamic components lifecycle hooks
    02:19
  • Vue developer tool in action
    02:04

  • Preview03:30
  • Full source code available within GitHub repository
    00:10
  • Creating components for the views
    03:21
  • Adding the sidebar markup
    02:26
  • Switching between views
    13:50
  • Loading messages from file
    01:50
  • Adding numbers to navigation menu
    05:41
  • Displaying the inbox
    11:32
  • Marking messages as important
    03:02
  • Displaying sent, important and trashed messages
    03:09
  • Displaying a message
    06:40
  • Automatically marking messages as read
    01:39
  • Navigating back to previous views
    05:21
  • Deleting messages
    02:37
  • Marking messages as read or unread
    03:54
  • Refreshing the inbox
    04:49
  • Sending messages
    06:53
  • Wrap up
    01:01

  • Introduction to mixins
    02:17
  • Using mixins
    02:51
  • How mixins are merged in
    07:07
  • Global mixins
    02:43
  • Global filters
    02:34

  • Full source code available within GitHub repository
    00:11
  • Text inputs & textareas
    04:58
  • Checkboxes
    06:23
  • Radio buttons
    02:01
  • Selects (dropdowns)
    02:05
  • Modifiers
    02:59
  • How the v-model directive works
    01:47
  • Adding default values
    04:04
  • Submitting forms
    02:48

  • Introduction to transitions and animations
    Preview03:29
  • Understanding single element transitions
    01:52
  • Transitioning with CSS classes
    04:20
  • Implementing our first transition
    07:58
  • Specifying transition names
    02:37
  • Preview05:48
  • Implementing a custom CSS animation
    04:27
  • Mixing transitions and animations
    04:05
  • Transitioning between elements
    03:01
  • Transition modes
    02:08
  • Transitioning elements initially (on page load)
    01:51
  • Transitioning with JavaScript hooks
    06:12
  • Ignoring CSS classes
    02:38
  • Transitioning dynamic components
    02:58
  • Transitioning multiple elements
    05:21
  • Preview05:36

Requirements

  • You should have basic knowledge of JavaScript, HTML and CSS
  • Knowledge of ES6 is a plus, but not a requirement

Description

Vue JS 2 has quickly become incredibly popular, both due to how powerful the JavaScript framework is, but also how easy it is to learn. Vue is much easier to learn than other JavaScript frameworks such as Angular and React, meaning that you can start building your first Vue application in no time!

In this course, you will learn how to build reactive web applications at any scale with Vue. You will learn the theory that you need to know about Vue.js, and we will be building several example applications as we go along, demonstrating the explained concepts in practice. The course lectures include examples when going through new material, followed by exercises that you can optionally choose to solve - and we walk through the solutions together.

Whether or not you have prior experience with VueJS, this course is an easy way for you to learn the framework! Perhaps you have struggled with large and complex frameworks such as Angular? Don't worry, Vue.js is much easier to learn! Getting up and running fast is at the heart of Vue, so no more long hours of configuration just to show "Hello World!" Or perhaps you have no experience with reactive JavaScript frameworks and come straight from using jQuery? No problem! Vue.js is an excellent choice for your first framework, and is one of the easiest one to start out with.

Despite the fact that Vue JS is easy to learn, it is an incredibly powerful framework that can be used to build large web applications as well as small ones. Unlike many other frameworks, Vue.js does not try to take control of your application, and allows you to let the framework control only parts of your application - something that is perfect for migrating legacy applications to a more modern framework without doing a complete rewrite at once! Apart from learning how to build single page applications (SPAs), you will also learn how to manage state in large applications with Vuex.

This course starts from scratch with teaching you how to build a "Hello World!" application in Vue.js and moves towards building advanced applications step by step. By the end of this course, you will be able to build complex and large web applications with Vue.

Who this course is for:

  • Developers who have little or no prior experience with Vue.js
  • Developers who want to learn a modern and simple JavaScript framework
  • Developers who want to learn how to build reactive web applications

Featured review

Ellen Caton
Ellen Caton
203 courses
37 reviews
Rating: 5.0 out of 5a year ago
I'm only at section 2 right now. I've been using Vue lately (not as much as I want but it's getting to be a bit more) . The content on this course is excellent and going to be saving me so much time going forward, even in some simple things (that I was doing in overly complex ways) Thank you so much!

Instructor

Bo Andersen
Lead Developer
Bo Andersen
  • 4.5 Instructor Rating
  • 14,532 Reviews
  • 69,459 Students
  • 5 Courses

My name is Bo Andersen and I am a software engineer from Denmark.

I currently work as the lead developer and partner at a startup company, apart from teaching here at Udemy. I have previously worked at a very successful company, operating one of the largest websites in Denmark, before deciding to teach software engineering. I have worked with programming for a decade and have a bachelor's degree in computer science. I started out learning to code by building websites in PHP, but have since worked with many other technologies such as Elasticsearch, Logstash, Kibana, Beats, Java, Python, Docker, AWS, etc.

I have also been blogging about programming subjects for a number of years, so I encourage you to have a look at my website if you are curious.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.