https://github.com/funkatron/vueandbootstrap
Examples of VueJS and Bootstrap working together
https://github.com/funkatron/vueandbootstrap
bootstrap bootstrap3 vuejs vuejs2
Last synced: 10 months ago
JSON representation
Examples of VueJS and Bootstrap working together
- Host: GitHub
- URL: https://github.com/funkatron/vueandbootstrap
- Owner: funkatron
- License: apache-2.0
- Created: 2017-07-20T13:37:06.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-21T17:32:08.000Z (almost 9 years ago)
- Last Synced: 2025-09-01T21:43:56.411Z (10 months ago)
- Topics: bootstrap, bootstrap3, vuejs, vuejs2
- Language: HTML
- Size: 20.5 KB
- Stars: 15
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VueAndBootstrap
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](./Example%201) - 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](./Example%202) - Rendering a list view with `v-for`
Rendering an array of data into a list view using the [`v-for` directive](https://vuejs.org/v2/guide/list.html).
## [Example 3](./Example%203) - Rendering a *sorted* list view with `computed`
Using a [`computed` property](https://vuejs.org/v2/guide/computed.html) to render alphabetically-sorted data without modifying the original array.
## [Example 4](./Example%204) - Add and delete items in list view dynamically
Adding functionality via [`methods`](https://vuejs.org/v2/guide/events.html#Method-Event-Handlers) to add and remove items from an array, and demonstrating the automatic
re-rendering of Vue.
## [Example 5](./Example%205) - Conditional rendering
Utilize the [`v-if` directive](https://vuejs.org/v2/guide/conditional.html) to conditionally render based on the state of the data.
## [Example 6](./Example%206) - Simple custom component
A simple example of a [custom component](https://vuejs.org/v2/guide/components.html), allowing for complex custom functionality to be wrapped in
HTML-style tags.
## [Example 7](./Example%207) - Complex custom component, slots
Use a [custom component](https://vuejs.org/v2/guide/components.html) to encapsulate the complex functionality of the editable list group in simple HTML tags.
Demonstrates more complex use of the [`` tag](https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots) for "content distribution"
a la [Web Components](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md)
## [Example 8](./Example%208) - Loading and saving data using watchers
Building on example 7, we add a [watcher](https://vuejs.org/v2/guide/computed.html#Watchers) to save our list of items every time it changes. We leverage the [Store library](https://github.com/nbubna/store)
to load data from and save to localStorage in the browser.
----
Ed Finkler
[@funkatron](https://twitter.com/funkatron)