Created
February 9, 2019 10:17
-
-
Save revdfdev/f4ba858e3ef9d9a873d0eb1769619ecf to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/wadehus
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> | |
| <div id="app"> | |
| <h1 v-once>{{title}}</h1> | |
| <button v-on:click="increase(2, $event)">Increase</button> | |
| <p>{{sayHello()}} - {{counter}} - <a v-bind:href="link">Google</a></p> | |
| <button v-on:click="decrease">Decrease</button> | |
| <hr> | |
| <p v-html="finishedLink"></p> | |
| <hr> | |
| <p v-on:mousemove="updatecoordinates"> | |
| Coordinate {{x}}/{{y}} - <span v-on:mousemove.stop>DEAD SPOT</span> | |
| </p> | |
| <input type="text" v-on:keyup.enter.space="alertMe"> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| new Vue({ | |
| el: "#app", | |
| data: { | |
| title: "Hello world", | |
| counter: 0, | |
| link: "http://google.com", | |
| finishedLink: "<a href='http://google.com'>Google 2</a>", | |
| x: 0, | |
| y: 0 | |
| }, | |
| methods: { | |
| sayHello: function() { | |
| this.title="Hello" | |
| return this.title; | |
| }, | |
| increase: function(step, event) { | |
| this.counter+= step; | |
| }, | |
| decrease: function() { | |
| if (this.counter > 0) { | |
| this.counter-- | |
| } | |
| }, | |
| updatecoordinates: function(e) { | |
| this.x = e.clientX; | |
| this.y = e.clientY; | |
| }, | |
| alertMe: function(e) { | |
| alert(e.target.value) | |
| } | |
| } | |
| }) | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">new Vue({ | |
| el: "#app", | |
| data: { | |
| title: "Hello world", | |
| counter: 0, | |
| link: "http://google.com", | |
| finishedLink: "<a href='http://google.com'>Google 2</a>", | |
| x: 0, | |
| y: 0 | |
| }, | |
| methods: { | |
| sayHello: function() { | |
| this.title="Hello" | |
| return this.title; | |
| }, | |
| increase: function(step, event) { | |
| this.counter+= step; | |
| }, | |
| decrease: function() { | |
| if (this.counter > 0) { | |
| this.counter-- | |
| } | |
| }, | |
| updatecoordinates: function(e) { | |
| this.x = e.clientX; | |
| this.y = e.clientY; | |
| }, | |
| alertMe: function(e) { | |
| alert(e.target.value) | |
| } | |
| } | |
| })</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| new Vue({ | |
| el: "#app", | |
| data: { | |
| title: "Hello world", | |
| counter: 0, | |
| link: "http://google.com", | |
| finishedLink: "<a href='http://google.com'>Google 2</a>", | |
| x: 0, | |
| y: 0 | |
| }, | |
| methods: { | |
| sayHello: function() { | |
| this.title="Hello" | |
| return this.title; | |
| }, | |
| increase: function(step, event) { | |
| this.counter+= step; | |
| }, | |
| decrease: function() { | |
| if (this.counter > 0) { | |
| this.counter-- | |
| } | |
| }, | |
| updatecoordinates: function(e) { | |
| this.x = e.clientX; | |
| this.y = e.clientY; | |
| }, | |
| alertMe: function(e) { | |
| alert(e.target.value) | |
| } | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment