前回に引き続き Vue.js&Nuxt.js超入門 の続きをやっていきます

Chapter5 Nuxt.jsにアップグレード！

前回ガッと写経してアプリを作るところまでやったので、気になった点をメモしながら解説部分を読んでいきます

.vueファイルの template 部分

入力フィールドに対して @focus="foo" と記述すると、フォーカスが当たった時に foo を実行する
- @click="bar" でクリックに対して実行できる
- @ は v-on の省略記法
transition で要素を囲むと、その要素が追加や削除される時にアニメーションを適用したりできる

<template>
  <transition name="del">
    <button v-if="baz != false">delete</button>
  </transition>
</template>

<style>
.del-enter-active, .del-leave-active {
  transition: opacity 5s;
}
.del-enter, .del-leave-to {
  opacity: 0;
}
</style>

このサンプルアプリはページネーションを実現するのに span タグのクリックをトリガとして実現している
- 🤔 ページ遷移程度だから自前で実装した感じかな。リンクについて調べてみたら nuxt-link というコンポーネントが用意されてるから、ページ遷移はそういったものを使うケースが多いのかな
  - API: <nuxt-link> コンポーネント - Nuxt.js

.vueファイルの script 部分

Vuexでモジュールモードを使うときは、ステートは $store.state.モジュール.○○ という形で指定
復習：Vuexのミューテーションを呼び出すためには $store.commit メソッドを実行
- ミューテーション | Vuex

Chapter5はここまで

Chapter6 外部サービスを利用しよう！

見出しを見てみたところ axios パッケージを使っての外部連携と、 Firebase を使うとのこと
🤔 外部連携で言うと fetch がデフォルトじゃなかったかなと言う記憶があったので調べてみました
- Fetch APIはネイティブAPIだから外部リソースの読み込みは不要だけど、完全にサポートされてはいないから、現状は axios を好んで使う人が多いらしい
- axios を利用した API の使用 — Vue.js

axios

インストール方法 $ npm install --save axios
- 後からインストールもできるけど、プロジェクト生成時にインストールも可能とのこと
- 実際に新規生成をしてみたところ以下のような選択肢が出現

? Choose features to install (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◯ Progressive Web App (PWA) Support
 ◯ Linter / Formatter
 ◯ Prettier
❯◯ Axios

インポート方法 const axios = require('axios'); と書いてある。import じゃアカンのかなと思って調べてみたけど、特に優劣は無さそう。好きな方で良いらしい
データ取得方法 変数 = await axios.get(アドレス)
- 返されたオブジェクトの data プロパティにデータが保存されている
- await は非同期処理を利用する際に用いられる
cssの white-space の pre-wrap
- ボックスサイズが指定されている場合にはそれに合わせて自動改行する
- white-space－スタイルシートリファレンス
nuxtアプリ自身の static/README.md の内容を表示させるために let url = "/README.md" と書いていたが NuxtServerError connect ECONNREFUSED 127.0.0.1:80 というエラーが発生
- let url = "http://localhost:3000/README.md" と書き換えたら動いた
  - 同じサイト内のアクセスなら、ドメイン部分を省略可能と書いてあるけど仕様が変わった感じかな（さっとググったが見つからず）
- staticディレクトリ以下のファイルは、 http://localhost:3000/README.md のように直接ファイル名を指定してアクセス可能
asyncData について
- 非同期で扱うデータをまとめた管理する関数であり、この中で非同期の値を用意してオブジェクトの形にして返す
  - この返された値は自動で data にマージされる
- コンポーネントが用意される前に呼び出される

asyncData: async function() {
  ...非同期処理...
  return { 取得した値 }
}

今日はここまで。次はChapter6の JSONデータのサイトを活用しよう から

その他

vimでカーソル行を行頭に持ってきたいときは z<enter> or zt

どあらんど

田無rb#3

Chapter5 Nuxt.jsにアップグレード！

Chapter6 外部サービスを利用しよう！

その他