Examples of VueJS and Bootstrap working together
This is a set of self-contained examples of using VueJS and Bootstrap together. They are intended to demonstrate basic concepts of VueJS within an attractive, commonly-used UI framework.
No additional build tools are required. All JS is loaded from CDNs. The focus here is on learning VueJS and how it can be applied to existing projects without adopting a new toolchain or throwing out old, working code.
Example 1 - Bootstrap panel rendered with Vue
A basic "hello world"-type example, showing how to instantiate Vue and render of data inside the DOM.
Example 2 - Rendering a list view with v-for
Rendering an array of data into a list view using the v-for directive.
Example 3 - Rendering a sorted list view with computed
Using a computed property to render alphabetically-sorted data without modifying the original array.
Example 4 - Add and delete items in list view dynamically
Adding functionality via methods to add and remove items from an array, and demonstrating the automatic
re-rendering of Vue.
Example 5 - Conditional rendering
Utilize the v-if directive to conditionally render based on the state of the data.
Example 6 - Simple custom component
A simple example of a custom component, allowing for complex custom functionality to be wrapped in HTML-style tags.
Example 7 - Complex custom component, slots
Use a custom component to encapsulate the complex functionality of the editable list group in simple HTML tags.
Demonstrates more complex use of the <slot> tag for "content distribution"
a la Web Components
Example 8 - Loading and saving data using watchers
Building on example 7, we add a watcher to save our list of items every time it changes. We leverage the Store library to load data from and save to localStorage in the browser.
Ed Finkler
coj@funkatron.com
@funkatron