Из-за чего ошибки при вставке любого js кода во vue?

Question

[ddnoob]

Практически любой код выдает ошибки, даже рабочий.
Объясните пожалуйста из-за чего ошибки?

Структура файла:

<template>
  <v-container>
<span class="my_area"></span><br />
<input type="button" class="my_button" value="Кликни на меня" />
  </v-container>
</template>

<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: #d17662 1px solid;
   background: #b8523c;
}
</style>

Ошибки:

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 | });

Comments

[WapSter]

$('.my_button').click(function()
   {
     $('.my_area').css({width:100}).animate({width:'+=100'});
   });

нафига использовать jquery если и так используешь vue? jquery подключай.

[ddnoob]

WapSter,
Этот код для примера.
Не работает вообще любой код, хотя по идеи должен же?
В package.json / "jquery": "^3.4.1", подключен.

[VegasChickiChicki]

ddnoob,

error: '$' is not defined

Может нужно правильно его подключить?

[ddnoob]

VegasChickiChicki,
Как считаете его правильно подключить?
Подскажите пожалуйста.

[Ankhena]

ddnoob, зачем для обработки кликов jQ?

[ddnoob]

VegasChickiChicki,
import $ from 'jquery';

Получилось спасибо!

[bozuriciyu]

Жесть. Даже видео на ютубе видимо не помогают.

Answer 1

[Alex Pospeliri]

1. это не чистый JS а jQuery, jQuery не подключена вот и ругается
2. тебе вообще не нужен весь этот код во Vue, используй стандартные events Vue (https://vuejs.org/v2/guide/events.html)