python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
How To Handle Events in Vue.js?

How To Handle Events in Vue.js 2?

What Is Vue.js?

The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end).

The Vue.js is easy to integrate with other libraries and others existing projects. Vue.js is very popular for Single Page Applications developments.

The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM (Model-View-ViewModel) pattern.

How To Handle Events in Vue.js?

HTML Code –
<script src="https://unpkg.com/vue"></script>
<div id="demo-app">
  <input type="text" v-model="name">
  <button v-on:click="myClickMethod">Click Me? </button>
<div>

VueJs Code –
//Model class
var customerModel = {
  name: "Anil Singh",
  age: 32
};

//Customer View Model.
var customerViewModel = new Vue({
  el: '#demo-app',
  data: customerModel,

  // A click handler inside methods
  methods: {
    myClickMethod: function() {
      alert("Hello " + this.name);
    }
  }
});

The Result looks here -  https://jsfiddle.net/erttwer6/

I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions