Vue 2: Hello World

Welcome to the Vue.js Fundamentals Lab! This hands-on experience is designed to walk you through several core concepts of Vue.js, from rendering data to the DOM, to handling events and managing reactivity.

The Vue Instance

Before diving into the challenges, understand that Vue.js revolves around the concept of a Vue instance. You will be initializing a Vue instance using new Vue(), and this instance will serve as the root of your Vue-powered functionality.

const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

Data Rendering and Directives

Vue.js makes it straightforward to render data into the DOM. You'll be using Vue directives like v-bind for binding attributes, and v-for for rendering lists.

<span v-bind:title="message">Hover your mouse over me for a few seconds to see my dynamically bound title!</span>

Methods and Event Handling

Methods can be defined on the Vue instance and used for various tasks, including event handling. You'll be using the v-on directive to listen to DOM events and execute methods in response.

<button v-on:click="doSomething">Click me</button>

Computed Properties and Watchers

Vue.js also provides more elegant ways to react to data changes through computed properties and watchers. Computed properties are reactive and update automatically when any of their dependencies change.

computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

The Virtual DOM

Vue uses a virtual DOM to update the UI efficiently. You won't be directly interacting with this feature, but it's essential for understanding how Vue optimizes rendering and keeps your application fast.

Async Updates

Sometimes you may need to wait for Vue to complete its updates. For that, Vue.nextTick can be useful, especially in tests and specific situations requiring DOM manipulation after data changes.

Challenges Instructions

  1. Initialize a Vue Instance: Create a Vue instance and attach it to an HTML element with the id app. Inside the data object of your Vue instance, define a property called message with the initial value of "Hello, Vue!". Make sure your Vue instance is accessible globally as window.vm.

    Constraints:

    • Vue instance must be accessible as window.vm.
    • message property must be initialized to "Hello, Vue!".

  2. Create a Button to Update message: Add a button element to your HTML with the label "Update Message". When clicked, this button should change the message property in your Vue instance to "Updated!".

    Constraints:

    • Button must have the label "Update Message".
    • Clicking the button must change message to "Updated!".

  3. Display the Message: Use Vue's interpolation to display the value of message inside a paragraph tag. Give this paragraph tag an id of display-message.

    Constraints:

    • Message must be displayed in a paragraph tag with id display-message.
TerminalEditorBrowser