| Interactive Media Design

Getting Started with Vue

Vueopen in new window is a JavaScript framework that is approachable, flexible, and powerful. It is also a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Installation

The easiest way to install Vue into a web project is to include it will the <script> just like you would other JavaScript libraries like jQuery. There are also two different versions of Vue, a production version, which has been compressed and minified, and a development version, which adds additional debugging features. While it is possible to download Vue to your local project, it is common practice to just use a CDN.

Below is the code for including the development version of Vue to your web project.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Add this code to an HTML page, right before closing </body> tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue</title>
</head>
<body>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>









 


Now that the element is created, the next step is to create the Vue instance.

Declarative Rendering

Once the Vue framework has been added to an HTML page, the next step is to create a Vue instance. Inside of a <script></script> add the following code to create a Vue Instance.

const app = new Vue()

The Vue instance takes an object as an argument. The object should contain two properties: el and data. The el property is a CSS selector representing the DOM element to which the Vue instance will be attached. The data property is an object containing the application data, which can be used by the Vue instance.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue</title>
</head>
<body>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      }
    })
  </script>
</body>
</html>










 
 
 
 
 
 
 
 


With the Vue instance created, the HTML will now become a simple, straightforward template for Vue. This template will exist inside of the attached element, and the data and the DOM will now be linked. To display the data on the page, interpolation can be used. In Vue, interpolation is accomplished using the mustache syntax.

::: v-pre {{ ... }} :::

Any expression, including the data properties in the Vue instance, can be placed between the mustache syntax. The resulting value of this expression will be displayed on the page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue</title>
</head>
<body>

  <div id="app">{{ message }}</div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      }
    })
  </script>
</body>
</html>









 












Attribute Binding

Interpolation works well for displaying content between tags, but if values need to be added attributes, the mustache syntax will not work. Instead, attribute binding must be used. Attribute binding is accomplished by using the v-bind directive.

In Vue, a directive is a special attribute added to an element that Vue is used to apply reactive behavior. All directive begin with v-, however, many directives have shorthands, which are more commonly used.

The v-bind directive is used with any standard HTML attribute (e.g. href, src) to bind the attribute with a data property in the Vue instance. From the example above, the text could be converted to a link, which will retrieve the href from the data property.

Once an attribute is bound, the value of the attribute must be a JavaScript expression. In the example below, the word link refers to the data.link of the Vue instance.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue</title>
</head>
<body>

  <div id="app">
    <a v-bind:href="link">{{ message }}</a>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!',
        link: 'https://vuejs.org/'
      }
    })
  </script>
</body>
</html>









 
 
 







 





TIP

The shorthand for the v-bind directive is just :.

<a :href="link">{{ message }}</a>