Your Choice JavaScript News

Vue News Sunday, March 18 Hidden text field, Svg spec, Render prop & more…

Vue News TLDR / Table of Contents

  • Because SVG Spec doesn’t have z-index for now, I decided to split UI and Contents layer into two svg elements.
  • There is a hidden text field on selected cell.
  • SVG is very useful to implement complex GUI.
  • Especially, I like to handle SVG with computed.
  • Writing GUI with SVG is so fun!

Tags: hidden text field, SVG Spec, svg elements, UI layer, opacity changes

  • Compared with the React version: – Some differences between the two: – Vue has built in prop type validation.You cant inline an anonymous function that returns jsx inside a template.
  • js component as the parent to pass in an anonymous function, but alas, were Vue developers so we can mix our templates with our JSX and be happy about it!Were passing back this (the Vue instance) instead of the React state, but utilize destructuringall the same to pass back x…
  • If you were to do render props with templates, a similar design would be to use scoped slots and would look something like this: – Vue Scoped slots are powerful when using templates.
  • A default slot also gives users of the component a component api so that you dont have to guess what you might need to render.Uses destructuring similar to jsx render callbackParent content to be rendered with child data is inline with the templateYou will probably never be able to inline…
  • Further reading: – Source code: Vue documentation: article on using render props and what this articles title is referencing: helpful article on similarities in frameworks converging React + Vue + Angular: the latest Vue.js articles, tutorials and cool projects in your inbox with the Vue.js Developers Newsletter

Tags: render prop, render props, Vue Scoped slots, render prop pattern, Vue creator Evan

  • thumbnails{ – display: flex; – justify-content: left; – } – JavaScript – For the challenge, we were provided with an API containing a list of movies and data related to each of them.
  • const thumbnail = { – template: ` – div class=thumbnails – div v-for=movie in movies – div class=poster @click=changeCurrent(movie) – img :src=movie.poster height=200alt= – /div – /div – /div – `, – props: [movies], – methods: { – changeCurrent(movie) { – this.
  • $emit(‘choose-movie’, movie) – } – } – }; – The video-thumbnails component is an object containing a template, props declaration and a list of methods utilized in the compoenent.
  • var app = new Vue({ – el: #app, – components: { – video-frame: videoTag, – video-thumbnails: thumbnail – }, – data() { – return { – api: movies: [], – current: null – }; – }, – created() { – axios.get(this.api).
  • Putting these together, our HTML script becomes: – – div class=videos-container id=app – div class=video-player – video-frame :source=current/video-frame – /div – div class=video-choices – video-thumbnails :movies=movies /div – /div – Notice how we passed current as props to the video-frame component with the source attribute.

Tags: movie player, data, data function, simple movie player, fast-growing progressive JavaScript

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)

Learn more.

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)

Learn more.

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

Learn more.

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 more.

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

Learn more.