vue.jsを使ってaxiosを学ぶ | アールエフェクト
CDNを利用するとブラウザのコンソールに”You are running a development build of Vue. Make sure to use the production build (*.prod.js) when deploying for production.”メッセージが表示されます。 Vue2の場合 利用しているCDNから利用しているVue.jsのバージョンが確認でき、動作確認時のバージョンは2.7.14です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>vueを使ってaxiosを学ぶ</title> </head> <body> <div id="app"> <h1>{{ message }}</h1> </div> <script src="https:
Nuxt.jsをはじめよう - クエリパラメータやパスパラメータを使ってデータを渡す
前回の記事 では画面遷移の仕方を紹介しました。 画面間でデータのを受け渡しをする方法を紹介します。Nuxt.js というか Vue.js の仕様も含まれています。 画面間でデータを渡す画面間でデータの受け渡しをする方法はいくつかあります。URLのクエリパラメータで渡す方法やパスパラメータによる方法、またフレームワーク側でデータを保持する方法などです。Nuxt.js においてこれらのやり方をまとめてみました。 クエリパラメータを使うURLのクエリパラメータとしてデータを取得したい場合には $route オブジェクトの query プロパティから取得ができます。 以下のように pageName=next というデータを nuxt-link から渡します。
Nuxt.jsにおけるaxiosライブラリ、asyncData Hookの使い方 | アールエフェクト
Nuxt.jsでもVue.jsで同様にaxiosを利用することで外部からデータを取得することができます。外部からのデータ取得はアプリケーションを構築する上で表示に重要な部分なので本文書ではNuxt.jsにおけるaxiosの使い方とasyncDataの使い方について説明を行っています。 Nuxt.jsではサーバサイドでデータを取得する際はasyncData Hookまたはfetch Hookの中にデータを取得する処理を記述します。クライアントサイドでデータを取得する際にはmounted Hookの中にデータを取得する処理を記述します。 fetch HookはJavaScriptのfetch関数とは異なります。また本文書ではfetch Hookについての説明は行っておりません。
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります
Nuxtアプリ開発で使うVue.jsのディレクティブ・テンプレート構文／API-KEYが必要なWeb-Apiの利用など - SE_BOKUのまとめノート的ブログ
目次 はじめに Nuxt.jsを整理する方針 Nuxt.jsはVue.jsの開発フレームワークであること テンプレート構文とScriptタグ内のブロックの意味合いと役割 テンプレート構文：条件付きレンダリング（条件分岐） テンプレート構文：リストレンダリング（繰り返し） テンプレート構文：データバインディング（データ参照他） Scriptタグ内のブロックの意味合いと役割 確認用サンプルコード１ 当日日付を取得してフォーマットして返す関数とその表示 関数の呼び出しと戻り値の表示 確認用サンプルコード２ v-ifを使ったタグの表示・非表示とv-showとの使い分け JSONを受け取った時の内容表示の方法 サンプルコード３ WEB-APIのAPI-KEYを埋め込み方と空のdata()の注意 v-forで繰り返し処理と配列の添え字に対する注意 実行イメージ 参考：市区町村API はじめに リライト
コンポーネントディレクトリ
コンポーネントディレクトリ components ディレクトリには、Vue.js コンポーネントが含まれています。コンポーネントは、ページのさまざまな部分を構成するものであり、再利用して、ページ、レイアウト、さらには他のコンポーネントにインポートすることができます。 データの取得 コンポーネントの API から非同期データにアクセスするには、fetch() を使用できます。 $fetchState.pending をチェックすることで、データがロードされるのを待っている時にメッセージを表示することができます。$fetchState.error を確認し、データの取得中にエラーが発生した場合はエラーメッセージを表示することもできます。fetch() を使用する場合、data() で適切なプロパティを宣言する必要があります。フェッチから取得したデータは、これらのプロパティに割り当てることができ
【Vue.js入門】v-on、v-forを使ってみよう！ - Qiita
Vue.jsの入門で必ず出てくるv-onとv-for v-onとv-forを使うことができれば以下のようなToDoアプリもすぐ作れました！ 今回のつまづきいたところ addボタンを押してもページがリロードされる フォームに打ち込んだ文字が消えない それではVue.jsだけで簡単なToDoアプリを作っていきましょう！ まずは雛形をつくる まずはJavaScript側。 【初心者向け】Vue.jsの双方向データバインディングと同じ作りをしているため、説明は簡単に書きます。 main.js (function(){ "use strict"; var vm = new Vue({ el: '#app', data: { todos: [ 'task1', 'task2', 'task3' ] } }); })(); new Vueで新規作成したインスタンスを変数vmに与えます。 HTML側の"i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsで外部scssを読み込む - Qiita
Message | Buefy
Nuxt 2 - The Intuitive Vue Framework ドキュメント