Vue.js Basics

Vue (Pronounced like 'view') is a JavaScript progressive framework that is made primarily for creating user interfaces in an incremental fashion....

a year ago

Latest Post Automatic Offline Backup With a Raspberry Pi by Tyler Moon

Vue (Pronounced like 'view') is a JavaScript progressive framework that is made primarily for creating user interfaces in an incremental fashion. On its own, the Vue core library is focused only on the view layer which can be easily integrated with other libraries and existing projects. Vue is also perfectly capable of making sophisticated web applications if combined with modern tooling and some supporting libraries.

Note: For a more in-depth introduction on Vue.js check out this awesome Scrimba course

For this example, we are going to setup the simplest set up for using some of the basic Vue.js elements and concepts.

Prerequisites

Setup

For this project, we are going to need three files. One HTML file and two JavaScript files are all that is needed.

touch index.html components.js vue.js

And that is pretty much it for this example setup. We are going to load the Vue.js library from the CDN so there is nothing to download.

HTML

Add the following HTML to the index.html file.

<!-- index.html -->
<html>
  <head>
    <!-- Load Vue.js core library from the CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Load the bootstrap styling -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <!-- Source the components Vue file -->
    <script src="components.js"></script>
    <div style="height:100px;"></div>
    <!-- App component for loading Vue template into -->
    <div id="app" class="container">
      <!-- Example of a message being displayed -->
      <h1>{{ message }}</h1>

      <br/><br/>
      <hr>
      <h2>Loops</h2>
      <ol>
        <!-- Example of a Vue foreach loop -->
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>

      <br/><br/>
      <hr>
      <h2>User Interaction</h2>
      <p>{{ revMessage }}</p>
      <!-- Example of handling user input -->
      <button v-on:click="reverseMessage" class="btn btn-success">Reverse Message</button>

      <br/><br/>
      <hr>
      <h2>Two Way Binding</h2>
      <!-- Example of two way data binding -->
      <p>{{ twoWayBindingMessage }}</p>
      <input v-model="twoWayBindingMessage">

      <br/><br/>
      <hr>
      <h2>Components</h2>
      <!-- Example of loading a custom component -->
      <todo-item></todo-item>
    </div>
  </body>
<script src="vue.js"></script>
</html>

This HTML lays out examples of how to do:

Combining these basic components together with various styling can create responsive, modern, slick user interfaces!

Vue.js

Add the following to the components.js file.

// components.js

// Setup a custom element 'todo-item'
Vue.component('todo-item', {
  // What to render in-place of the <todo-item></todo-item> tag
  template: '<li>This is a todo</li>'
})

Using components allows Vue applications to be broken up and composed of small, self-contained, and reusable components.

Add the following to the vue.js file.

// vue.js

new Vue({
  // element to inject Vue into
  el: '#app',
  data: {
    // message variable that replaces the {{ message }} in index.html
    message: 'Hello Vue.js!',
    // Array for the foreach loop example
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ],
    // variable for the reverse example in the user input section
    revMessage: 'Hellooooo',
    // variable for the two way binding example which can be changed by editing the input field
    twoWayBindingMessage: 'Example of two way binding!'
  },
  methods: {
    // Method called by the reverse message button
    reverseMessage: function() {
      this.revMessage = this.revMessage.split('').reverse().join('')
    }
  }
})

This class sets up all the data needed to populate the {{}} elements in the index.html file.

And now you should be able to open up the index.html file in your browser of choice and view the simple wonders of Vue.js!

Example of Vue.js components in action

Summary

In this example, we saw how to inject Vue.js components into an HTML file to add some interactivity and modern features. These components can be added to an existing project or used to create a modern web application from scratch.

Tyler Moon

Published a year ago

Comments?

Leave us your opinion.