JIYIK CN >

Using jQuery in Vue has become a trend, because it allows us to manipulate DOM elements more conveniently and provides some practical tool functions. In this article, we will introduce in detail how to use jQuery in Vue and provide some examples to help you better understand it.

1. Introducing jQuery

Before using jQuery, we need to import it first. In Vue, we can import jQuery in the index.html file or in the main.js file. The following is the sample code:

index.html

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

main.js

import $ from 'jquery'
Vue.prototype.$ = $

Both of these methods allow us to use jQuery in Vue, but the way of introducing it is different.

2. Using jQuery

After importing jQuery, we can use it in Vue. Here are some common uses:

1. Select the element

jQuery's selector makes it easy to select DOM elements. For example, if we want to select the element with the id app, we can write:

javascript Copy Codes

let app = $('#app')

2. Operation elements

jQuery methods can be used to easily manipulate DOM elements. For example, if we want to add a p tag to the element with the id app, we can write:

javascript Copy Codes

$('#app').append('<p>Hello World</p>')

3. Event Binding

jQuery's event binding makes it easy to bind events. For example, if we want to bind a click event to an element with the id app, we can write:

javascript Copy Codes

$('#app').on('click', function() {
  console.log('clicked')
})

3. Examples in Vue

Below are some examples to help you better understand how to use jQuery with Vue.

1. Binding events

In Vue, we can use @clickbinding events or jQuery's event binding. Here is the sample code:

<template>
  <div id="app">
    <button @click="add">Vue</button>
    <button id="jquery">jQuery</button>
  </div>
</template>

<script>
export default {
  methods: {
    add() {
      console.log('Vue clicked')
    }
  },
  mounted() {
    $('#jquery').on('click', function() {
      console.log('jQuery clicked')
    })
  }
}
</script>

In this example, we bind the click events of two buttons, one using Vue's @click and the other using jQuery's event binding.

2. Operation elements

In Vue, we can use refto get DOM elements, or we can use jQuery's selector to get DOM elements. The following is the sample code:

<template>
  <div id="app">
    <div ref="box"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    let box = $(this.$refs.box)
    box.html('<p>Hello World</p>')
  }
}
</script>

In this example, we use refto get the element with id box and use jQuery's html method to add a p tag to it.

3. Utility Functions

In Vue, we can use some utility functions to easily manipulate DOM elements, or we can use jQuery's utility functions. Here is the sample code:

<template>
  <div id="app">
    <input ref="input" type="text">
    <button @click="focus">Focus</button>
  </div>
</template>

<script>
export default {
  methods: {
    focus() {
      $(this.$refs.input).focus()
    }
  }
}
</script>

In this example, we use refto get the input element, and use jQuery's focus method to give the input element focus.

Summarize

Using jQuery in Vue allows us to manipulate DOM elements more conveniently, and provides some practical tool functions. Before using jQuery, we need to import it first. jQuery's selector can easily select DOM elements, jQuery's method can conveniently manipulate DOM elements, and jQuery's event binding can conveniently bind events. In Vue, we can use refto get DOM elements, or we can use jQuery's selector to get DOM elements. Finally, we can also use jQuery's tool functions to conveniently manipulate DOM elements.