VueJS 2.0 - Getting Started

Our first VueJS 2.0 Steps

by smax

HTML

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

<div id="app">
  <h1 v-once>{{ title }}</h1>
  <h1>{{ title }}</h1>
  <div v-html="tooltip"></div>
  <button v-on:click="changeIt" :disabled="disable">Change it!</button>
  <hr>
  <div style="width: 100px; height: 100px; background-color: red"
    v-on:click="showCoordinates('The Coordinates are: ', $event)"
  >
    <div style="width: 30px; height: 30px; background-color: yellow"
      @click.stop="changeIt" v-on:mouseenter="counter++"
    >
      {{ counter }}
    </div>
    <p>{{ x }} | {{ y }}</p>
  </div>
  <input type="text" v-on:keyup.enter.space="submitted">
  <hr>
  <input type="text" v-model="name">
  <p>{{ name.length > 3 ? 'Very long' : 'Short' }}</p>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	title: 'Getting Started!',
    tooltip: '<h3>Some Tooltip</h3>',
    disable: false,
    x: '',
    y: '',
    name: 'Max',
    counter: 0
  },
  methods: {
  	changeIt: function() {
    	this.title = 'Changed!';
      this.disable = true;
    },
    showCoordinates: function(message, event) {
    	this.x = event.clientX;
      this.y = event.clientY;
      alert(message + this.x + ', ' + this.y);
    },
    submitted: function() {
    	alert('Submitted!');
    }
  }
});