Vuejs Kenya

Appearance

Welcome to Vue.js! 🎉 ​

You're about to create your very first Vue.js application! Don't worry if you're new to this - we'll walk through everything step by step. By the end of this project, you'll have a working Vue app that you built yourself.

What is Vue.js? ​

Think of Vue.js like a magical tool that makes websites interactive. Instead of writing complicated code to update your webpage, Vue automatically updates things for you when your data changes. Pretty cool, right?

What You'll Learn Today ​

  • How to add Vue.js to any webpage (it's just one line!)
  • How to create your first interactive Vue app
  • How to display information on your webpage
  • The basic building blocks of every Vue application

Let's Start Simple - No Downloads Needed ​

The easiest way to try Vue is by adding just one line to your HTML file. No downloads, no installations, no complicated setup!

Step 1: Add Vue to Your HTML ​

Just add this line to your HTML file:

html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Think of this like borrowing Vue from the internet. The website unpkg.com will give us Vue whenever we need it.

Step 2: Your Complete First App ​

Here's a complete working example (this is the exact code from Vue's official website):

html
<!DOCTYPE html>
<html>
<head>
    <title>My First Vue App</title>
</head>
<body>
    <!-- Step 1: Include Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- Step 2: Create a place for your app -->
    <div id="app">{{ message }}</div>

    <!-- Step 3: Write your Vue code -->
    <script>
      const { createApp, ref } = Vue

      createApp({
        setup() {
          const message = ref('Hello vue!')
          return {
            message
          }
        }
      }).mount('#app')
    </script>
</body>
</html>

Understanding Your Code (Don't Panic!) ​

Let's break this down into simple pieces:

The HTML Part ​

html
<div id="app">{{ message }}</div>
  • This creates a container with id="app" where your Vue app will live
  • The part is like a placeholder that says "put the message here"
  • Those double curly braces are Vue's way of saying "show some data here"

The JavaScript Part ​

javascript
const { createApp, ref } = Vue
  • This line gets the tools we need from Vue
  • Think of it like taking tools out of a toolbox
javascript
createApp({
  setup() {
    const message = ref('Hello vue!')
    return {
      message
    }
  }
}).mount('#app')
  • createApp() creates a new Vue application
  • setup() is where we put our app's data and logic
  • ref('Hello vue!') creates a piece of reactive data (more on this below!)
  • return { message } makes the message available to use in our HTML
  • .mount('#app') tells Vue to take control of the element with id="app"

What Does "Reactive" Mean? ​

Here's the magic: when you use ref() to create data, Vue watches it. If the data changes, Vue automatically updates your webpage! You don't have to write any extra code.

Try this: change 'Hello vue!' to 'I love Vue!' and refresh your page. See how it updated automatically?

Let's Experiment! 🧪 ​

Try #1: Change the Message ​

Replace 'Hello vue!' with your own message:

javascript
const message = ref('Vue is awesome!')

Try #2: Add More Data ​

javascript
setup() {
  const message = ref('Hello vue!')
  const name = ref('Your Name Here')
  const age = ref(25)
  
  return {
    message,
    name,
    age
  }
}

And in your HTML:

html
<div id="app">
  <h1>{{ message }}</h1>
  <p>My name is {{ name }}</p>
  <p>I am {{ age }} years old</p>
</div>

Try #3: Do Some Math ​

You can even do calculations inside the :

html
<div id="app">
  <p>{{ message }}</p>
  <p>Next year I'll be {{ age + 1 }} years old</p>
  <p>2 + 2 = {{ 2 + 2 }}</p>
</div>

Key Things to Remember ​

  1. The Magic Brackets: tell Vue where to display your data
  2. The ref() Function: Makes your data reactive (automatically updates the page)
  3. The Return Statement: Don't forget to return your data so Vue can use it
  4. The Mount: .mount('#app') connects your Vue app to your HTML

What We Just Accomplished! 🎯 ​

Congratulations! You just:

  • ✅ Created your first Vue.js application
  • ✅ Learned how to display data on a webpage
  • ✅ Made data reactive (it updates automatically!)
  • ✅ Used Vue's template syntax with {{}}

Fun Challenges to Try ​

  1. Personal Info: Create a simple profile with your name, favorite food, and hobby.
  2. Math Helper: Make a simple app that shows 2 x 3 = {{ 2 * 3 }}.
  3. Greeting Card: Make a birthday message with someone's name and age.
  4. Word Games: Try {{ message.toUpperCase() }} to make text ALL CAPS.

Don't Worry If ​

  • The code looks confusing at first - that's totally normal!
  • You need to read this multiple times - everyone learns at their own pace
  • You make typos - we all do, and that's how we learn!

What's Next? ​

In the next project, we'll learn how to make your Vue app truly interactive. You'll be able to type in a text box and see your webpage update in real-time. It's going to be amazing!

Need Help? ​

If something isn't working:

  1. Check for typos (very common!)
  2. Make sure your file is saved
  3. Try refreshing your browser
  4. Look at the browser's console for error messages (press F12)

You've got this! Every Vue developer started exactly where you are now. 🚀