Vue.js examples

A small collection of simple experiments created when learning Vue.js.
Minimal effort made to make them look good and not in any way to be considered good examples of how things should be done!

1. A simple repeating layout built using parent/child components
   First attempt at creating parent/child components. Data props passed down through each level. No events.
   4 components used: simple-title, simple-image, simple-description and a wrapper component simple-card.
2. Retrieve json-formatted data via Ajax, display and filter/move
   Retrieves data via Ajax and displays it in a table format. Data can be filtered / re-ordered / added / deleted.
   Uses the Axios library for Ajax and v-cloak to prevent "screen flicker" before the ajax data is loaded.
3. Generate a list of items and allow it to be copied to the clipboard
   Work-in-progress for a larger project. This templates displays a list of 'items' (presently just random numbers, as the content is not important for getting this functionality to work). More items can be added and existing ones removed from the list or the list completely refreshed. The list may also be copied to the clipboard.
   One peculiarity: if e.g. 5 items are in the list and the 'Generate 10 Items' button is pressed then 5 new items are added i.e. the original 5 still remain. Similarly, clicking 'Generate 1 Item' would remove all but the original 1st item.
4. Generate a list of CUIDs and allow it to be copied to the clipboard
   Work-in-progress for a larger project. This is based on the previous example but it now generates CUIDs instead of random numbers. To do this it uses the in-browser version of Eric Elliott's library.
   From a Vue.js point-of-view there is not much difference between this and the previous version except that the buttons are now disabled when clicked.
   This doesn't make a lot of sense with the current interface but might when the layout is changed.
5. A minimal custom filter
   A very simple custom filter that takes a string and performs some trivial manipulation of it.
6. A minimal custom filter and a minimal method compared
   The simple custom filter from example (5) and a method that does exactly the same thing.
7. Chaining of custom filters compared with the method version
   The simple custom filter example from (6) expanded to illustrate that multiple custom filters can be chained and this results in much cleaner looking code than the function-based equivalent.
   Also shows that a custom filter and a method can both have the same name without conflicting (not that this is a good idea).
8. <template> tags
   The parent/child components from (1) but with the layouts defined within <template></template> tags.
9. <template> tags with a child to parent event
   The <template> components from (8) with an emitted event.
   A new child component - simple-actionbar - displays a text link 'LIKE'. When this is clicked, simple-actionbar $emits an event which is being listened for in the parent, simple-card. To show that it has received the $emit, via v-on, the parent displays a Javascript alert.