Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs methods

Related course:
Fullstack Vue: The Complete Guide to Vue.js

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:

<html lang="en">
<head>
<meta charset="utf-8">
<title>https://vuejsexamples.nettitle>

<script src="//unpkg.com/vue">script>
head>
<body>
<div id="app">
{{ message }}
<button v-on:click="hello">clickbutton>
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