2021-01-01から1年間の記事一覧
<html lang="ja"> <head> <meta charset="UTF-8"> <title>Vue.js</title> </head> <body> <div id="app"> <p>現在値：{{ current }}</p> <my-counter step="1" v-on:plus="onplus"></my-counter> <my-counter step="2" v-on:plus="onplus"></my-counter> <my-counter step="-1" v-on:plus="onplus"></my-counter></div></body></html>
input type="text"に入力したデータがlistに追加されていくやつ。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Vue.js</title> </head> <body> <div id="app"> <form ref="form" @submit.prevent> <input type="text" @keydown.enter="trigger" v-model="message" placeholder="enter something..."/> </form> </div></body></html>
v-modelディレクティブで双方向データバインディングを実現できます。 データオブジェクトとテンプレートの状態を同期する仕組みです。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Vue.js</title> </head> <body> <div id="app"> <form> <label for="name">名前：</label> <input type="text" id="name" v-model="myName" /> </form> <div>こんにちは！ {{ myName }…</div></div></body></html>
v-on:イベント名="..."の...にメソッドの名前を指定する。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Vue.js</title> </head> <body> <div id="app"> <button v-on:click="onclick">クリック</button> <p>{{ message }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </body></html>
算出プロパティは既存のプロパティを演算した結果を取得するためのゲッター。 定義済の算出プロパティをテンプレートから参照するには{{ プロパティ名 }}とする。 compute.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>Vue.js</title> </head> <body> <div id="app"> <p>{{ localEmail }}</p> </div> </body></html>
プロジェクトのルートディレクトリに.gitmessage.txtを配置します。 以下のような内容を記載します。 Commit subject (e.g. Implemented xxx feature ) Description (e.g. xxxx description) 以下のコマンドでコミットテンプレートをセットできます。 $ git …
RailsにBoostrapを導入する際はWebpackerを使います。 Webpackerとは、複数のJavaScriptファイルなどを1つにまとめて出力するツールであるwebpackを簡単にRailsアプリケーションに統合できるGemです。 以下のコマンドでBootstrapを入れましょう。 yarn add j…
起こったこと gem 'carrierwave', '~> 2.0'をbundle installしたあとにrails g uploaderを実行するとエラーが発生した 環境 Docker（Ubuntu） Rails 6.0.3.6 ruby 2.7.2 carrierwave 2.0 mimemagic 0.3 エラー解消までにやったこと apt-get update shared-mi…
以下の環境をDockerで構築します。 Ruby（2.7.2） Ruby on Rails6（6.0.3.4） PostgreSQL（11.2） 筆者の使用PCはMacBook Pro（macOS Catalina 10.15.7）です。 Techpitの「【Ruby on Rails 6】Tinder風マッチングアプリを作ってみよう！」を進めるための環…
モチベーション "Effective Testing with RSpec 3"というRSpecの本を読み、RSpecをインストールしようとしたら、以下のようなエラーが発生した。 diff-lcs's executable "htmldiff" conflicts with /Users/mine/.rbenv/versions/2.7.2/bin/htmldiff Overwrit…
