The following is an exercise to introduce you to Vue.js and some of its features.

Vue.JS is an open-source progressive JavaScript framework used to simplify the development of interactive web interfaces. It is similar in many ways to React and Angular

Can you find out how Vue.js differs from React or Angular?

Each framework has it’s own benefits what they are best used for.

You will need a basic knowledge of HTML, CSS, and JavaScript prior to proceeding. If you want a quick reminder you can go to W3Schools.

You will also need any text editor such as Visual Studio Code, ATOM or Sublime. I will wait here while you download and install that.

...

You are ready to start the exercise!

1. Turn the person on your left and/or right and introduce yourself. This is a meet up group after all!
2. Clone a copy of the Hello Vue app from github.com/codersuk.
3. Download the development version of Vue.js and store it in your project folder.
4. Open the cloned folder and double click index.html. You should see Hello Vue in your browser.

You can find the reference to the syntax at vuejs.org.

5. Now add a button to the app
6. Create a method that reverses the message string when the button is clicked. Note: Use the v-on directive to attach an event listener that invokes a method on our Vue instances.
7. Make the text box directly change the message in real-time.

Great job! Now lets create a webpage that puts many elements together.

Now we are going to create an interactive webpage by creating a to-do list. You can modify the app that you just built or start from scratch.

8. Create an app that has an input field and a button.

When a user fills out the input field and hits the button, the list should display the newly added item. In order to make your app more robust, add the following:

9. When the input field is blank, clicking the button should not add items to the list.
10. Store the list in an array.
11. When the input field has text inside and the user hits the button, clear the field.
12. Add a clear all button to reset the page.
13. Add a remove button for each item in the list.
14. Can you think of any ways to improve the To-Do list website?
15. Go meet the others around you to see what they built. If you see something that you have not done before, ask them how they did it!

If you made it all the way to the end, bravo!

• What other website ideas can you think of?
• Ask others what they have built in their spare time or what they do for work.