Vue Native basics

Information

Unless you're 100% confident with Vue Native already, complete the tasks at the bottom of this page before moving on to the labs. Ask the teacher if you need help!

Note
If you get an error like running scripts is disabled on this system, you need to set your machines excecution policy by opening PowerShell as an administrator and run this command: Set-ExecutionPolicy -ExecutionPolicy RemoteSigned. Press A for Yes to all when it asks you to.

Course Prerequisities

This course will rely on basic knowledge about

• HTML
• Javascript
• CSS
• Node / npm

Make sure you're up to date on these by watching the previous lectures

Todays lecture

• How to install Vue (as shown here)
• Basic Components (as shown here)
• Conditionals & Loops (as shown here)
• Composing with components (as shown here)

Misc links

• Presentation.pdf
• Install Node
• Install, start & run Vue Native
  • Follow the instructions for Expo Users here
  • Continue with the instructions for components here

Introduction courses

Watch these lectures if you need a refresher on HTML, CSS and Javascript

• HTML
• CSS
• Frameworks
• Javascript
• Node.js
• npm

Excercise

Unless you're 100% confident with Vue Native already, complete these tasks before moving on to the labs

1. Install Node.js, npm, expo and vue CLI
2. Create a new project called Excercise 1
3. Add the following components
   • A text view containing your name
   • An empty text input
   • An image of yourself
   • A button with the title Update name
   • A button with the title Hide your face
4. Add a press-event on the Update name button that updates the contents of the name component to show the contents of the text input
5. Add a press-event on the Hide your face button that toggles (hides/shows) the image of you
6. Add a custom component that contains a button with a red border (use a touchable-opacity for this) called CustomButton.vue
7. Add an array of 3 texts and use v-for to show all 3 texts as buttons using the CustomButton.vue component