free
web stats

Vue Js 2 First Example – Instance

Vue Js 2 First Example – Instance

There are different ways to include Vue.js in your website project;

– Use CDN by using <script> tag in HTML file(our method)
– Using Node.js, Node Package Manager(npm)
– Install Bower and use it
– Use Vue-cli to setup and create Vue Js documents

In the last post, We added the CDN for using Vue Js 2. It means we can now use a religious code in index.html file or if we want to in an external file which is what we’re going to do.

I’m going to create new file named app.js. I’m linking to external javascript file (app.js).

<script src=”app.js”></script>

How to we start writing Vue Js 2 code? First thing we tend to do is make a view instance.

new Vue({});

In here this code’s role is to control either the whole part or just a certain part of our application. We can have an app with just one instance to control the whole up is wearing through Vue Js.

We can create more than one instances and use these same website. For example we can create friend list, message box or search box etc. These components can be controlled by separate Vue instance. They have no relation to each other. They’re all controlled independently.

In this code block, we can add data object, method or methods, options and etc…

I’m going to pass through here is a property called el. el property is a string and it’s going to say which elements on the page this is going to control this Vue instance.

Now we need root element. Go to ┼čndex.html file and create new div tag and set id property with vue-app.

<div id=”vue-app”></div>

In this scope we can use Vue instance. I’m going to pass some data from Vue Js to index.html file. I’m going to add new property called data and add name, age, city.

Now I need to use this data property in html file. Write this code and go to index.html on browser.

We have reached name, city and age data in index.html file.

Here is all codes;

index.html file;

app.js file

 

You may also like...

Leave a Reply

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