vuejs
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
4. List Rendering<br />
In the third chapter of this book, we are going to learn about list rendering. Using Vue’s directives<br />
we are going to demonstrate how to:<br />
1. Render a list of items based on an array.<br />
2. Repeat a template.<br />
3. Iterate through the properties of an object.<br />
4. Filter an array of items.<br />
5. Order an array of items.<br />
6. Apply a custom filter to a list.<br />
4.1 Install & Use Bootstrap<br />
To make our work easier on the eye, we are going to import Bootstrap.<br />
Info<br />
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,<br />
mobile first projects on the web.<br />
Head to http://getbootstrap.com/¹ and click the download button. For the time being, we’ll just use<br />
Bootstrap from the CDN link² but you can install it any way that suits your particular needs. For<br />
our example we need only one file, for now: css/bootstrap.min.css. When we use this .css file<br />
in our app, we have access to all the pretty structures and styles. Just include it within the head tag<br />
of your page and you are good to go.<br />
Bootstrap requires a containing element to wrap site contents and house our grid system. You may<br />
choose one of two containers to use in your projects. Note that, due to padding and more, neither<br />
container is nestable.<br />
• Use .container for a responsive fixed width container.<br />
… <br />
• Use .container-fluid for a full width container, spanning the entire width of your viewport.<br />
… <br />
¹http://getbootstrap.com/<br />
²https://www.bootstrapcdn.com/<br />
20