質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3814閲覧

vueでjqueryを使おうとすると'$' is not defined

HMTK

総合スコア7

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/03/03 13:58

編集2020/03/03 14:13

こちらを参考にしてvueの中でjqueryのプラグインを使おうと思い

npm

1npm install jquery --save

を実行し
vueのmain.jsに

main

1import jquery from 'jquery' 2global.jquery = jquery 3global.$ = jquery 4window.$ = window.jQuery = require('jquery')

と記述してscriptの中でjqueryを使おうとしたところ'$' is not defined とエラーが出て進まなくなってしまいました。

原因がわかる方、ご教授願いします。


追記

jqueryを書き込んだところは

vue

1<template> 2 <div id="countdown1"> 3 <main> 4 <div class="countdown"> 5 6 </div> 7 </main> 8 </div> 9</template> 10 11<script> 12export default { 13 props: { 14 day: Number, 15 hour: Number, 16 min: Number, 17 sec: Number, 18 timeout: Boolean 19 }, 20 mounted:function() { 21 // $('#countdown1').fireworks({ 22 // sound: true, // sound effect 23 // opacity: 0.9, 24 // width: '100%', 25 // height: '100%' 26 // }) 27 } 28} 29</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2020/03/03 14:02

jQueryを使おうとしたスクリプトは、どこへどのように書いたのでしょうか?
guest

回答2

0

ベストアンサー

exportを使うようなコードの中では、windowに入っているグローバル変数とは基本的に別世界となります。

強引にwindow.$で参照するか、あるいは逆に<script>内にimport $ from 'jquery';を書くか、どちらかで対応してください。


とはいえ、DOMを変化させる系のjQueryプラグインとVueの併用は、Vue側のDOM認識に破綻をきたす危険がありますので、あまりおすすめできません。

投稿2020/03/03 14:19

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HMTK

2020/03/03 14:38

無事に動いてくれました。 ただ併用はあまりよろしくないのですね。。 ありがとうございました。
guest

0

そもそもjQueryを呼んで(組み込んで)ないのでは?

投稿2020/03/03 14:04

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問