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

Indexer: Ellen Troutman-Zaig Interior Designer: David Futato Cover Designer: Karen Montgomery Illustrator: Rebecca Demarest

March 2018:

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?

1

Installation and Setup

3

vue-loader and webpack

4

Templates, Data, and Directives

6

v-if Versus v-show

9

Looping in Templates

11

Binding Arguments

12

Reactivity

14

How It Works

15

Caveats

16

Two-Way Data Binding

17

Setting HTML Dynamically

19

Methods

20

this

21

Computed Properties

22

Watchers

25

Watching Properties of Objects in the Data Object

26

Getting the Old Value

26

Deep Watching

27

Filters

27

Accessing Elements Directly Using ref

29

Inputs and Events

30

The v-on Shortcut

31

Event Modifiers

31

Life-Cycle Hooks

33

iii



Custom Directives

34

Hook Arguments

36

Transitions and Animations

37

CSS Transitions

37

JavaScript Animations

39

Summary

41

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

Component Basics

43

Data, Methods, and Computed Properties

44

Passing in Data

45

Prop Validation

45

Casing of Props

47

Reactivity

47

Data Flow and the .sync Modifier

48

Custom Inputs and v-model

51

Passing Content into Components with Slots

52

Fallback Content

53

Named Slots

53

Scoped Slots

54

Custom Events

56

Mixins

58

Merging Mixins and Components

60

vue-loader and .vue Files

61

Non-prop Attributes

63

Components and v-for

64

Summary

67

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

Class Binding

69

Inline Style Binding

71

Array Syntax

72

Multiple Values

72

Scoped CSS with vue-loader

72

CSS Modules with vue-loader

73

Preprocessors

74

Summary

74

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

The Tag Name

76

The Data Object

76

Children

78

iv | Table of Contents



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

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

Google Online Preview   Download