Vue News Friday, March 9 Api url, Eye tracking app, Component & more…
Vue News TLDR / Table of Contents
- Code Challenge #5: Build A Movie Player
- API URL, Eye Tracking App, challenge, movie trailer player, code challenge
- Understanding Vue.js Lifecycle Hooks
- Learn what Vue.js component lifecycle hooks do and how you can use them to perform various tasks.
- component, DOM, server-side rendering, hooks, hook runs
- Vue, Angular.js, underlying Vue instance, Angular, Vue single-file components
- The Challenge – The challenge is basically to build a movie trailer player with image thumbnails for a playlist and a section to display selected video.
- The goal is to diplay a list of movies with their thumbnails and play a trailer once it’s movie thumbnail is clicked.
- An API containing movie titles, poster image URL and trailer URL is provided in the base codepen.
- Goals of this Challenge – – Connect to an external API – Display data from that API – Update the video player based on HTML events – – Bonus – Just to have more fun, you can display the name and year of release of each movie as a text…
- Resources – Check out the base code for this challenge including an API containing movie titles and basic information on the movies.
- Use creation hooks if you need to set things up in your component both during client rendering and server rendering.
- In the mounted hook, you will have full access to the reactive component, templates, and rendered DOM (via.
- Updating hooks are called whenever a reactive property used by your component changes, or something else causes it to re-render.
- The beforeUpdate hook runs after data changes on your component and the update cycle begins, right before the DOM is patched and re-rendered.
- The updated hook runs after data changes on your component and the DOM re-renders.
- Though Vue is extremely flexible and simple, it is very powerful and offers two-way data binding feature, just like Angular and Virtual DOM feature like React.
- Collate and Remote Pad GUI are examples of apps made with Vue.js – – Being a cross-platform, highly progressive framework, Vue becomes the first choice for many developers who need to develop single page applications.
- Though a few of the syntaxes of Vue and Angular are similar, like API and design (this is because Vue was actually inspired from Angular.js in its early stages of development), Vue has endeavored to improve itself in areas where developers find it difficult with Angular.js.
- Angular.js is opinionated, it actually gives strong opinions on how your app should be structured, Vue is gentler, and offers a modular, flexible solution for creating apps.
- Vue allows for simpler programming model, while Angular.js manipulates DOM in a cross-browser compatible way.
Top Vue Courses
Vue JS 2: From Beginner to Professional (includes Vuex) (1,798 students enrolled)By Bo Andersen
- 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)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) (38,295 students enrolled)By Maximilian Schwarzmüller
- Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones
- Understand the Theory behind Vue.js and use it in Real Projects
- Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)
The Ultimate Vue JS 2 Developers Course (3,882 students enrolled)By Anthony Gore
- Understand all Vue concepts from beginner to advanced
- Build three real world applications using Vue.js utilising every Vue feature
- Use the Vuex statement management library
- Write basic Vue with ES5 and also modern Vue with ES6
- Setup VueJS environment with development tools including Webpack
- Create a universal application with server-side rendering
- Use popular plugins from the Vue ecosystem like vue-router and vue-resource
- Cutting-edge features like Single File Components, Render functions and Server-Side Rendering
Vue JS 2.0 - Mastering Web Apps (52,495 students enrolled)By David Katz
- Build entire Vue JS, VueRouter, and Vuex applications from scratch.
- Develop apps that deal with APIs and web requests.
- Create web apps with a full authentication service, and real-time database.
Learn by Doing: Vue JS 2.0 the Right Way (1,437 students enrolled)By Dejan Stošić
- Build your own VueJS application of any size
- Plan and structure your project
- Write maintainable code
- Use smart development tools like vue-cli