What is the error when you insert any js code in vue?

Almost any code gives errors, even working.
Please explain what error?

File structure:
<template>
<v-container>
<span class="my_area"></span><br />
<input type="button" class="my_button" value="Click me" />
</v container>
</template>

the <script>

export default {
 mounted() {
$(function()
{
$('.my_button').click(function()
{
$('.my_area').css({width:100}).animate({width:'+=100'});
});
});
}}
</script>

<style scoped>
.my_area
{
 display: block;
 width: 100px;
 height: 100px;
 border: #1px solid d17662;
 background: #b8523c;
}
</style>


Error:
Failed to compile.

./src/components/Contacts.vue
Module Error (from ./node_modules/eslint-loader/index.js):
error: '$' is not defined (no-undef) at src\components\Contacts.vue:14:1:
 12 | mounted() {
 13 | 
> 14 | $(function()
 | ^
 15 | {
 16 | $('.my_button').click(function()
 17 | {


error: '$' is not defined (no-undef) at src\components\Contacts.vue:16:4:
 14 | $(function()
 15 | {
> 16 | $('.my_button').click(function()
 | ^
 17 | {
 18 | $('.my_area').css({width:100}).animate({width:'+=100'});
 19 | });


error: '$' is not defined (no-undef) at src\components\Contacts.vue:18:6:
 16 | $('.my_button').click(function()
 17 | {
> 18 | $('.my_area').css({width:100}).animate({width:'+=100'});
 | ^
 19 | });
 20 | });
April 3rd 20 at 18:28
1 answer
April 3rd 20 at 18:30
Solution
1. this is not pure JS and jQuery, jQuery is not connected here and swears
2. you don't need all this code in Vue, Vue events use the standard (https://vuejs.org/v2/guide/events.html)

Find more questions by tags Vue.js