tyrel/learnin-some-vue
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

s2e22 two way binding

Browse Source
This commit is contained in:
Tyrel Souza 2018-04-13 14:16:15 -04:00
parent 36812b72c4
commit be0ddd00f0
No known key found for this signature in database
GPG Key ID: 5A9394D4C30AEAC0
2 changed files with 3 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app.js
View File

@ -1,20 +1,6 @@
var app = new Vue({ var app = new Vue({
el: '#app', el: '#app',
data: { data: {
counter: 0, name: "Tyrel"
x: 0,
y: 0,
}, },
methods:{
increase(step, event){
this.counter+= step;
},
updateCoordinates(event){
this.x = event.clientX;
this.y = event.clientY;
},
alertMe(event){
alert(event.target.value);
}
}
}) })

10
index.html
View File

@ -2,18 +2,12 @@
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title>
<script src="vue.js"></script> <script src="vue.js"></script>
</head> </head>
<body> <body>
<div id='app'> <div id='app'>
<button @click="increase(2, $event)">Click Me</button> <input type="text" v-model="name">
<button @click="counter++">Click Me</button> <p>{{name}}</p>
<p>{{ counter }}</p>
<p v-on:mousemove="updateCoordinates">Coordinates {{x}}, {{y}}
<span v-on:mousemove.stop.prevent=""> DEAD SPOT</span>
</p>
<input type="text" v-on:keyup.enter='alertMe'>
</div> </div>
<script src="app.js" charset="utf-8"></script> <script src="app.js" charset="utf-8"></script>