VladikOtez

Vue sample

Jun 8th, 2017
164
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <body>
  2. <div id="app">
  3.    <button v-on:click="increase(4)">Click</button>
  4.     <button v-on:click="counter++">Click</button>
  5. <p>{{ counter > 10 ? 'Greater than 10' : 'Lower than 10' }}</p>
  6.     <p v-on:mousemove="updateCoordinates">
  7.         Coordinates {{x}}|{{y}}- <span v-on:mousemove.stop="">DEAD SPOT</span>
  8.     </p>
  9.     <input type="text" v-on:keyup.enter.space="alertMe">
  10. </div>
  11. <script>
  12.     new Vue({
  13.        el: '#app',
  14.         data: {
  15.             counter: 0,
  16.             x: 0,
  17.             y: 0
  18.         },
  19.         methods: {
  20.            increase: function(step){
  21.                this.counter += step;
  22.            },
  23.            updateCoordinates: function(event){
  24.                this.x = event.clientX;
  25.                this.y = event.clientY;
  26.            },
  27.             alertMe: function () {
  28.                alert('Alert');
  29.             }
  30.         }
  31.     });
  32. </script>
  33. </body>
RAW Paste Data