Vue.js 3.0 の新機能を試す。 〜 Teleport 編〜 - Qiita
2020/05/04 追記 portal は teleport にリネームされたようです。 記事内容も修正しました。 -- 2020年Q1リリース予定のVue.js 3.0の新機能 Teleport を試してみたのでまとめます。 （参考） 以下でVue 3.0（vue-next）の環境構築、他の新機能についてもまとめています。 vue-next（Vue.js 3.0 wip）+ TypeScript + webpackでの開発環境を構築する Vue.js 3.0 の新機能を試す。 〜 Suspense 編〜 Teleportとは？ 定義したコンポーネントが属するDOMツリーとは別の場所に、まるでテレポートしたかのようにコンポーネントを移動できる機能です。 直接指定の位置に表示できるので、 Modal、Tooltipなど要素の上部レイヤーに表示したいコンテンツでもz-indexでのCSSハッ
npm不要どころかHTML1つだけでVueとVuetifyが試せるテンプレート - Qiita
すぐつかえます Vuetify使ってみたいなぁ、Vuetify使ってる本番に手入れする前にちょっとUI実験したいなぁ、、というわがままな俺のために、CDNを使ってすぐにVueとVuetifyで遊べるSandboxテンプレートを用意しました。 テンプレート（HTML） <!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsde
Cell Renderer Components（ag-Grid）の作り方 - Qiita
ag-GridでCell Renderer Componentsを作る 公式ドキュメントからのまとめ。 というかほぼそのまんま。VueJSが射程です。 Cell Renderer Componentsとは セル描画のふるまいをカスタマイズするコンポーネント。 Cell Renderer Componentsのインターフェース 公式ドキュメントより。 interface ICellRendererComp { // Optional - Params for rendering. The same params that are passed to the cellRenderer function. init?(params: ICellRendererParams): void; // Mandatory - Return the DOM element of the component
Elements in iteration expect to have 'v-bind:key' directivesと怒られる時 - Qiita
のように使う時、注意文が出たため、調べてみるとtrack-byに相当するものみたい。 Vue が各ノードの識別情報を追跡できるヒントを与えるために、また、先ほど説明したような既存の要素の再利用と並び替えができるように、一意な key 属性を全てのアイテムに与える必要があります。この特別な属性は 1.x の track-by に相当するものですが、しかしこれは属性のように動作します。従って、これを動的な値に束縛するためには v-bind を使う必要があります リストレンダリング - key なので、以下のように書くことを推奨する
Laravel + vue-routerでハッシュ記号(シャープ記号)をなくしてちゃんと動くようにする方法 - Qiita
ハッシュ記号をなくす方法 vue-routerはデフォルトでは、ルーティングに「#」記号がつくようになっています。 これを消す方法として公式が紹介しているのは、インスタンスを作るとき const router = new VueRouter({ mode:'history', routes:[ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] }) のように、mode:'history'にしろ、とのこと。 でも動かない それをやってもなぜか私の環境では動きませんでした。 環境は以下の通り ・windows10 ・Xampp ・Laravel 5.7 ・vue-router ・vue いずれも2018年10月現在最新版を使用しています。 WindowsのXampp環境ではしばしばルーティングに問題が起きる
Vue.jsで実装するシンプルな吹き出し - Qiita
inputやtextareaの入力中に、ちょっとした入力ヒントを出したい時があります。 そんな時に便利な、focusで出る吹き出しをVue.jsで実装します。 実装デモ See the Pen Input Balloon by Vue.js - flow3 by Shoko Oyamada (@chcltn) on CodePen. 吹き出しの実装の流れ 1. 単純な吹き出しをHTMLとCSSで作る 2. focusとblurでv-showを切り替える 3. 吹き出し内のリンクもクリック出来るようにする 1.単純な吹き出しをHTMLとCSSで作る ごく単純な吹き出しをHTMLとCSSで実装します。 ここではまだ吹き出しは最初から表示されており、focus時の動きはありません。 See the Pen Input Balloon by Vue.js - flow1 by Shoko Oyam
Vue.jsで「変更がないときはdisabledなボタン」を実装する - Qiita
フォームを作っていると、ユーザビリティ向上のため、何かしら入力内容が変わった時のみ、保存ボタンのdisabledを外したい、という場面があります。 ここではそんな「変更があった時のみactiveになるボタン」を作りましょう。 実装デモ See the Pen Activate Button by Input's Change - flow3 by Shoko Oyamada (@chcltn) on CodePen. 実装の流れ inputを並べ、dataを入れておく lodashのcloneDeepでオブジェクトをコピーする submitボタンのdisabledを切り替える 1.inputを並べ、dataを入れておく 「変更のあった時のみactiveなボタン」は、しばしば何かの編集画面に現れます。 なので、まずはJS側でdataに情報を入れておき、HTML側ではinputを並べてv-mo
Vue+Nuxt+Firebaseで作るSPA（１） - Qiita
Vue+Nuxt+Firebaseで作るSPA この記事では、Vue+Nuxt+FirebaseでカンタンなSPAを構築したいと思います。web素人でも、なんとか構築できたので、皆様に紹介したいと思います。 SPAとは spaとは、Single Page Application の略です。平たく言えば、モダンなウェブページを作る技術です。 普通のウェブページは、操作ボタンをクリックすると、カチっといって、画面がまるごと切り替わります。その間、通信速度が遅かったりすると、待たされることになってしまいます。 また、ページが切り替わるので、フォームに入力した内容が全部消えてしまったりもします。 SPAは、これらの欠点がありません。ページは画面全体の切り替えをせずに切り替わりますし、画面が切り替わっても、フォームの内容は消えないようにできます。 私がこの記事でシェアしたい技術を使って趣味で作った掲
Laravelでvue.jsを反映させるには、ハードリロードが必要だった(自動化もあった) - Qiita
##Vueの更新が反映されず泣く（キャッシュの奴め）: Laravel5.6で、vueのcomponentファイルを更新し、(/resources/assets/js/components内) 「npm run watch」とかしても、 「build success」と出るのに、なぜかvueコンポーネント内容が更新されず、かなり悩まされました。 しばし悩んで、とあるチュートリアル動画を見ていたら、 「ハードリロードが必要」というので、やってみると無事更新反映。 考えてみれば、jsファイルがキャッシュされるのは当たり前ですが、 「npm run watch」でその辺も面倒見てくれるのかと思ってしまい、理由になかなか気づけませんでした（汗 思わぬ落とし穴で時間食ったので、私同様ハマった方向けにメモを残します。 追記：最初のハードリロード以降は、無事私の環境では、run watchも機能してくれ
はじめてのvue.js - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? // 送る側 'new Vue(), data:' <textarea v-model="message"></textarea> new Vue({ el: '#app', data: { message: "heeelo" }, }) // 受ける側 'v-model' <input type="text" v-model="message"></input> // 値があったら表示 'v-show' <button type="submit" v-show="message"> // 値があったら隠す (display:none)
Vue.jsで「すべて選択」を実装する - Qiita
checkboxを並べて、それが3つほどで収まっている場合は、それだけでもいいでしょう。 しかし、ユーザーが自身で追加した項目など、何個出力されるか分からない場合があります。 ここではそんな時にあると便利な「すべて選択」を実装してみます。 実装デモ See the Pen Select All Checkbox by Vue.js - flow4 by Shoko Oyamada (@chcltn) on CodePen. 「すべて選択」の実装の流れ dataとv-forでリストを用意 すべて選択が押されたかのフラグを用意 すべて選択が押された時の動きを作成 個々のcheckboxをクリックした時の動きを作成 1.dataとv-forでリストを用意 dataにて、猫の名前を配列catsに入れておきます。 それを利用し、v-forでリストを作成します。 See the Pen Select
Vue.jsでPWAアプリを作る - Qiita
1. PWAとは？ PWA(Progressive Web Apps)はGoogle Chromeエンジニア Alex Russell氏が2015年に考案した概念として知られています。特徴としてネイティブアプリのようなユーザー体験をWEBで提供するのが目的です。 PWAの特徴 FAST : パフォーマンスの良い、軽決な動作 Integrated : OSと統合されたユーザー体験 Engaging : アプリのような体験を提供 Reliable : オフラインでも動作する便利性 PWAを実現するAPI PWAを実現するために中心となる機能を提供するのが「Service Worker」です。 ###Service Worker Service Workerは「バックグラウンドで動作するプログラミング可能なネットワークプロキシ」のことです。Service Workerを利用するとWebページのオ
React/Vue/AngularでDOMのonやhrefにJavaScriptのソース文字列を使うのはアリか？
React、Vue、Angularユーザーに質問。 JSXやテンプレートのHTMLにおいて、デフォルト挙動のキャンセルのために、ネイティブのon属性等を仕込むのはいいのでしょうか？ まずは、アンケートにご回答ください。 React、Vue、Angularユーザーに質問。 JSXやテンプレートのHTMLにおいて、デフォルト挙動のキャンセルのために、ネイティブのon属性等を仕込むのはアリ？ 例 <a href="javascript:void(0)"> <a onclick="return false;"> <body ondragstart="return false;"> <p oncontextmenu="return false;"> — 池田 泰延@Adobe MAX Japan登壇 (@clockmaker) 2018年9月27日 個人的な意見 ここからは個人的な意見です。先のアン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue スタイルガイドに当てはまらないが、合理的だと思われるスタイル - Qiita
Vue.jsの基礎機能 - Qiita
VueとVuexを使った簡単なCRUD - Qiita
Vue.js dataをhtml data属性から取得 - Qiita
Vueの疑問(随時更新) - Qiita
Vuetify パスワード再入力バリデーションを実装する - Qiita
[Vue+Laravel] Vue を使って普通の form を使う - Qiita