基礎から学ぶ Vue.js 3週目(実施期間:9日)

学習

進捗

基礎から学ぶ Vue.js

f:id:fatherofikura0107:20180810080001j:plain

  • 進捗30%(98/331)[前回+12%]
    • 読了まであと2ヶ月くらいかかりそう。

所感

  • Mustache記法をつかって属性にbindできないので、v-bindディレクティブを使う。
    • 省略記法だと「:」だけになる。使用頻度高いからここまでの省略が許されているのだろう。
  • JavaScriptのthisが何を指しているかを理解するのが難しい。JSの基本が分かっていないからであろう。
    • アロー関数：無名関数の省略記法。(サイト)
  • 複数属性をまとめてバインドできることを知った。特定の要素だけの変更もできると…。なるほどこれは便利。
  • Webではベクタ画像はSVGを利用するのか。EPSではないんだなぁ。
  • v-ifディレクティブとv-showディレクティブは同じように見えても描画結果が異なることを学んだ。
    • v-ifはDOMレベルで削除していて、v-showはdisplayをnoneにしている。どちらが適切かは構造を踏まえて考えないといけないのか。
  • templateタグという存在自体を知らなかった。この本はHTML素人にはハードルが高い。
    • templateタグ：ブラウザ上では表示されず、Scriptによって操作するためのタグ。HTML5で導入された。(サイト)
  • v-forディレクティブはJavaScriptの「for in」文と似ているが実際には「for of」文に近いとあったが、どちらも知らない…。
    • for in：オブジェクトのプロパティ名についての繰り返し
    • for of：オブジェクトのプロパティの値についての繰り返し
      • 違いがあることは分かった。for ofはECMAScript6から導入されているとのこと。(サイト)
  • 効率的な描画のためにデータに対して不変でユニークになるようkey属性を設定すべきとのこと。なるほど。
  • JavaScriptのreduce関数を初めて知った。ぱっとみて何やってるかよく分からなかった。(サイト)
    • reduceがcoolかは今の自分では理解が追いつかない。
  • axiosを使うと書いてあったがaxiosって何？？という感じ。
    • axios：ブラウザや node.js で動く Promise ベースのHTTPクライアントである｡REST-API を実行したいときなど､これを使うと実装が簡単にできるらしい。(サイト)
    • いざ使って見ようと思った時、初期設定ではChrome上でAjaxを使ってローカルファイルにアクセスできなかった。
  • Vue.jsのテンプレートの仕様上、JavaScriptを実行できるためユーザから送られたデータをそのまま使用するときは注意が必要とのこと。確かに。これは肝に命じておく必要があると感じた。
  • CSSにて「#app[hoge]」のように書いたときの、「[]」が何か分からない…
    • 特定の属性を持つ要素に適用したい場合に使うとのこと。なるほど！確かにこれは必要だ。