Your Choice JavaScript News

Vue News Tuesday, March 27 Template literals, Arrow functions, Modern web development & more…

Vue News TLDR / Table of Contents

  • 4 Essential ES2015 Features For Vue.js Development – Vue.js Developers –
    • ES2015 (aka ES6) is the current specification of the JavaScript language. If you’re new to JavaScript or haven’t updated your JavaScript knowledge recently, there are a number of new features in…
    • Template literals, arrow functions, Vuex state properties, JavaScript modules, Vue configuration object
  • Intro to Vue.js by John Papa
    • If you feel like modern web development has gotten way too complicated, Vue.js might be the JavaScript framework for you. With over 10K stars on Github, Vue.js has vaulted out of relative obscurity to find companies such as GitLab choosing to use it. In this session, we’ll take a look…
    • modern web development, simple Vue.js application, relative obscurity, 10K stars, GitLab choosing
  • How To Make Netflix-Like Swipers in Vue
    • Vue, movie component, Vue sample project, Vue Awesome Swiper, Vue CLI
  • One of the great features of Vue.js is that you can easily access data properties, computed properties and methods as this.vueProperty from within the context of the Vue configuration object.
  • In the fitlerBySize computed property, we need to declare a variable size so this value can be used in the filter callback: – An arrow function uses the this object from the enclosing context.
  • In this case, it’s from the filterBySize computed property, which has the Vue object bound to this, which simplifies the filter callback: – GotchaWhile arrow functions can be used effectively in many situations, it doesnt mean we should use them all the time when developing Vue.
  • Template literals allow us to do two super-useful things in Vue.js: – Multi-line strings (great for component templates)Embedded expressions (great for computed properties)Multi-line stringsWriting a template in JavaScript code is not ideal, but sometimes we want/need to.
  • For example: – Vuex provides the mapState function which returns an object with all the Vuex state properties that you specify by providing their keys: – Using mapState in conjunction with the spread operator, we can combine local computed properties with those from Vuex in a very succinct way: -…

Tags: Template literals, arrow functions, Vuex state properties, JavaScript modules, Vue configuration object

  • If you feel like modern web development has gotten way too complicated, Vue.js might be the JavaScript framework for you.
  • With over 10K stars on Github, Vue.js has vaulted out of relative obscurity to find companies such as GitLab choosing to use it.
  • In this session, well take a look at why Vue.js is so popular, what makes it different and similar to other frameworks, and how easy it is to stand up and deploy a simple Vue.js application.
  • Vue.js is a brilliant piece of JavaScript engineering, and it just might make you rethink your next app.

Tags: modern web development, simple Vue.js application, relative obscurity, 10K stars, GitLab choosing

  • The component has the following template – – // Movie.vue – template – div class=movie v-bind:style={ backgroundImage: ‘url(‘ + image + ‘)’ } – div class=content – h1 class=title{{ title }}/h1 – p class=description{{ description }}/p – p class=duration{{ duration }}/p – /div – /div – /template – And has…
  • movie{ – display: flex; – flex-direction: column; – align-items: flex-start; – justify-content: flex-end; – text-align: left; – padding: 10px; – width : 350px; – height : 500px; – background-color: rgba(255,255,255,0.7); – background-repeat: no-repeat; – background-blend-mode: overlay; – background-size: cover; – } – /style – HomePage Component – Using the Vue…
  • /Movie’ – import ‘swiper/dist/css/swiper.css’ – import { swiper, swiperSlide } from ‘vue-awesome-swiper’ – – export default { – name: ‘HomePage’, – components: { – Movie, – swiper, – swiperSlide – }, – data() { – return { – swiperOption: { – direction : ‘vertical’, – pagination: { – el: ‘….
  • /components/HomePage’ – export default { – name: ‘App’, – components: { – HomePage – }, – data() { – return { – swiperType : ‘Easy Vertical Swiper’ – } – } – } – /script – Our src/App.
  • — App.vue — – template – div id=app – h1{{ swiperType }}/h1 – HomePage/ – /div – /template – and some styling – – style – #app { – font-family: ‘Avenir’, Helvetica, Arial, sans-serif; – -webkit-font-smoothing: antialiased; – -moz-osx-font-smoothing: grayscale; – text-align: center; – color: #2c3e50; – margin-top: 60px; -…

Tags: Vue, movie component, Vue sample project, Vue Awesome Swiper, Vue CLI

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.


Comments are closed, but trackbacks and pingbacks are open.