Working with Vue.js

Michiel Mulders, Olayinka Omole, Nilson Jacques, Chad A. Campbell, Kingsley Silas, Ahmed Bouchefra, Michael Wanyoike, Jack Franklin

Description

Since its release in 2014, Vue.js has seen a meteoric rise to popularity and is 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.

If you're an experienced developer looking to make a start with Vue, this book is for you. It provides a rapid introduction to the key topics that you'll need to understand. It contains:

• Getting up and Running with the Vue.js 2.0 Framework by Jack Franklin
• Getting Started with Vuex: a Beginner's Guide by Michael Wanyoike
• A Beginner's Guide to Vue CLI by Ahmed Bouchefra
• A Beginner's Guide to Working With Components in Vue by Kingsley Silas
• A Beginner's Guide to Working with Forms in Vue by Kingsley Silas
• How to Conditionally Apply a CSS Class in Vue.js by Chad Campbell
• How to Replace jQuery with Vue by Nilson Jacques
• Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps by Olayinka Omole
• Optimize the Performance of a Vue App with Async Components by Michiel Mulders

Sujets

• Langages
• Computers
• Informatique
• JavaScript

Informations

• Publié par: SitePoint
• Date de parution: 06 juin 2019
• Nombre de lectures: 1
• EAN13: 9781492071440
• Langue: English

Extrait

Working with Vue.js
Copyright © 2019 SitePoint Pty. Ltd.
Ebook ISBN: 978-1-925836-26-4 Cover Design: Alex Walker Project Editor: James Hibbard
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.
Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.
Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.

Published by SitePoint Pty. Ltd.
48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: [e-mail]

About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, design, and more.

Preface
Since its release in 2014, Vue.js has seen a meteoric rise to popularity and is 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.
If you're an experienced developer looking to make a start with Vue, this book is for you. It provides a rapid introduction to the key topics that you'll need to understand. It contains: Getting up and Running with the Vue.js 2.0 Framework by Jack Franklin Getting Started with Vuex: a Beginner’s Guide by Michael Wanyoike A Beginner’s Guide to Vue CLI by Ahmed Bouchefra A Beginner’s Guide to Working With Components in Vue by Kingsley Silas A Beginner’s Guide to Working with Forms in Vue by Kingsley Silas How to Conditionally Apply a CSS Class in Vue.js by Chad Campbell How to Replace jQuery with Vue by Nilson Jacques Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps by Olayinka Omole Optimize the Performance of a Vue App with Async Components by Michiel Mulders
Who Should Read This Book?
This book is for developers with experience of JavaScript.

Conventions Used
Code Samples
Code in this book is displayed using a fixed-width font, like so:
<h1>A Perfect Summer's Day</h1><p>It was a lovely day for a walk in the park.The birds were singing and the kids were all back at school.</p>
Where existing code is required for context, rather than repeat all of it, ⋮ will be displayed:
function animate() { ⋮ new_variable = "Hello"; }
Some lines of code should be entered on one line, but we’ve had to wrap them because of page constraints. An ➥ indicates a line break that exists for formatting purposes only, and should be ignored:
URL.open("http://www.sitepoint.com/responsive-web-➥design-real-user-testing/?responsive1");
You’ll notice that we’ve used certain layout styles throughout this book to signify different types of information. Look out for the following items.
Tips, Notes, and Warnings

Hey, You!

Tips provide helpful little pointers.

Ahem, Excuse Me ...

Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.

Make Sure You Always ...

... pay attention to these important points.

Watch Out!

Warnings highlight any gotchas that are likely to trip you up along the way.
Chapter 1: Getting up and Running with the Vue.js 2.0 Framework
by Jack Franklin
As soon as the popular JavaScript framework Vue.js released v2 , I was eager to give it a spin and see what it’s like to work with. As someone who’s pretty familiar with Angular and React, I was looking forward to seeing the similarities and differences between them and Vue.
Vue 2 sports excellent performance stats, a relatively small payload (the bundled runtime version of Vue weighs in at 30KB once minified and gzipped), along with updates to companion libraries like vue-router and Vuex, the state management library for Vue. There’s far too much to cover in just one article, but keep an eye out for some later articles where we’ll look more closely at various libraries that couple nicely with the core framework.
Inspiration from Other Libraries
As we go through this tutorial, you’ll see many features that Vue has that are clearly inspired by other frameworks. This is a good thing; it’s great to see new frameworks take some ideas from other libraries and improve on them. In particular, you’ll see Vue’s templating is very close to Angular’s, but its components and component lifecycle methods are closer to React’s (and Angular’s, as well).
One such example of this is that, much like React and nearly every framework in JavaScript land today, Vue uses the idea of a virtual DOM to keep rendering efficient. Vue uses a fork of snabbdom , one of the more popular virtual DOM libraries. The Vue site includes documentation on its Virtual DOM rendering , but as a user all you need to know is that Vue is very good at keeping your rendering fast (in fact, it performs better than React in many cases), meaning you can rest assured you’re building on a solid platform.
Components, Components, Components
Much like other frameworks these days, Vue’s core building block is the component. Your application should be a series of components that build on top of each other to produce the final application. Vue.js goes one step further by suggesting (although not enforcing) that you define your components in a single .vue file, which can then be parsed by build tools (we’ll come onto those shortly). Given that the aim of this article is to fully explore Vue and what it feels like to work with, I’m going to use this convention for my application.
A Vue file looks like so:
<template> <p>This is my HTML for my component</p></template><script> export default { // all code for my component goes here }</script><style scoped> /* CSS here * by including `scoped`, we ensure that all CSS * is scoped to this component! */</style>
Alternatively, you can give each element a src attribute and point to a separate HTML, JS or CSS file respectively if you don’t like having all parts of the component in one file.
Setting Up a Project
Whilst the excellent Vue CLI exists to make setting up a full project easy, when starting out with a new library I like to do it all from scratch so I get more of an understanding of the tools.
These days, webpack is my preferred build tool of choice, and we can couple that with the vue-loader plugin to support the Vue.js component format that I mentioned previously. We’ll also need Babel and the env preset, so we can write all our code using modern JavaScript syntax, as well as the webpack-dev-server , which will update the browser when it detects a file change.
Let’s initialize a project and install the dependencies:
mkdir vue2-demo-projectcd vue2-demo-projectnpm init -ynpm i vuenpm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev
Then create the initial folders and files:
mkdir srctouch webpack.config.js src/index.html src/index.js
The project structure should look like this:
.├── package.json├── package-lock.json├── src│ ├── index.html│ └── index.js└── webpack.config.js
Now let’s set up the webpack configuration. This boils down to the following: Tell webpack to use the vue-loader for any .vue files Tell webpack to use Babel and the env preset for any .js files Tell webpack to generate an HTML file for the dev-server to serve, using src/index.html as a template:
//webpack.config.jsconst VueLoaderPlugin = require('vue-loader/lib/plugin')const HtmlWebPackPlugin = require("html-webpack-plugin")module.exports = { module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }, plugins: [ new VueLoaderPlugin(), new HtmlWebPackPlugin({ template: "./src/index.html" }) ]}
Finally, we’ll add some content to the HTML file and we’re ready to go!
<!-- src/index.html --><!DOCTYPE html><html> <head> <title>My Vue App</title> </head> <body> <div id="app"></div> </body></html>
We create an empty div with the ID of app , as this is the element that we’re going to place our Vue application in. I always prefer to use a div , rather than just the body element, as that lets me have control over the rest of the page.
Writing Our First Vue.js App
We’re going to stay true to every programming tutorial ever and write a Vue application that puts “Hello, World!” onto the screen before we dive into something a bit more complicated.
Each Vue app is created by importing the library and then instantiating a new Vue instance:
import Vue from 'vue'const vm = new Vue({ el: '#app',})
We give Vue an element to render onto the page, and with that, we’ve created a Vue application! We pass a selector for the element that we want Vue to replace with our application. This means when Vue runs it will take the div#app that we created and replace it with our app