Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs methods

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

You can create JavaScript methods in an Vue app.

The vue instance can contain many methods. All of them are like JavaScript functions, but they are written in the property methods instead.

Lets see in a snippet:

new Vue({
el: '#app',
data: {
YOUR VARIABLES
},
methods: {
YOUR METHODS.
}
});

vuejs methods example

These needs to be within the methods section, in your app.js write:

new Vue({
el: '#app',
data: {
message: 'vuejs model'
},
methods: {
hello() {
this.message = 'method called';
}
}
});

Then your template should be:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>https://vuejsexamples.net</title>
<!-- include vue -->
<script src="//unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
<button v-on:click="hello">click</button>
</div>
</body>
<script src="app.js"></script>
</html>

If you click the button, the method hello() will be called which will then change the variable message.


← vuejs model Vue.js Events →

Posts


© vuejsexamples.net - Privacy Policy - Cookie Policy