Bibliography

  1. Macrae C. Vue.js: up and running: building accessible and performant web apps. First edition. Sebastopol, CA: O’Reilly Media; 2018. 158 p.

Two-Way Binding

Introduction

If you want to both populate the HTML template with data from the javascript and have the data be updated by what the user does you need to use the v-model attribute in the HTML tag and tell it what variable to update.

The Template

Here we're going to create an input box and populate it with the value saved in the input_text variable in the javascript data (v-model="input_text").

<div id="two-way-binding">
  <input type="text" v-model="input_text">
  <p>Input Text: {{ input_text }}</p>
</div>

In addition, the paragraph below the input will display the value currently held by the input_text variable ({{ input_text }}).

The Vue

Now we just have to create the Vue object with the input_text variable in the data and bind it to the "two-way-binding" div.

<script>
 new Vue({
   el: "#two-way-binding",
   data: {
    input_text: "The Starting Value"
   }
 })
</script>

The Outcome

Here's the rendered template. If you enter text in the box the text below it should change.

Input Text: {{ input_text }}

Source

  • Macrae C. Vue.js: up and running: building accessible and performant web apps. First edition. Sebastopol, CA: O’Reilly Media; 2018. 158 p.

Vue Time Example

Elapsed Seconds: {{ seconds }}

The output above is created by an HTML snippet that looks like this.

<div id="vue-timer-example">
  <p>Elapsed Seconds: {{ seconds }}</p>
</div>

<script>
 new Vue({
   el: '#vue-timer-example',
   data: {
     seconds: 0
   },
   created() {
     setInterval(() => {
       this.seconds++;
     }, 1000);
   }
 });
</script>

Here's what I'm showing here:

  • We're using the seconds variable in the Vue data in the HTML template ({{ seconds }})
  • We're binding the vue object to the HTML div using the id of the div and the el attribute in the Vue object
  • At creation, the created function is setting up a function to increment the seconds variable every second

The setInterval function is a javascript built-in that repeatedly calls a function at a set interval. In this case we're passing it a lambda function that increments the seconds data once every 1,000 milliseconds (so every second).

Vue Data

The HTML

When using vue you need to create an area in the HTML where it can do its thing. The traditional way to do this is to create a <div> with and id of app, but since I'm doing this in a blog there's the likelihood that more than one of them will show up on the same page so I'm going to give this snippet the id of vue-data .

<div id="vue-data">
  <ul>
    <li>{{ message }}</li>
    <li>{{ price }}</li>
  <ul>
</div>

Besides the div you might notice that there are some strange paragraphs with double-braces around them (e.g. {{ messages }}). Thses represent javascript variables that will be replaced by the values they contain when the HTML is rendered. If, for example, the message variable contains the string 'flugzeug', then when the page is rendered you will see flugzeug in the page.

The Javascript

To populate the variables in the HTML we need to create a vue object and populate two attributes:

  • el: points to the HTML element that will contain our output - #vue-data in our example
  • data: holds the variables that will be used in rendering the template
<script>
  const vue_data = new Vue({
    el: '#vue-data',
    data: {
     message: "go away",
     price: 42 + 8
    }
  })
</script>

The Output

Here's the actual HTML that the example creates.

  • {{ message }}
  • {{ price }}

    Vue Test

    Introduction

    This is a test to see if putting vue.js HTML and javascript in nikola will work. Since I've previously used p5.js I assumed that it would, but still, there's always something to figure out.

    The HTML

    This is the HTML that I used for my hello-worldish test.

    listings/posts/vue-test/vue_test.htm (Source)

    <div id="app">
      <p v-if="isMorning"><b>Go away, it's too early!</b></p>
      <p v-if="isAfternoon"><b>Go away, it's time for my nap!</b></p>
      <p v-if="isEvening"><b>Go away, it's too late!</b></p>
    </div>
    
    <script>
      var hours = new Date().getHours();
      new Vue({
         el: "#app",
         data: {
           isMorning: hours < 12,
           isAfternoon: hours >= 12 && hours < 18,
           isEvening: hours >= 18
         }
      });
    </script>
    

    A Little More Explanation

    If you aren't familiar with vue, what the code is doing is on loading the page it checks the numerical representation for the current hour and stores it in a variable named hours:

    var hours = new Date().getHours();
    

    Then it sets one of the variables to true, based on what time of day it is.

    data: {
      isMorning: hours < 12,
      isAfternoon: hours >= 12 && hours < 18,
      isEvening: hours >= 18
    }
    

    Finally, the html outputs a different message depending which of the variable in the data is true.

    <p v-if="isMorning">Go away, it's too early!</p>
    <p v-if="isAfternoon">Go away, it's time for my nap!</p>
    <p v-if="isEvening">Go away, it's too late!</p>
    

    This is about getting vue into nikola, so I won't get into it much more than that.

    The Output

    And here, in all its glory, is the result.

    Go away, it's too early!

    Go away, it's time for my nap!

    Go away, it's too late!

    It might not look like much, mostly because it's not, but the text above is being dynamically generated by Vue.js. So come back in twelve hours and you'll see a different message. Or just take my word for it. Whatever.