ar0のブックマーク / 2021年6月7日 - はてなブックマーク

ar0 id:ar0

2021年6月7日のブックマーク (7件)

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 はじめにリライト
ar0 2021/06/07
Vue.js

Vue
リンク
[Nuxt.js入門] 全体像をざっくり掴むためのポイントまとめ - Qiita
概要これからNuxt.jsで開発を始める方向けに、最初に抑えておきたいポイントを個人的にまとめます。私自身としてはAngularアプリの初期構築業務の経験があるのですが（数万行単位で書いてました）、自分が新チームの技術選定をするタイミングでNuxt.jsを選定しました。ある程度SPA開発の知識はありましたが、最初は各フレームワーク毎に結構抑えどころというか癖見たいのを感じました。そんな、親切で日本語な公式読んでもすぐには手の動かない並エンジニアの自分の様な方向けにまとまったチートシート的な感じになればいいなと思っています。 // 2020/11/26追記記述内容を現状に合わせて見直しました。本記事は全体像の把握を目的としており、記述内容の強化が簡便性を損なわない様、最初は読み飛ばしても問題ないと思われるトピックには ⚫️ アイコンをつけております。 Nuxt.jsとは Vueベースの
ar0 2021/06/07
Nuxt
リンク
axios を利用した API の使用 — Vue.js
最終更新日: 2018年3月20日基本的な例ウェブアプリケーションを構築するとき、 API からデータを取得して表示することがよくあります。これを行うにはいくつかの方法があり、一般的なアプローチは Promise ベースの HTTP クライアントの axios を使うことです。この例題では、 CoinDesk API を利用して Bitcoin の価格を表示し、毎分更新します。最初に、 npm か yarn もしくは CDN リンクのいずれかを利用して axios をインストールします。 API から情報を取得する方法はいくつかありますが、表示する内容を知るために、まずデータ形式がどうなっているかを調べることをオススメします。 API エンドポイントを呼び出して出力をすることでデータ形式がどうなっているか調べられます。 CoinDesk API ドキュメントをみると、 https://
ar0 2021/06/07
axios

Vue

JSON
リンク
jsonを使ったVue.jsでの配列表示 - webMemo
Vueの単純な配列表示は簡単にできたので、jsonファイルからデータを抽出して配列表示させる勉強をしました。 axiosを使う Vueでjsonファイルからデータを取得するときはaxiosを使うといいらしい【参考】 axios を利用した API の使用 — Vue.js ＊js import Vue from 'vue'; import axios from 'axios'; require('es6-promise').polyfill(); var news = new Vue({ el: '#test', data: { datalists:[], }, created() { axios.get('/assets/json/test.json') .then(response => { this.datalists = response.data; }) .catch(erro
ar0 2021/06/07
json

Vue
リンク
コンポーネントディレクトリ
コンポーネントディレクトリ components ディレクトリには、Vue.js コンポーネントが含まれています。コンポーネントは、ページのさまざまな部分を構成するものであり、再利用して、ページ、レイアウト、さらには他のコンポーネントにインポートすることができます。データの取得コンポーネントの API から非同期データにアクセスするには、fetch() を使用できます。 $fetchState.pending をチェックすることで、データがロードされるのを待っている時にメッセージを表示することができます。$fetchState.error を確認し、データの取得中にエラーが発生した場合はエラーメッセージを表示することもできます。fetch() を使用する場合、data() で適切なプロパティを宣言する必要があります。フェッチから取得したデータは、これらのプロパティに割り当てることができ
ar0 2021/06/07
コンポーネント

Vue

vue.js

nuxtjs
リンク
【JavaScript】ネストされたJSONデータの値取得について - Qiita
経緯 2ヶ月くらい前、JSONデータを全て抜き出して、値を取り出さなければならない依頼がありました(何故かは伏せておきます…)。一次元ならまだしも、二次元配列の処理となるとちょっと骨が折れます。どうしようかと考えたのですが、再帰的に動く処理を使って対応することにしました。コード以下、対応に対して組んだJSです。 // Jsonの中身 var jsons ={ "masterNumber": 10000, "code": "m-001", "customerData": { "name": "Jiro", "age": 45 }, "Address": [{ "name": "testAreport", "em ail": "tA@sample.co.jp" }], "it ems": [{ "it emId": "it em01", "it emName": "商品01" }, { "ite
ar0 2021/06/07
json
リンク
page-transition | Codrops
Making CSS View Transitions Easy with Velvette In Tutorials Jan 19, 2024 by Noam Rosenthal Learn how to effortlessly implement smooth CSS view-transitions with Velvette, a useful library designed to tackle common challenges and enhance user experiences in web applications.
ar0 2021/06/07
transition
リンク
- 2021年6月8日
- 2021年6月7日
- 2021年6月4日