You're reading from Full-Stack Vue.js 2 and Laravel 5 Bring the frontend and backend together with Vue, Vuex, and Laravel

Product type Paperback

Published in Dec 2017

Publisher Packt

ISBN-13 9781788299589

Length 376 pages

Edition 1st Edition

Languages

JavaScript

Tools

Laravel

Concepts

Full Stack Web Development

Author (1):

Anthony Gore

View More author details

Basic features

Let's now do a high-level overview of Vue's basic features. If you want, you can create an HTML file on your computer like the following one, open it in your browser, and code along with the following examples.

If you'd rather wait until the next chapter, when we start working on the case-study project, that's fine too as our objective here is simply to get a feel for what Vue can do:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hello Vue</title>
</head>
<body>
  <!--We'll be adding stuff here!-->
</body>
</html>

Installation

Although Vue can be used as a JavaScript module in more sophisticated setups, it can also simply be included as an external script in the body of your HTML document:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

Templates

By default, Vue will use an HTML file for its template. An included script will declare an instance of Vue and use the el property in the configuration object to tell Vue where in the template the app will be mounted:

<div id="app">
  <!--Vue has dominion within this node-->
</div>
<script>
  new Vue({
    el: '#app'
  });
</script>

We can bind data to our template by creating it as a data property and using the mustache syntax to print it in the page:

<div id="app">
  {{ message }}
  <!--Renders as "Hello World"-->
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello World'
    }
  });
</script>

Directives

Similar to Angular, we can add functionality to our templates by using directives. These are special properties we add to HTML tags starting with the v- prefix.

Say we have an array of data. We can render this data to the page as sequential HTML elements by using the v-for directive:

<div id="app">
  <h3>Grocery list</h3>
  <ul>
    <li v-for="grocery in groceries">{{ grocery }}</li>
  </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      groceries: [ 'Bread', 'Milk' ]
    }
  });
</script>

The preceding code renders as follows:

<div id="app">
  <h3>Grocery list</h3>
  <ul>
    <li>Bread</li>
    <li>Milk</li>
  </ul>
</div>

Reactivity

A key feature of Vue's design is its reactivity system. When you modify data, the view automatically updates to reflect that change.

For example, if we create a function that pushes another item to our array of grocery items after the page has already been rendered, the page will automatically re-render to reflect that change:

setTimeout(function() {
  app.groceries.push('Apples');
}, 2000);

Two seconds after the initial rendering, we see this:

<div id="app">
  <h3>Grocery list</h3>
  <ul>
    <li>Bread</li>
    <li>Milk</li>
    <li>Apples</li>
  </ul>
</div>

Components

Components extend basic HTML elements and allow you to create your own reusable custom elements.

For example, here I've created a custom element, grocery-item, which renders as a li. The text child of that node is sourced from a custom HTML property, title, which is accessible from within the component code:

<div id="app">
  <h3>Grocery list</h3>
  <ul>
    <grocery-item title="Bread"></grocery-item>
    <grocery-item title="Milk"></grocery-item>
  </ul>
</div>
<script>
  Vue.component( 'grocery-item', { 
    props: [ 'title' ],
    template: '<li>{{ title }}</li>'
  });

  new Vue({
    el: '#app'
  });
</script>

This renders as follows:

<div id="app">
  <h3>Grocery list</h3>
  <ul>
    <li>Bread</li>
    <li>Milk</li>
  </ul>
</div>

But probably the main reason to use components is that it makes it easier to architect a larger application. Functionality can be broken into reuseable, self-contained components.

You're reading from Full-Stack Vue.js 2 and Laravel 5 Bring the frontend and backend together with Vue, Vuex, and Laravel

Table of Contents (11) Chapters

Basic features

Installation

Templates

Directives

Reactivity

Components

Authors (1)

Other recommended products

Personalised recommendations for you