Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Vue.js Quick Start Guide

You're reading from   Vue.js Quick Start Guide Learn how to build amazing and complex reactive web applications easily using Vue.js

Arrow left icon
Product type Paperback
Published in Oct 2018
Publisher Packt
ISBN-13 9781789344103
Length 186 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Ajdin Imsirovic Ajdin Imsirovic
Author Profile Icon Ajdin Imsirovic
Ajdin Imsirovic
Arrow right icon
View More author details
Toc

Table of Contents (10) Chapters Close

Preface 1. Introducing Vue 2. Basic Concepts of Vue 2 FREE CHAPTER 3. Working with Vue-CLI, Components, Props, and Slots 4. Filters and Mixins 5. Making Your Own Directives and Plugins 6. Transitions and Animations 7. Using Vuex 8. Using Nuxt.js and Vue-Router 9. Other Books You May Enjoy

Understanding components, templates, and props

To begin, let's look at how to make a component in Vue. First, we specify the component, like this:

Vue.component('custom-article', {
template: `
<article>
Our own custom article component!<span></span>
</article>`
})
new Vue({
el: '#app'
})

A component is a block of code that we give a custom name. This custom name can be anything we come up with, and it's a single label for that entire block of code in the form of a custom HTML tag. In the previous example, we grouped the article and span tags and gave that custom tag the name of custom-article. 

Components are named using kebab-case.

The code for this component is available as a Codepen at https://codepen.io/AjdinImsirovic/pen/xzpOaJ.

Now, to create an instance of our component...

You have been reading a chapter from
Vue.js Quick Start Guide
Published in: Oct 2018
Publisher: Packt
ISBN-13: 9781789344103
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at â‚ą800/month. Cancel anytime