free
web stats

Vue Js 2 – Using Data and Methods

In this post we are going to talk about data and methods in Vue Js 2.

If you wan to look at my first and second tutorials visit these links;

http://nbasercode.com/vue-js-2/vue-js-2-introduction-and-installation/

http://nbasercode.com/vue-js-2/vue-js-2-first-example-instance/

In last post we created a data and output in this data to view, index.html file.

Now we are going to create a method. We can store as many different methods as we want. First of all we need to give a name our method, for example testMethod.

This method is a function and when we output something to the DOM it’s going to return something that can be output to DOM. Here is our testMethod;

methods: {
testMethod:function(){
return”Hi Everyone”;
     },
}

The method return a string (“Hi Everyone“). We want to output the results of that function to the DOM.

We need to do is call that function from within side this view active. We do that is by just writing {{ }} and write inside there name of the function and  ().
This code is call testMethod function and this function going to return to us “Hi Everyone” string.

We can also pass through parameters inside these functions. I want to create new function named animalNames and  pass some parameters in this function. Write index.html file to this code with pass ‘dog‘ parameter.

animalNames(‘dog’);(html file)

animalNames: function(animal){
return ‘Lovely ‘ + animal;
}

Here is our index.html file codes;

Here  is our app.js file codes;

 

Within this functions we can also access the data with inside this Vue({}) instance. this keyword refers to this Vue({}) instance.

You may also like...

1 Response

Leave a Reply

Your email address will not be published. Required fields are marked *