Vue.js is a library of javascript that can be used to build any web application. It has MVVM(Model-View-ViewModel) architecture. It is easy to learn and also more flexible.
Here you will see how you can use this js in your application.
Adding Vue.js to Your Application:
You have to include this js inside your file like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js">
</script>
Creating a View-Model:
To create view-models, Vue class is used. You can understand view-model as an object that can display the data of your model inside a view. You can take any object literal as a model and view as any html element.
View:
<div id=myView>
</div>
Model:
var myModel = {
name: swati,
age:24
};
Now we have both a view and a model, then we can bind them and create a view-model:
var myViewModel = new Vue({
el: '#my_view',
data: myModel
});
Here el property is used for view that you have and data property defines the model that you have created.
If you want to display your model’s data inside your view element, you can add the string inside {{}} this and put it there in view element.
<div id="myView">
{{ name }} is {{ age }} years old.
<!-- Evaluated to swati is 24 years old" -->
</div>
Note that any changes that you make to your model will also reflect to your view.
0 Comment(s)