Vue

by Ganesh_Babu_469

HTML

<div id="app2" >
<!-- <h1 v-once="msg">
{{msg}}
</h1>
 <p>
 {{sayHello()}} - <a :href="link">google</a>
 </p>
 <hr>
 <p v-html="finishedLink"></p> -->
 <button v-on:click="increase">increase</button>
 <p>
 {{counter}}
 </p>
 <p @mousemove="updateCoordiantes">Coordiantes - {{x}}/ {{y}} - <span @mousemove.stop="">DEAD</span></p>
 <input type="text" @keyup.enter.space="showAlert">
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

#app2{
  background: white;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
el: '#app2',
data: function(){
return {
msg: 'welcome to Vue',
link: 'http://google.com',
finishedLink: '<a href="http://google.com">google</a>',
counter:0,
x:0,
y:0
}
},
methods: {
sayHello: function(){
return this.msg +'awesome.'
},
increase: function(){
 this.counter++;
},
updateCoordiantes: function(event){
this.x = event.clientX;
this.y = event.clientY;
},
showAlert: function(){
alert('clicked')
}
}
})