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

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

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

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

JavaScript

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

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Q&A

解決済

1回答

418閲覧

onsen uiのコンポーネントをコピペしてみたのですが、何も表示されず困っています。表示される方法を教えてください

kita_morio

総合スコア18

Vue.js

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

JavaScript

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

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

0グッド

0クリップ

投稿2018/11/23 13:14

前提・実現したいこと

Onsen ui 初学者です

勉強としてonsen uiのコンポーネントを使いたいです
コピペして使ってみたのですが、ブラウザにはなにも表示されませんでした 

表示するには、他にはなにが必要でしょうか?
また、以下のようなエラーも直したいです.

よろしくお願いします。

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

TypeError: Cannot read property 'platform' of undefined at hn.md (app.js:48) at hn.data (app.js:22) at hn.<anonymous> (vue:6) at vue:6 at vue:6 at jt (vue:6) at hn._init (vue:6) at new hn (vue:6) at app.js:14 He @ vue:6

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 7 8 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 9 <script src="js/app.js"></script> 10 11 <script src="lib/onsen/js/onsenui.js"></script> 12 <link rel="stylesheet" href="lib/onsen/css/onsenui.css"> 13 <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"> 14 15 16</head> 17 18<body> 19 <template id="main"> 20 <v-ons-page> 21 <v-ons-toolbar> 22 <div class="center">{{ title }}</div> 23 </v-ons-toolbar> 24 25 <v-ons-tabbar swipeable position="auto" 26 :tabs="tabs" 27 :visible="true" 28 :index.sync="activeIndex" 29 > 30 </v-ons-tabbar> 31 </v-ons-page> 32 </template> 33 34 <template id="home"> 35 <v-ons-page> 36 <p style="text-align: center"> 37 Welcome home.<br><br>{{ myProp }} 38 </p> 39 </v-ons-page> 40 </template> 41 42 <template id="news"> 43 <v-ons-page> 44 <p style="text-align: center"> 45 Some news here. 46 </p> 47 </v-ons-page> 48 </template> 49 50 <template id="settings"> 51 <v-ons-page> 52 <p style="text-align: center"> 53 Change the settings. 54 </p> 55 </v-ons-page> 56 </template> 57 58 <div id="app"></div> 59 60 61 62</body> 63 64</html> 65

javascript

1const homePage = { 2 template: '#home', 3 props: ['myProp'] 4}; 5 6const newsPage = { 7 template: '#news' 8}; 9 10const settingsPage = { 11 template: '#settings' 12}; 13 14var vm = new Vue({ 15 el: '#app', 16 template: '#main', 17 data() { 18 return { 19 activeIndex: 0, 20 tabs: [ 21 { 22 icon: this.md() ? null : 'ion-home', 23 label: 'Home', 24 page: homePage, 25 props: { 26 myProp: 'This is a page prop!' 27 }, 28 key: "homePage" 29 }, 30 { 31 icon: this.md() ? null : 'ion-ios-bell', 32 label: 'News', 33 page: newsPage, 34 badge: 7, 35 key: "newsPage" 36 }, 37 { 38 icon: this.md() ? null : 'ion-ios-settings', 39 label: 'Settings', 40 page: settingsPage, 41 key: "settingsPage" 42 } 43 ] 44 }; 45 }, 46 methods: { 47 md() { 48 return this.$ons.platform.isAndroid(); 49 } 50 }, 51 computed: { 52 title() { 53 return this.tabs[this.activeIndex].label; 54 } 55 } 56});

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

どこまでライブラリなどの環境が揃っているか分からないので、アプリのコード(js/app.js)以外は全てCDNサービスから取得した場合を例にします。

変更は2ヶ所です。

app.jsの読み込み位置

Vue.jsを利用する場合、関連付ける要素(提示のコードでは「<div id="app"></div>」)の後に実行されるようにするため、この要素より後に読み込むようにします。

位置の変更だけで対応するならば、</body>の直前に移動させます。

html

1 ... 省略 2 <div id="app"></div> 3 4 <script src="js/app.js"></script> 5</body> 6 7</html>

ライブラリの取り込み

<head>...</head>だけ抜粋

  • 変更前

html

1<head> 2 <meta charset="UTF-8"> 3 <title>demo</title> 4 5 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 6 <script src="js/app.js"></script> 7 8 <script src="lib/onsen/js/onsenui.js"></script> 9 <link rel="stylesheet" href="lib/onsen/css/onsenui.css"> 10 <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"> 11 12</head>
  • 変更後

html

1<head> 2 <meta charset="UTF-8"> 3 <title>demo</title> 4 5 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 6 <script src="https://unpkg.com/onsenui/js/onsenui.js"></script> 7 <script src="https://unpkg.com/vue-onsenui/dist/vue-onsenui.js"></script> 8 9 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> 10 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 11 12</head>

エラーの原因

「Vue.js向けのバインディング(vue-onsenui.js)」が足りないためです。

バインディングについてはOnsen UI公式ページに「バインディングとは?」に説明があります。

投稿2018/11/26 01:28

StupidDog

総合スコア263

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

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

kita_morio

2018/11/29 15:12

返信が遅れてすみません。 参考になりました!ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問