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

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

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

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

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Q&A

解決済

1回答

707閲覧

Vue.js script実行

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

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

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

0グッド

0クリップ

投稿2019/01/30 06:00

編集2019/01/30 06:30

前提・実現したいこと

現在Vue.jsを勉強中なのですが、現在あるtemplateの内でscriptを記述し、
onclickでコンソールログに表示したいのですが、上手くいきません。

現状としてはvue-routerで複数のページを作成して該当のページに遷移後、
遷移先のページ内(ファイル名.vue)内で記述しています。

宜しくお願い致します。

発生している問題・エラーメッセージ

実行後画面が描画されず下記のエラー文がコンソールログに表示されました。

Uncaught ReferenceError: Vue is not defined

該当のソースコード

vue

1<template> 2 <v-layout justify-center align-center column > 3 <div id="temp_1"> 4 <v-btn @click="clickFunction" color="primary" dark large></v-btn> 5 </div> 6 </v-layout> 7</template> 8 9<script> 10var app = new Vue({ 11 el: "#temp_1", 12 methods:{ 13 clickFunction:function(){ 14 console.log("hoge"); 15 } 16 } 17 }) 18</script> 19 20<style> 21</style>

###試したこと

vue

1export default { 2 methods: { 3 clickFunction:function(){ 4 console.log("hoge"); 5 } 6 } 7 }

上記だと正常に動作しますが、理由は確認中です。

補足情報(FW/ツールのバージョンなど)

vueのバージョン:3.3.0

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

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

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

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

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

guest

回答1

0

ベストアンサー

単一ファイルコンポーネント
vueファイルのお作法なのでvueファイルの中で

vue

1var app = new Vue({

をすることは基本ありません。
(どうしてもやりたい場合はvueファイルの中でVueをインポートしてやればいいですが、やる意味は不明です)

vue

1<template> 2 ここにはVue.componentのtemplate部分を記載 3</template> 4 5<style> 6 ここにはtemplateのスタイルを記述 7</style> 8 9export default { 10 // ここの記述はVue.componentのdataやらmethodsなどを記述 11}

と思っていただければ

投稿2019/01/30 06:43

編集2019/01/30 06:49
rururu3

総合スコア5545

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

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

退会済みユーザー

退会済みユーザー

2019/01/30 07:31

お作法なのですね、ありがとうございます。 追加の質問で申し訳ございませんが、main.jsにはvar = appと記述する事が ありますが、これはmain.jsの変数をほかのコンポーネントでも使用したりする時や 共通の処理をする場合に記述するという認識でよろしいでしょうか。 宜しくお願い致します。
rururu3

2019/01/30 08:09

Vue自体は必要なので var app = new Vue({ はどこかには必要です(なのでmain.jsにあるのはそのため) dataのコンポーネント間の共有なので、 https://vuex.vuejs.org/ja/ vuexとか使うといいかと思います。
退会済みユーザー

退会済みユーザー

2019/01/31 01:46

例えばなのですが、あるvueファイル内でaxiosを使用したい場合main.jsではなく vueファイルにてimport axios from 'axios';とするという認識でよろしいでしょうか。 宜しくお願い致します
退会済みユーザー

退会済みユーザー

2019/01/31 02:19

npmでインストールした差異に私は npm install axios --saveを実行したのでvue-axiosを入れていませんでした。私の環境ではmain.js内でimport axios from 'axios'と記述しても vueファイル内で使用はできず、Vueファイル内でインポートすれば使用できました。 vue-axiosがおそらく必要なのですね
rururu3

2019/01/31 02:36

その認識で大丈夫です
退会済みユーザー

退会済みユーザー

2019/01/31 02:50 編集

先ほど教えて頂いた方法でvue-axiosをインストールし、main.jsにimport&useをしたのですが、 Uncaught ReferenceError: axios is not definedと表示されてしまいました。
退会済みユーザー

退会済みユーザー

2019/01/31 03:04

首記の質問と内容が異なってきたので先にそちらに関してお礼申し上げます。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問