Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    From $11.99/month after trial. Cancel anytime.

    Jump Start Vue.js
    Jump Start Vue.js
    Jump Start Vue.js
    Ebook215 pages2 hours

    Jump Start Vue.js

    By Nilson Jacques

    4/5

    ()

    Read preview

    About this ebook

    Since its release in 2014, Vue.js has seen a meteoric rise to popularity and is now considered one of the primary front-end frameworks, and not without good reason. Its component-based architecture was designed to be flexible and easy to adopt, making it just as easy to integrate into projects and use alongside non-Vue code as it is to build complex client-side applications.

    Now revised to cover Vue 3, this short book is ideal for front-end developers who need a rapid introduction to Vue.js. It covers:

    • Basic concepts: Vue fundamentals, templates, and reactive data
    • Components: custom components, events and slots
    • State management: Vuex, mutations, actions
    • Routes: creating routes, links and route guards
    • Nuxt.js: build sophisticated apps in no time
    • And much more!
    LanguageEnglish
    PublisherSitePoint
    Release dateSep 13, 2021
    ISBN9781098129514
    Jump Start Vue.js
    Author

    Nilson Jacques

    Nilson is a full-stack web developer who has been working with computers and the web for over a decade. A former hardware technician and network administrator, Nilson is now currently co-founder and developer of a company developing web applications for the construction industry. You can also find Nilson on the SitePoint Forums as a mentor.

    Read more from Nilson Jacques

    Related to Jump Start Vue.js

    Related ebooks

    Programming For You

    View More
    View More

    Related podcast episodes

    Related articles

    • UNLIMITED

      Usability

      Oct 19, 2021

      Usability
      3 min read

    • UNLIMITED

      Code An Admin Back-end In Django

      Dec 13, 2022

      Credit: www.djangoproject.com OUR EXPERT Matt Holder has been a fan of the open source methodology for over two decades and uses Linux and other tools where possible. More featurepacked source code for this project can be downloaded from https://

      6 min read

    • UNLIMITED

      FLASK Web Frameworks

      Jun 4, 2019

      The main focus of Python has always been to get you cracking on with your coding – the language was never made for web programming. However, this has just made it more interesting to extend the language for the web, or to create an interface to web-b

      9 min read

    • UNLIMITED

      Create A RESTful Server In Go

      Oct 19, 2021

      Create A RESTful Server In Go
      8 min read

    • UNLIMITED

      Access Your Mac Anywhere

      Nov 8, 2022

      Access Your Mac Anywhere
      2 min read

    • UNLIMITED

      Types Of Databases

      Aug 27, 2019

      NoSQL databases provide the performance, scalability and stability that’s required by the modern data-driven apps we interact with these days. But that is where the similarity between NoSQL systems end. In fact, it wouldn’t be wrong to say that the o

      1 min read

    • UNLIMITED

      Creating Flutter apps

      Aug 22, 2023

      Credit: https://flutterawesome.com/calculator-create-with-flutter/ David Bolton has been programming Flutter apps for a couple of years but this is the first time he’s done Flutter development on Linux. The Flutter plugin includes tools for insertin

      9 min read

    • UNLIMITED

      What Is The Future Of Game Streaming Now That Stadia Is Dead?

      Oct 31, 2022

      Once hyped as being ‘the future of gaming’, the Google Stadia game streaming service was officially, just three years after launch and before even making it to Australian shores. When game streaming first launched we did have some apprehension about

      2 min read

    • UNLIMITED

      GO Inside Parsing – How Go Handles The Code

      Jul 30, 2019

      This tutorial has two aspects: a theoretical one and a practical one. In the theoretical part, you will learn about parsing, grammar and regular expressions; this is how languages are built and therefore understood in terms of construction and usage.

      8 min read

    • UNLIMITED

      Fast And Easy Image Processing

      Apr 4, 2023

      Credit: https://github.com/oguzhaninan/korkut Shashank Sharma is a trial lawyer in New Delhi and an avid Arch user. He’s been writing about open source software for 20 years and lawyering for 10. You wouldn’t think of the command line as the go-to re

      4 min read

    • UNLIMITED

      Run A Ghost Blog On Your Server

      Nov 16, 2021

      David Rutland is a tinkerer and a dilettante. He buys domains on a whim and runs them from a Raspberry Pi behind the couch.. The internet is a bleak place in the third decade of the 21st century. Away from the walled-garden shouting matches and ego-s

      10 min read

    • UNLIMITED

      DJANGO Create A Database-driven Website

      Jun 4, 2019

      The Django web framework was named after the famous guitarist Django Reinhardt and was first created by web developers at a small newspaper in Kansas. The main goals of Django is to enable fast development of complex websites with database needs. It

      7 min read

    • UNLIMITED

      Common Errors

      Aug 27, 2019

      If you receive a ‘Script not found’ error, this probably means that you don’t have the mod scripts installed in your Minecraft directory. Check that you’ve replaced .minecraft with the one from McPiFoMo; this should include mcpipy, which will be full

      1 min read

    • UNLIMITED

      Ice Cold With Kali

      May 2, 2023

      Ice Cold With Kali
      3 min read

    • UNLIMITED

      QEMU, KVM And The Other Ones

      Feb 9, 2021

      QEMU, KVM And The Other Ones
      4 min read

    • UNLIMITED

      Why Python?

      Apr 7, 2020

      Python is an interpreted, high-level, general-purpose programming language that was first released in 1991 by its creator, Guido van Rossum. Very similar in programming construct to how BASIC (Beginners All-purpose Sybollic Instruction Code) was used

      1 min read

    • UNLIMITED

      Linux Invades Windows

      Apr 2, 2024

      Linux Invades Windows
      1 min read

    • UNLIMITED

      Desktop Layout

      Mar 8, 2022

      Desktop Layout
      3 min read

    • UNLIMITED

      AWS vs Azure

      Aug 22, 2023

      AWS vs Azure
      9 min read

    • UNLIMITED

      Lint Hub

      Jul 27, 2021

      Pylint – a comprehensive linter that focuses on standards compliance and error detection. It’s likely built into your favourite IDE. Pycodestyle (formerly known as PEP8) – focuses on validating code formatting PEPs, has some overlap with Pylint. Pyfl

      1 min read

    • UNLIMITED

      Newsdesk

      May 30, 2023

      Newsdesk
      2 min read

    • UNLIMITED

      Safe Hex

      Jan 11, 2022

      Safe Hex
      4 min read

    Related categories

    Reviews for Jump Start Vue.js

    4/5

    1 rating0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Jump Start Vue.js - Nilson Jacques

      Chapter 1: Vue.js: The Basics

      Since Facebook introduced React in 2013, component-based UI frameworks have become increasingly popular. They allow you to build your applications as collections of self-contained, reusable components that can manage their own state and can be declaratively composed into more complex interfaces.

      The second generation of Google’s Angular framework is based around the component paradigm, and a number of smaller, light-weight libraries such as Hyperapp have cropped up in recent years.

      Amidst this seemingly ever-growing collection of frameworks and libraries came Vue.js (referred to simply as Vue from here on). Released in 2014, Vue was created by a Google engineer called Evan You, who was inspired to create it after having worked with AngularJS.

      Vue has seen a meteoric rise in popularity and is now considered one of the main front-end frameworks, and not without good reason. It was designed to be flexible and easy to adopt, making it just as easy to integrate into projects and use alongside non-Vue code as it is to build complex client-side applications.

      Why Choose Vue?

      If you’re reading this, you’ve already decided that Vue is worth a look, but there are plenty of good reasons to choose it for your next project.

      It’s easy to sprinkle onto an existing site. You can start using Vue on existing websites without having to implement a build step and introduce a new setup and tooling to your workflow. In fact, Vue is the perfect go-to tool for many situations where you’d previously have reached for jQuery!

      Vue’s component-based architecture. Of course, Vue is also more than capable of building modern single-page applications (SPAs), allowing you to develop your apps as modular, reusable components.

      Its comprehensive ecosystem. Pre-built components for almost every conceivable use are available from Vue’s large community of developers. On top of that, popular libraries exist to provide common functionality such as client-side routing, state management, and server-side rendering! Many of these are also maintained by the official Vue team, in contrast to React, where there aren’t always official solutions available.

      It’s widely used. Vue is being used by a diverse range of businesses, from GitLab to the Chinese giant Alibaba. It’s also been adopted by the PHP framework Laravel as its default library for building client-side apps. It’s safe to say that these organizations consider Vue to be a sensible choice with good future prospects. Its popularity also means that it’s easy to get help with your problems on various support sites and forums.

      Getting Started

      In order to get to know Vue and see how it works, let’s walk through the basics. To get a feel for what we can do with the framework, we’re going to start with a static HTML page and add in some basic interactivity with Vue.

      A basic staff directory

      As an example, we’re going to use this fictional employee directory, which you can find as a sandbox demo at CodeSandbox.io.

      The Vue Instance

      Let’s start by loading the Vue library from a CDN. For simple use cases, like adding some interactivity to existing websites, this will get us up and running quickly without having to introduce a build step:

      Development vs Production

      We’re including the development version, which outputs helpful warnings in the console to help you avoid common pitfalls, and integrates with the Vue devtools (which we’ll cover later). In production, you’ll want to switch to the minified version vue.global.prod.js, which is approximately 42KB gzipped.

      Next, we need to create a new Vue instance:

      Vue.createApp({}).mount('#main');

      So far, all we’ve done is tell Vue that we want to create an instance and have it manage an area of the DOM defined by the #main selector. It will use this area of the page as a template.

      It will parse this chunk of HTML, looking for expressions that are part of the template language (which we’ll look at shortly) and binding them to our instance data where applicable.

      Reactive Data

      To be able to do something useful with our Vue instance, we need to give it some data. We do this by defining a function called data(), which returns an object containing all the data we want Vue to work with.

      Any properties that are assigned to the returned object (including nested objects and arrays) become reactive, meaning that Vue will observe them and automatically re-render the UI when they change.

      Let’s add some example data to our instance:

      Vue.createApp({

        data() {

          return {

            heading: Staff Directory,

            employees: [

              {

                firstName: amelia,

                lastName: austin,

                photoUrl: https://randomuser.me/api/portraits/thumb/women/9.jpg,

                email: [email protected],

                phone: (651)-507-3705,

                department: Engineering

              },

              {

                firstName: bobbie,

                lastName: murphy,

                photoUrl: https://randomuser.me/api/portraits/thumb/women/79.jpg,

                email: [email protected],

                phone: (925)-667-7604,

                department: Management

              }

            ]

          };

        }

      }).mount('#main');

      Always Declare Your Data Properties

      It may be that some of the data you want to work with won’t be available to your instance when you initialize it (if it’s loaded via an Ajax request, for example). It’s good practice to declare initial values for all your data properties, as properties added later won’t be reactive by default.

      At this stage, our instance has all the data it needs, but it won’t be able to render anything without a template. Let’s look at how to create one next.

      Template Syntax

      So now we have our Vue instance, we’ve given it some data, and we’ve told it which part of the page it should be looking at for its template. How do we render our data?

      Interpolations

      Interpolations are the way that we insert dynamic values into a template. We use the curly brace syntax (aka the Mustache syntax) to output primitive values from our instance data, such as numbers and strings:

      ui center aligned header>{{ heading }}

      You can also use any valid JavaScript statement between double braces, which Vue will evaluate before rendering.

      Here’s the code:

      main>

       

      The price is: {{ price * 1.20 }} (inc. VAT)

        Vue.createApp({

          data() {

            return {

              price: 25

            }

          }

        }).mount('#main');

      And here’s the output:

      The price is: £30 (inc. VAT)

      In this example, we’re performing a calculation with the data price before outputting it. The calculation is just a normal JavaScript expression.

      Directives

      Of course, to build any sort of interesting UI, we need to do more than just display simple values. Vue’s template syntax includes directives for looping and conditional display logic, as well as binding HTML attributes to reactive data properties. Directives are attributes you add to DOM elements and components (very similar to AngularJS’s ng-* directives).

      v-for

      Thinking back to our example instance data, you’ve probably already wondered how we go about looping over collections of data such as arrays. The v-for directive allows us to tell Vue that we want a section of our template to be rendered for every item in a collection (which can be an array or an object):

        employee in employees>

         

            https://randomuser.me/api/portraits/thumb/women/9.jpg

                    class=ui mini rounded image />

         

          {{ employee.firstName }}

          {{ employee.lastName }}

          {{ employee.email }}

          {{ employee.phone }}

          {{ employee.department }}

       

      Here, the element with the v-for directive, and all its child elements, will be repeated for each employee in the array. You might be wondering why the image src is

      Enjoying the preview?
      Page 1 of 1