【テックアカデミー20日目】Vue.js

こんばんは！そして今日も1日お疲れ様です！

日が回っちゃいましたが、今日もテックアカデミー20日目の振り返りをしていきたいと思います！

今日やったことは以下の通りです！

①Vue.js

②メンタリング

では詳しくアウトプットしていきます！

①Vue.js

昨日の続きカリキュラムをすすめた。

覚えたことは、

v-for　と　v-on　 と　v-model

V-for

v-for というディレクティブを使うと、配列またはオブジェクトを繰り返し処理して表示できる。

要素を格納した変数 in 配列 という形の構文を使う。

<ul id="example">
 <li
  v-for="member in members"
  v-bind:key="member"
 >
   {{ member }}
 </li>
</ul>

js

const app = new Vue({
 el: '#example',
 data: {
   members: ['桃太郎', 'イヌ', 'サル', 'キジ'],
 },
});

v-on

input要素への入力からデータを更新するには、v-on というディレクティブを使う。

要素のイベントを処理するためのディレクティブ。

<div id="example">
 <input
   v-bind:value="name"
   v-on:input="name = $event.target.value"
 >
 <p>{{ name }}</p>
</div>

v-model

フォームの入力要素の際に省略した書き方ができる。ディレクティブ。

<div id="example">
 <input v-model="name">
 <p>{{ name }}</p>
</div>

<input v-model="Vueインスタンスのdataオプションに設定したプロパティ名"> と書くと「そのinput要素に関するイベントが発生したら、指定したデータの値を更新する」という処理が行われる。

メンタリング

APIについて

APIは、サーバサイドのデータベースからデータをもらう事。

簡単に言うと、サーバーのデータベースへリクエスト(ulr)を送り、その結果をレスポンスとして受け取る。

この時返されるのが、JSONオブジェクト。

だいたい今日のメンタリングで覚えた事はこんな感じ。

テックアカデミー20日目を終えての感想

今日で20日が経過した。

始めた当初よりは、コードが読めるようになったけど未だあやふやで覚えている事多く訳が分かっていない状態。

本当にプログラムの意味が理解できる日が来るのか不安。

とにかく今は覚えることがおおく全部は理解できない。

「これをやれば近道できる」

ってのはないのかな～

やっぱりひたすらコードを書き続けるしかないのかな。

ひたすらコード書き続けたら頭で記憶するって書いてた。

とりあえずやってみるか。

でもなんかモチベーションが上がらないな～、先の事を考えてしまうとモヤモヤしてしまう。

明日はオフ。

貴重な時間をプログラミング学習にあてよう。

よし明日もやるか！

てな感じで今日は終わります！

では、また明日！