【超Vue.js】ゼロから始めるコンポーネント【セクション6 】

Vue.js Udemy

74. コンポーネントを使用して、再利用可能なVueインスタンスを作る第一引数はコンポーネント名第二引数はコンポーネントに関する情報をオブジェクトでセットするコンポーネントの中でデータを使う時は、データを関数にする必要がある。以下はグローバル…

2020-06-30

【超Vue.js】5. Vue CLIを使った実践的な開発をはじめる方法【セクション5 】

Vue.js Udemy

67. なぜVue CLIを使う必要があるのか Vue CLI(コマンドラインインターフェイス)...大規模な本格的な開発に必要。なぜ必要？ファイルの分割 →大規模な開発で、ファイルを分けたり、くっつけたりしたい。最終的なコードの軽量化 →改行、空白、コメントアウ…

2020-06-30

【超Vue.js】Vueインスタンスとその内部構造はこうなっている【セクション4 】

Vue.js Udemy

50. イントロダクション Vueインスタンス Vueインスタンスって複数作れるの？他のjsからアクセスできるの？とかの内容 51. Vue インスタンスは複数作ることができる Vueインスタンスはなるべく複数使用しない方がいい完全に独立してるなら使ってもおk。 #ap…

2020-06-29

【超Vue.js】条件付きレンダリングとリストレンダリング【セクション3 】

Udemy Vue.js

37. v-elseを使って、v-ifがfalseの場合の処理を書く <div id="app"> <p v-if="ok">Hello</p> </div> new Vue({ el: '#app', data: { ok: true, } }) 38. v-else-ifを使って、複雑な条件式を作る <div id="app"> <p v-if="ok">OK</p> <p v-elseif="maybeOk">maybe OK</p> <p v-else>Not OK</p> </div> new Vue({ el: '#app', data: { ok: false, maybeOk:…

2020-06-29

【超Vue.js】これがVue.jsの基礎、テンプレート構文だ【セクション2 】

Vue.js Udemy

はじめに以下にUdemyの動画、超Vue.js2のメモを備忘録として書き連ねていきます。セクション毎に記事を分けます。 1. Vueの良いところ簡単、柔軟、高性能 HTMLファイル内の一部にVueを取り入れる、一つのファイルをVueだけで作る、アプリ全てをVueにするSP…

2020-06-28

selializerを使ったAPIの作成と、リクエストスペックについて

初級 Rails Rspec API

jsonのserializerとは？ jsonを生成する仕組みのこと。この生成したJSONのデータをレスポンスとして返す。 ActiveRecordは ActiveModel::Serialization を include している。なので、そのまま以下のような記述もできる。 module Api module V1 class Arti…

2020-06-24

thisを使って、methodsからdataにアクセスする

Vue.js

下記の例文にthisを使ってみる以下が例文。sayHi関数の結果を出力しているだけ。 <div id="app"> <p>{{ SayHi() }}</p> </div> new Vue({ el: "app", data: { message: "Hello world!", }, methods: { sayHi: function() { return 'Hi' ; } } }) 出力結果 Hi さあ、thisを使おう sayHi…

2020-06-21

Vueのコンポーネント(追記していく)

Vue.js

はじめに今日もとりあえずVueの内容について殴り書きしていく。 componentとは Webサイトの画面はヘッダー、メイン、フッターなど色々な部品から構成されている。そこで、コンポーネントという機能を使えば、ヘッダーなどの部品(コンポーネント)ごとに、HTM…

2020-06-21

DBの整合性を守るtransactionについて

Rails SQL

transactionとは複数のSQL文をtransactionという一つの単位にまとめることで、それぞれのSQLの処理が全て成功した場合にのみ、SQLの処理結果をDBに反映するよというもの。典型的なのは銀行口座の例で、 ①A口座の残高から¥1,000引き落とす ②B口座の残高を¥1…

2020-06-15

リストレンダリング(v-for)

v-forで配列に要素をマッピング配列に基づいて、アイテムのリストを描画するために、v-for ディレクティブを使用することができます。v-for ディレクティブは item in items の形式で特別な構文を要求し、items はソースデータの配列で、item は配列要素が…

2020-06-15

v-ifとv-showの違いとは ~条件付きレンダリング~

Vue.js

v-show <タグ名 v-show="条件式">trueなら表示</タグ名> v-ifとv-showの比較表示、非表示の動作が異なる。 v-ifはDOMレベルで要素が削除され、消えた部分はコメント化される。 v-showはDOMから要素は削除されず、dispay: none;が設定される。 →DOMへの要素の生成と削…

2020-06-15

Vueの算出プロパティ(computed)、監視プロパティとの比較

Vue.js

computedとは関数で算出したデータを返すことができるプロパティ(getterということ) データの加工を伴った取得ができる。キャッシュが残るから、処理が早くなる。 computed: { 算出プロパティ: 関数のオブジェクト } fullName: function() { return${this.…