Getting Started with Vue.js

Hello World

For our hello world, we'll be looking at how we can take in <input> and change text whenever that <input> is used.

We'll be looking at three different ways to update text:

  • vanilla JavaScript
  • jQuery
  • Vue

By using these three techniques, we'll see how Vue is an improvement and why we should use it.

Here's our HTML for this demo:

<section id="app" class="section container">
    <h1 class="title">My Text Goes Here</h1>

    <input type="text" class="input">

Vanilla JavaScript

Here's how we can listen to the input in vanilla JavaScript and update the h1 tag when typing occurs:

const heading = document.querySelector('h1');
const input   = document.querySelector('input');

// listen to the input box for typing
input.addEventListener('keyup', (e) => {
  const text       =;
  heading.innerText = text;


Here's the code in jQuery. While it is very simple and a 1-liner, it can be hard to scale, especially when changing variable names or the target elements.

$('input').on('keyup', (e) => $('h1').text(;


Here's our full code in Vue. Vue makes the job of updating the text extremely organized and simple to reason about. This is one of the main benefits of Vue: organization and readable code.

<section id="app" class="section container">
    <h1 class="title">
        Hi my name is {{ name }} and my message is: {{ message }}      

    <input type="text" class="input" v-model="name">
    <input type="text" class="input" v-model="message">
const app = new Vue({
    el: '#app',
    data: {
        name: 'Chris',
        message: 'hello world'

Like this article? Follow @chrisoncode on Twitter