Vue.js: Up and Running : Building Accessible and ...

Vue.js

Up & Running

BUILDING ACCESSIBLE AND PERFORMANT WEB APPS

Callum Macrae



Vue.js: Up and Running

Building Accessible and Performant Web Apps

Callum Macrae

Beijing

Boston Farnham Sebastopol



Tokyo

Vue.js: Up and Running

by Callum Macrae

Copyright ? 2018 Callum Macrae. All rights reserved.

Printed in the United States of America.

Published by O¡¯Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.

O¡¯Reilly books may be purchased for educational, business, or sales promotional use. Online editions are

also available for most titles (). For more information, contact our corporate/insti©\

tutional sales department: 800-998-9938 or corporate@.

Editors: Allyson MacDonald and Virginia Wilson

Production Editor: Justin Billing

Copyeditor: Sharon Wilkey

Proofreader: Jasmine Kwityn

March 2018:

Indexer: Ellen Troutman-Zaig

Interior Designer: David Futato

Cover Designer: Karen Montgomery

Illustrator: Rebecca Demarest

First Edition

Revision History for the First Edition

2018-02-23:

First Release

See for release details.

The O¡¯Reilly logo is a registered trademark of O¡¯Reilly Media, Inc. Vue.js: Up and Running, the cover

image, and related trade dress are trademarks of O¡¯Reilly Media, Inc.

While the publisher and the author have used good faith efforts to ensure that the information and

instructions contained in this work are accurate, the publisher and the author disclaim all responsibility

for errors or omissions, including without limitation responsibility for damages resulting from the use of

or reliance on this work. Use of the information and instructions contained in this work is at your own

risk. If any code samples or other technology this work contains or describes is subject to open source

licenses or the intellectual property rights of others, it is your responsibility to ensure that your use

thereof complies with such licenses and/or rights.

978-1-491-99724-6

[LSI]



Table of Contents

Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii

1. Vue.js: The Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Why Vue.js?

Installation and Setup

vue-loader and webpack

Templates, Data, and Directives

v-if Versus v-show

Looping in Templates

Binding Arguments

Reactivity

How It Works

Caveats

Two-Way Data Binding

Setting HTML Dynamically

Methods

this

Computed Properties

Watchers

Watching Properties of Objects in the Data Object

Getting the Old Value

Deep Watching

Filters

Accessing Elements Directly Using ref

Inputs and Events

The v-on Shortcut

Event Modifiers

Life-Cycle Hooks

1

3

4

6

9

11

12

14

15

16

17

19

20

21

22

25

26

26

27

27

29

30

31

31

33

iii



Custom Directives

Hook Arguments

Transitions and Animations

CSS Transitions

JavaScript Animations

Summary

34

36

37

37

39

41

2. Components in Vue.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Component Basics

Data, Methods, and Computed Properties

Passing in Data

Prop Validation

Casing of Props

Reactivity

Data Flow and the .sync Modifier

Custom Inputs and v-model

Passing Content into Components with Slots

Fallback Content

Named Slots

Scoped Slots

Custom Events

Mixins

Merging Mixins and Components

vue-loader and .vue Files

Non-prop Attributes

Components and v-for

Summary

43

44

45

45

47

47

48

51

52

53

53

54

56

58

60

61

63

64

67

3. Styling with Vue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Class Binding

Inline Style Binding

Array Syntax

Multiple Values

Scoped CSS with vue-loader

CSS Modules with vue-loader

Preprocessors

Summary

69

71

72

72

72

73

74

74

4. Render Functions and JSX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

The Tag Name

The Data Object

Children

iv

|

76

76

78

Table of Contents



 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download