Last active
November 17, 2017 18:15
-
-
Save drewlesueur/7a87ba413861636b21e2fb98b5388126 to your computer and use it in GitHub Desktop.
Vue.js two ways to do event handling
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> | |
| <div id=app> | |
| <my-button text=Hello :myonclick="() => foo('yo')" @mymouseenter=foo2></my-button> | |
| </div> | |
| <script src="https://unpkg.com/vue/dist/vue.min.js"></script> | |
| <script> | |
| Vue.component('my-button', { | |
| props: ['text', 'myonclick'], | |
| template: '<button type="button" class="btn" @click="myonclick" @mouseenter="doMouseEnter">{{ text }}</button>', | |
| methods: { | |
| doMouseEnter: function() { | |
| this.$emit('mymouseenter', 'hi') | |
| } | |
| } | |
| }) | |
| new Vue({ | |
| el: "#app", | |
| methods: { | |
| foo: function (a) { | |
| console.log("yay", a) | |
| }, | |
| foo2: function (a) { | |
| console.log("yay", a) | |
| }, | |
| } | |
| }) | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment