Vue.js Test I

index.html

<div id="app">
  <h2>{{ title }}</h2>
  <p>
    <span class= "bordered">
      {{ count }}
    </span>
    &nbsp;&nbsp;&nbsp;
    <button v-on:click="count += 10">
      + 10
    </button>
    &nbsp;&nbsp;&nbsp;
    <button v-on:click="inc" v-bind:title="incto">
      + 1
    </button>
    &nbsp;&nbsp;&nbsp;
    <button v-on:click="dec" v-bind:title="decto" v-if="can_dec">
      - 1
    </button>
    &nbsp;&nbsp;&nbsp;
    <button v-if="count > 9" v-on:click="count -= count > 9 ? 10 : 0">
      - 10
    </button>
  </p>
</div>

script.typescript

const app = new Vue(
  {
    el: "#app",
    data: {
      title: "My first Vue App",
      count: 0,
    },
    methods: {
      inc: function(ev) {
        this.count++;
      },
      dec: function(ev) {
        if (this.count > 0) {
          this.count--;
        }
      },
    },
    computed: {
        incto: function() {return `Increment to ${this.count + 1}`;},
        decto: function() {return `Decrement to ${this.count > 0 ? this.count - 1 : 0}`;},
        can_dec: function() {
          return this.count > 0;
        },
      }, 
  }
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

style.css

body {
  padding-left: 15px;  
}

h2 {
  color: #c04;
  font-family: "Monospace";
  font-weight: bold;
  margin-bottom: 0.75rem;
}

.bordered {
  border: 1px solid blue;
  padding: 0.5rem;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />

vue-test-i.markdown

Vue Test I

Minimal vue implementation, showing rendering of data, use of methods to transform that data, and method binding to dom events. The view shows a counter which can be incremented or decremented by clicking the proper buttons.

A Pen by Domingo E. Savoretti on CodePen.

License.