Skip to Main Content
Jump Start Vue.js
book

Jump Start Vue.js

by Nilson Jacques
February 2019
Beginner to intermediate content levelBeginner to intermediate
146 pages
1h 58m
English
SitePoint
Content preview from Jump Start Vue.js

Chapter 3: Components

As we briefly touched on in Chapter 1, Vue was designed for creating component-based UIs. The idea is that you can structure your application around self-contained, reusable elements that represent a discrete part of the interface.

One example of this might be an Avatar component that displays a user’s profile picture as a circular image. Once created, this component can be dropped into your application code anywhere you want to display the user’s avatar:

<div class="sidebar">
  <avatar :src="user.image" />
  <h2>{{ user.nick }}</h2>
</div>

As you can see in the above example, using a Vue component in your templates is like having a new HTML element available: you use the component’s name as the tag (<avatar>, in this case) ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Jump Start Vue.js, 2nd Edition

Jump Start Vue.js, 2nd Edition

Nilson Jacques
Pro Vue.js 2

Pro Vue.js 2

Adam Freeman
Beginning Vue.js

Beginning Vue.js

Gary Jennings, Andrea Passaglia

Publisher Resources

ISBN: 9781492071303Errata Page