2021-10-01から1ヶ月間の記事一覧
v-forとは よくある「配列からデータを取り出してtableに表示して云々」を実現する。 仮引数を2つ用意することで「配列要素、インデックス番号」の順にセットすることも可能。 配列を絞り込みたい時 配列をそのまま表示するでなく、ソートしたり条件に合致す…
あｎ# おさらい ディレクティブとは、接頭辞v- がついたVueJsの属性。 これを使うことでデータバインディングなどが可能となる。 v-if 指定された条件式がtrueの場合にだけ、現在の要素を出力する v-show 式の真偽に応じて表示/非表示を切り替える 〜v-show …
アプリケーションのデータをDOMと結びつけること テキストボックスの双方向データバインディング <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <form> <label for="name">文字を入力してください:</label> <input type="text" id="name" v-model="inputText" />…</form></div></body></html>
イベントオブジェクトを使用 ⇨$event(Vue.jsのルールで決まっている名前) <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> //第二引数以降で$eventを使いイベントオブジェクトを受け取り、イベントハンドラでも参照できるようになる <button v-on:click="onclick('ようこそ！',$event)">クリ…</button></div></body></html>
v-on ディレクティブ イベント処理を実装する -> イベントとは、ボタンを押したりURLをクリックなどのこと またイベント時に実行されるコード(メソッド)のことをイベントハンドラーと呼ぶ イベントハンドラーはv-onディレクティブを使って設定する 下記はサ…
ライフサイクルとは Vueインスタンスの生成から破棄までの流れのこと ライフサイクルの変化に応じて呼び出されるメソッドのことを ライフサイクルフックと呼ぶ 下記の公式が非常に参考になる。 Vue インスタンス — Vue.js ぶっちゃけ初学者にはなんのこっち…
算出プロパティとは 既存データの加工を伴う取得のこと <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <p>{{localEmail}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </body></html>
ディレクティブ {{変数}}のマスタッシュ構文は便利だが、条件分岐や繰返し処理などは ディレクティブ機能を使う。 本機能は重要である。 「v-●●」で始まるのが特徴 例えば、属性値にJavaScript式を埋め込むにはv-bindを使います <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <a v-bind:href="url">ぐーぐ…</a></div></body></html>
Vue.Jsはフレームワークだが、CDN経由でライブラリをインポートするだけで簡単に利用できる。 まず先にコードを記載していくっ <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <p>{{message}}</p> ①マスタッシュ構文とよばれる、HTMLからデータオブジェクトにアクセスする構文 </div> </body></html>
Vue.Jsとは JavaScriptのフレームワーク。 JQueryを業務で少しでも使用したことがある方ならご理解頂けるかと思うが、 導入しやすくDOM操作を便利にしてくれる反面コードがごちゃごちゃしてくる。 Jqueryでは、入力値をDOMと呼ばれる文書ツリーから取得し、A…
Vue.js案件が熱いらしい。 何が熱いのかはあえて触れないが。 Javaエンジニアとしてキャリアスタートさせたが、なるべくフロントの最新技術に触れられる 案件で技術を磨いていきたい。 あとリモートできる現場が良い。 電車通勤、おめーはだめだ。 アフター…
ラムダ式とは ざっくりいうと、関数の定義とその実態の即時生成が行える式 記法 (型 引数名1,型 引数名2,...) -> { 処理; ... return 戻り値; } クロージャとは ラムダ式が持つ特性。 「自身が評価され関数の実態が生み出される際、その時点で アクセス可能…
関数オブジェクトとは プログラムの実行中に生み出したり、代入したりできるものを第一級オブジェクトという。 例えば,インスタンスでやデータ(文字列など)やデータ構造(配列)など。 Javaでは、関数も第一級オブジェクトとして扱える。 特徴 変数に代入可能 …
.projectファイルとは Eclipseでプロジェクト作成時に作成されるファイル。 DbfluteのハンズオンプロジェクトをGithub から落としてきた際に、 このファイルがgitignoreに含まれており、Gitでクローンしてもファイルに含まれていなかったため、プロジェクト…
※基本、下記の公式記事を参考に書いていきます。 DBFluteの紹介 | DBFlute DBFluteとは O/Rマッパー(※1)であり、DB管理支援ツール(※2)でもある ※1Object RelationalDataBase mapperの略。 名前のままだが、オブジェクトとRDBのデータの相互変換を行う。 ざっ…
