Book Image

The Majesty Of Vue.js

By : Alex Kyriakidis, Kostas Maniatis
Book Image

The Majesty Of Vue.js

By: Alex Kyriakidis, Kostas Maniatis

Overview of this book

<p>Vue.js is a library to build interactive web interfaces. The aim is to provide the benefits of reactive data binding and composable view components with an API that is as simple as possible.</p> <p>This book will teach you how to efficiently implement Vue.js in your projects. It starts with the fundamentals of Vue.js to building large-scale applications. You will find out what components, filters, methods, and computed properties are and how to use them to build robust applications.</p> <p>Further on, you will become familiar with ES6, single file components, module bundlers, and workflow automation. The best way to learn to code is to write it, so there’s an exercise at the end of most of the chapters for you to solve and actually test yourself on what you have learned. You can solve these in order to gain a better understanding of Vue.js.</p> <p>By the end of this book, you will be able to create fast front-end applications and increase the performance of your existing projects with Vue.js integration.</p>
Table of Contents (23 chapters)
The Majesty of Vue.js
Credits
About the Authors
www.PacktPub.com
Preface
2
Getting Started
8
Consuming an API – Preface
12
ECMAScript 6
15
Swapping Components
18
Closing Thoughts

Installing and using Bootstrap


To make our work easier on the eye, we are going to import Bootstrap.

Note

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Head to http://getbootstrap.com/ and click on the Download Bootstrap button. For the time being, we'll just use Bootstrap from the CDN link (https://www.bootstrapcdn.com/) but you can install it in any way that suits your particular needs. For our example we need only one file, for now: css/bootstrap.min.css. When we use this .css file in our app, we have access to all the pretty structures and styles. Just include it within the head tag of your page and you are good to go.

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

  • Use .container for a responsive fixed width container:

      <div class=”container...