v-flex の使い方
<v-container> <v-layout> <v-flex> </v-flex> </v-layout> </v-container> v-container / v-layout は、親要素Flexbox で言うところの、display: flex を書く対象v-container は、コンテナに対して padding がきいているv-layout は padding なしよく使う要素が v-container / v-layout によって違うので、基本両方ちゃんと書くv-flex が、子要素さらに細かい階層までいくときは、v-flex をかますv-container -> v-layout -> v-flex -> v-container -> v-layout -> v-flex -> … よく使うプロパティv-container のみgrid-list-{xs throug
Vue.jsのv-modelを正しく使う - Qiita
はじめに v-modelはVue.jsを使ってフォームを構築する際によく使う機能です。 しかし、意外ときちんと使えていない場面を見かけることが多いので仕様と間違えやすいところを簡単に整理します。 v-modelの動作 公式のリファレンスにある通り、v-modelはv-onとv-bindをまとめて一行で書くためのシュガーシンタックスです つまり以下の二行は同じ動作をします <input v-model="searchText"> <input :value="searchText" @input="searchText = $event.target.value"> ※上記はテキストボックス <input type="text"> での例です。 公式リファレンスにあるように、チェックボックス、ラジオボタン、セレクトボックスの場合はプロパティが異なります。 表にまとめると、次のようになります。
[vue.js] routerでpropsに値を渡してURL遷移する - １分技術ブログ
バージョン Vue.js 2.6.10 概要 routerのpushでURL遷移する際にpropsにデータを渡す方法。 コード ◾️hoge.vue（遷移元） <script> export default { methods: { newPage() { this.$router.push({ name: "user_list" , params: {user_code : this.userid}}).catch(() => {}); }, } }; </script> ◾️fuga.vue（遷移先） <script> export default { props: { user_code: String }, }; </script> router.jsのpropsをtrueに設定する必要がある。 ◾️router.js { path: "/dashboard/fuga", name
![[vue.js] routerでpropsに値を渡してURL遷移する - １分技術ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/64751487494b1eb31cd4168daf8d31c98579282c/height=288;version=1;width=512/https%3A%2F%2Fimages-fe.ssl-images-amazon.com%2Fimages%2FI%2F51z65rpIUxL._SL160_.jpg)
Vue コンポーネントを npm パッケージ化する — Vue.js
最終更新日: 2020年4月25日 基本例元々 Vue コンポーネントは再利用される物です。再利用はそのコンポーネントを1つのアプリケーション内でのみ利用する場合は簡単に行えます。しかし一度書いたコンポーネントを複数のサイトやアプリケーションで利用するにはどうしたら良いでしょう。おそらく最も簡単な解決策は npm を利用する事です。 npm を経由して共有できるようにコンポーネントをパッケージ化する事で、成熟したウェブ・アプリケーションにおけるビルドのプロセス内にコンポーネントを組み込むことができます。: import MyComponent from 'my-component'; export default { components: { MyComponent, }, // コンポーネントの残りの箇所 } 直接ブラウザ内で <script> タグを用いて利用する事もできます: <s
Vue.jsでmousedownとtouchstartのイベントを扱う
(Vue.jsと書いたけど、そんなにVue.jsは関係ない) 業務でVue.jsを用いてウェブアプリを作っているのですが、そのアプリのうち、あるボタンをクリック(タップ)ではなく、触ったとき、つまりマウスのボタンを押し下げた時やタッチデバイスに触れた時にイベントが発生してほしいという要望を受けました。 それを聞いた瞬間、「Pointer Events」が使えると思いました。過去にここのブログでも紹介しています(現時点でIEのみ実装されてるPointer Eventsが超便利 | while(isプログラマ))。過去にはIEでしか実装されてなかったそろそろ他のブラウザでも実装されてるのではないかと思い、ためしにpointerdownで実装してみました(参考：pointerdown – Event reference | MDN)。試しにChromeで動かしてみると、想定通りに動きました！ や
jQueryからVue.jsに乗り換えて良かった点・悪かった点をまとめてみた！ - クラウドワークス エンジニアブログ
今年の3月からクラウドワークスで働き出した高梨です！ さっそくですが、 最近、jQueryで書いていたJavaScriptをVue.jsに変えていくということをやりました！ 「がっつりcomponent化して、API用意して、SPAにして・・・」 みたいな感じではなく、 最低限jQueryでやっていた表示・非表示の処理だったり、金額を計算するといった処理を そのままVue.jsに置き換えていくという感じですね。 実際、Google Trendを見ても ここ数年でVue.jsの人気が急激に伸びているのは事実です。 （実はReactにも大差をつけている） 【Google Trend JS比較】 https://trends.google.com/trends/explore?date=today%205-y&q=vue.js,react.js,angular.js ここでは、実際に実装してみて
【初心者向け】(ほとんど)未経験の私が嵌ったVue.jsの罠 | レコチョクのエンジニアブログ
初めて投稿します。新卒1年目の大久保です。 10月に現在の部署に配属されて初めてVue.jsを触りました。 というわけで、(ほとんど)未経験だった私がまんまと嵌められたVue.jsの罠についてご紹介します。 投稿の位置付けを 「未経験の人はここで苦労するんだよなーというのを知ってもらう」にしているので、 その気持ちで読んでいただけたら嬉しいです。 ちなみにですが、 入社時のプログラミング知識としては大学でやっていたが自分が何をしていたのか説明できない知識の無さで HTML→知らない CSS→聞いたことない JavaScript→Javaの正式名称？ レベルでした(本当)。 Vue.jsとは Vue.jsの公式サイト JavaScript のフレームワークの1つ。コンポーネント指向なのでコードの再利用がしやすい(らしい)。 同じコードをjQuey(JavaScriptのライブラリの1つ)とV
Vue.js
TIP This FAQ assumes prior experience with Vue - in particular, experience with Vue 2 while primarily using Options API. Composition API is a set of APIs that allows us to author Vue components using imported functions instead of declaring options. It is an umbrella term that covers the following APIs: Reactivity API, e.g. ref() and reactive(), that allows us to directly create reactive state, com
はじめてのvue-property-decorator (nuxtにも対応） - Qiita
この記事はVueを勉強している段階からTypeScriptでクラスベースのVueアプリを作りたい！という方へ向けて例を交えながらvue-property-decoratorの機能を基本と応用、上級の３セクションに分けて説明していきます。 基本では、Vueでアプリを作る上で必須となる機能を、応用では用意されている便利なデコレータを、上級では普通の開発ではほぼ使わない機能について説明します。 とりあえずは基本のみ理解しておけば困ることはないでしょう。 また、最後にnuxt-property-decorator独自のデコレータも紹介しています。 2019/12/09 追記：nuxt-property-decorator独自のデコレータの紹介を追加しました 動作確認バージョン vue-property-decorator v8.4.2 nuxt-property-decorator v2.5.1
Vue.js to TypeScriptの書き方一覧 - Qiita
最近ひたすら既存のVueプロジェクトのTypeScript化をやっているのでメモとしてまとめます。 （2019/09/09 追記） vue-class-componentはvue3のRFCから外されたようで、現在は、Composition APIがRFCとなっています。 Composition APIでのTypeScript化についてはこちらの記事をどうぞ https://qiita.com/ryo2132/items/f055679e9974dbc3f977 前提 .vueファイルで<script lang="ts">を使う vue-property-decoratorを使ったデコレータ方式のTypeScript化を行う data dataはそのままクラスのプロパティとして宣言します。 JavaScript <script > export default { name: 'Human'
状態管理 — Vue.js
最終更新日: 2022年1月15日 公式 Flux ライクな実装大規模なアプリケーションは、多くの状態が色々なコンポーネントに散らばったり、コンポーネント間の相互作用のために複雑になりがちです。この問題を解消するために、 Vue は Elm から触発された状態管理ライブラリの vuex を提供します。vue-devtools とも連携し、特別なセットアップなしでタイムトラベルデバッグを提供します。 React 開発者への情報もしあなたが React のエコシステムから来たのなら、最も人気のある Flux 実装の redux と vuex がどう比較されるか気になっていることでしょう。Redux は実際に view レイヤの知識を持たないので、シンプルなバインディング を通して簡単に Vue とあわせて利用することができます。Vuex は、 自らが Vue のアプリケーション内にいることを知
Vue Composition API を使ったストアパターンと TypeScript の組み合わせはどのくらいスケールするか？ - Qiita
Vue Composition API を使ったストアパターンと TypeScript の組み合わせはどのくらいスケールするか？TypeScriptVue.jsvue-composition-api Vue.js の公式ドキュメントには「状態管理」という章があり、そこでは単純なストアパターンと、より大規模向けという Vuex ライブラリを使う 2 つの手法が紹介されています。 ですが、それぞれどこに長所・短所がありどのような基準で選択すれば良いのかは「大規模」というあやふやな基準でしか示されていません。実際その境界はどこにあるのでしょうか？ さて、TypeScript も同様に大規模アプリケーション向けと言われます。型安全性の有用さは他言語の世界で実証されています。ところが残念なことに Vuex の API 設計とは極めて相性が悪いというのはよく言われます。現時点で両者を両立させるのは大変
きたるべきvue-nextのコアを理解する - Qiita
この記事は、Vue #2 Advent Calendar 2019の4日目。 @nagimaruxxxさんのフロントエンド開発をjQueryからVue.jsへ乗り換えたので比較してみるの次の記事です。 この記事でわかること jQueryからVue.jsにはじめて移行したとき、「thisのなんちゃらを書き換えると動くんだー！」とか「computedって、依存する値が更新されたら自動で更新されてすごい！」というのが感想でした。 今回は、vue-nextという、いわば、「次世代のvue」でそういった「自動で更新されてすごい」がどのように実装されているか、を解説します。 普段Vue.jsを使っている人は、その裏の仕組みに感銘を受けるでしょう。日々の実装を少しだけ、いつもと違う視点で見れるようになると思います。 普段React.jsを使っている人はきっと、Vue.jsを使いたくなることでしょう。 皆
Vue.js 3.0で搭載される Composition APIをリリースに先駆けて試してみた - SMARTCAMP Engineer Blog
スマートキャンプでBiscuetのエンジニアをしている中川です。 本記事はスマートキャンプ Advent Calendar 2019 - Qiitaの19日目の記事です。 現在弊社のプロダクトであるBOXILとBiscuetは、そのどちらの開発チームもVue.jsを使用して開発しています。 Vue.jsの学習コストの低さやコンポーネント指向は少人数のチームでユーザーに素早く価値を届けていきたい弊社の開発においても重宝しています。 さてそんなVue.jsですが、2020年のQ1にバージョン3.0が正式リリースされることが予告されており、正式リリースに先駆けて目玉機能のひとつであるComposition APIが公開されました。 Composition API RFC | Vue Composition API ドキュメントやAPIリファレンスのみならず、バージョン2系でプラグインとして利用で
とほほのVue.js入門 - とほほのWWW入門
vm.$data, vm.$props, vm.$el, vm.$options, vm.$parent, vm.$root, vm.$childlen, vm.$slots, vm.$scopedSlots, vm.$refs, vm.$attrs, vm.$listeners
とにかく楽してVue.jsでTypeScriptを使いたい
This document provides an introduction and agenda for a session on migrating game server infrastructures to the cloud. It summarizes the experiences of Ubisoft and Behaviour Interactive in migrating their games Dead by Daylight and For Honor from peer-to-peer networking to using Amazon GameLift dedicated servers hosted on AWS. It also discusses how Gearbox Software developed online services for Bo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VueJs Custom currency mask
How to use mask in vuetify text-field?
codit.work
Vue.js Examples
