Vue Js keydown Event Tutorial Example

Vue Js keydown Event Tutorial Example

Vue js keydown event example tutorial. In this tutorial, you will learn how to use keydown event in vue js app.

This tutorial will show you example of vue js keydown event, so you can easliy use keydown event in vuejs.

VUE JS KeyDown Event Example

This tutorial will show you example of how to use keydown event in vue js:

Example 1 – KeyDown Event in VUE JS

The following example is for keydown event in vue js:

<!DOCTYPE html>
<html>
<head>
  <title>Vue js</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-6 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5>Vue Js keydown Event Example</h5>
        </div>
        <div class="card-body">
          <div id="app">
            <p>
                {{ keywords }}
            </p>
            <input type="text" placeholder="Enter KeyWords" :value="keywords" class="form-control" @keydown="queryForKeywords">
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>  
new Vue({
  el: "#app",
  data: {
    keywords: ''
  },
  methods: {
     queryForKeywords(event) {
       const value = event.target.value
        this.keywords = value
           alert('you are enter some key!!');
    }
  }
})  
</script>
</body>
</html>

The following code will

<script>  
new Vue({
  el: "#app",
  data: {
    keywords: ''
  },
  methods: {
     queryForKeywords(event) {
       const value = event.target.value
        this.keywords = value
           alert('you are enter some key!!');
    }
  }
})  
</script>

Conclusion

Vue js keydown event example tutorial. In this tutorial, you have learned how to use keydown event in vue js app.

Recommended VUE JS Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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