Vue.jsで文字数カウンターの実装をする 背景 テキスト(文字数)カウンターを実装する必要があった 工数はあまりかけられない Vue.jsの組み込みは任意で入れて良い条件 実装 Vue.jsバージョン Vueは<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> を使いました フォーム設定 フォームは<input v-model.trim="message" maxlength="20">と<textarea v-model.trim="message" maxlength="50"></textarea> の2点 最大文字数はブラウザの制御で持たせるためmaxlengthで制御しました trimを使うことで、冒頭と末尾のスペースが入力時点でトリミングされます。冒頭に半角ス
最初に ゲームのリセット機能を作ったのですが、誰でも使えるのではなく、キーワードを知っている人だけ許可しようと実装しました。その際に詰まったのが、$deleteする時にデータを送る方法。 ググれば出てきますが、英語の質問サイトが多く出てきたので、こちらに日本語で投稿しときます。 $postの場合 $axios.$post()では、中身に「url」と「引数(データ)」と「コンテントタイプヘッダー」を入れれば大丈夫です。 $deleteの場合 しかし、$axios.$deleteの場合はそれだけではうまく行きませんでした。 例)引数に送りたいデータだけを入れる → 失敗。。。。 調べてみると そこで調べてみると、$deleteの際は引数で**「data(データ)オブジェクト」を定義**する必要があるようです。 参考:https://github.com/axios/axios/issues/7
はじめに Vuejs は非常にとっつきやすく直感的に使える上に、多機能で大規模なサイトでも小規模なサイトでもスケールするJSフレームワークです。公式ドキュメントも充実しており、欲しいと思う情報や機能はほとんどそれだけでカバーすることが出来ます。 しかしながら多機能かつ柔軟性の高いフレームワークであるため、公式ドキュメントも肥大化しており、欲しい情報が見つけにくい!ということも当然あるため、ここに自分用に Vuejs のスロット機能の使い方についてメモっておきます。 おしながき コンポーネント内で複数のスロットを指定したい(名前付きスロット) スロットのスコープについて スロット内にスロットの外から値を渡したい(スコープ付きスロット) スロットの名前を動的に変更したい(動的スロット) v-slot:とか書くのがめんどくさい(省略記法) 名前付きスロット コンポーネント内にスロットで置き換えた
http://togetter.com/li/1050610 をみて突発的にOnsenUIで回転寿司してみました。 無駄にVueJSも使ってますw 結果はこちら(Monacaで作ってます) ソースは /* フッターの背景 */ div#footer-bk { width:95%; /* 横の幅を100% */ height: 32px; /* アイコンサイズにする */ position: absolute; /* 絶対位置指定することを定義 */ bottom: 32px; /* 絶対位置指定(左0px,下0px) */ padding: 0px 0px, 0px, 0px; /* 上下に余白を取る */ overflow: hidden; } /* フッターの表示領域 */ div#footer{ border: solid #fff; /* 表示領域を白枠で囲う */ } <!DOC
はじめに vuejsはとっつきやすく完成度の高いJSフレームワークだと思っていますし、日本語のドキュメントも充実しています、実際に下記の機能も全て公式ドキュメントに記載されている内容です。 しかしながら、実際にやりたいことと機能名の間に乖離があったりして、いざ使用する時に意外に実装方法などを見つけにくい場合も当然ながら存在するため、自分用に Vuejs のちょっと便利なコンポーネントの機能をメモっておきます。 お品書き 共通した親要素を使いまわしたい(スロット配信) パラメーターによって使用するコンポーネントを変えたい(動的コンポーネント) 複数のコンポーネントで、同じ処理を使いまわしたい(ミックスイン) 出力するタグを動的に指定したい 共通した親要素を使いまわしたい いわゆるラッパーコンポーネント、例えば10個のコンポーネントを作る必要があるとして、その全てが共通したヘッダやフッタを持っ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>A test</title> </head> <body> <div id="app"></div> <script src="./src/index.js" charset="utf-8"></script> </body> </html> 一部抜粋 "scripts": { "start": "parcel index.html", "test": "echo \"Error: no test specified\" && exit 1" }, "devDependencies": { "babel-preset-env": "^1.6.1", "babel-preset-vue": "^2.0.0", "parcel-bundler": "^1.1.0", "vue
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く