【Vue.js 3】v-bindの機能ぜんぶ書く - Qiita
たまたまVue.jsのv-bindについて強く調べる機会があって、実はv-bindの持つ全ての機能について説明してる記事って無いかも？と思ったので、「ぜんぶ」とまではいかないかもしれないけど思いつく範囲のv-bindの機能を列挙するつもりです。 Vue.jsのバージョンは3に限定します（v2も調べ直すの面倒なので）。 v-bindの基本 Vue.jsのディレクティブの一つです。つまりテンプレートに記述するHTML属性っぽいところに記述できるVue.jsの構文の一つです。 ディレクティブがなんなのかのドキュメントはここ（英語）です。 v-bindのAPIとしてのドキュメントはここ（英語）です。 基本機能 HTML要素に使用すると、属性を動的に設定できます。コンポーネントに使用すると、コンポーネントのプロパティを動的に設定できます。 HTML要素に使用する例：
Vue.jsで動的にコンポーネントを生成・削除・マウントする方法 - Qiita
はじめに 普段Vue.jsを使って開発をしているのですが、ある日、開発をしていたらコンポーネントを動的にマウントしたいという希望が出てきました。 この記事では、Vueのコンポーネントを動的にマウント、それに伴い動的にマウントしたコンポーネントを削除したり、propsを設定したりする方法について説明します。 どんな時に使うか 例えば、ボタンを押したらテキストエリアが出現するコードについて考えてみます。 これぐらいであればjQueryでできるかもしれませんが、テキストボックスにcssで装飾などをつけている場合には、コンポーネントにして、それをappendしたいと思います。Vueを使えばイベントの定義なども非常に簡単になるので一石二鳥です。 v-ifやv-showなどでもできますが、コンポーネントを最初どこに追加するかわからない場合などには動的にマウントする必要が出てくるでしょう。 ただ単にコン
Storybook6をVue.jsのプロジェクトに導入し、新機能であるStorybook Argsを活用してVue.jsのDXを最高にした話 - Qiita
Storybook6をVue.jsのプロジェクトに導入し、新機能であるStorybook Argsを活用してVue.jsのDXを最高にした話JavaScriptVue.jsフロントエンドJeststorybook はじめに 最近iCAREさんの所でVue.jsを一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回は2日前にリリースされたStorybook6をVue.js + TypeScriptのプロジェクトに導入した話をします(執筆時点). 前置き Storybook自体はずっと使っていたのですが、6系に関してはbetaの頃からrfcとreleaseノートを全て追っかけて追っかけはじめ、使っていました. そしてついにrcが取れたので今回はその内容とiC
Vue.js JWT Authentication with Vuex and Vue Router - BezKoder
Overview of Vue JWT Authentication example We will build a Vue application in that: There are Login/Logout, Signup pages. Form data will be validated by front-end before being sent to back-end. Depending on User’s roles (admin, moderator, user), Navigation Bar changes its items automatically. Screenshots – Signup Page: – Login Page & Profile Page (for successful Login): – Navigation Bar for Admin
俺がやらかしたVue mixinのアンチパターンから学ぶmixinの使い方と代替案
VueComponent間で再利用可能な部品を実装するための機能がmixinです。mixinを使った共通化の例はよく見かけますし、私もしばしばやってきました。ただ、どうも自分の実装方法だと後々不便になったり見通しが悪かったりと、使い勝手の悪いものになってしまうことが多かったです。 そこで今回は自分の過去の実装例を見返しながら、なぜ失敗したのか、mixinをどうを使うべきかについて、現時点の考えをまとめてみます。 この記事で紹介する失敗例は、私が携わったプロダクト開発においてデメリットの方が大きかった実装例です。 便宜上「アンチパターン」「失敗例」といった表現をしていますが、あくまで個人的にやりたくないパターン程度の意味合いです。 失敗例1. Template Methodパターンを意識したmixin 暗黙的挙動の危うさ OverrideではなくMergeしているだけ Classの継承とmi
Vue.js + Vuexでデータが循環する全体像を図解してみた - Qiita
2019年の2月まで表参道のプログラミングスクールでVue.js(+Nuxt.js)を教えていました。 とある生徒に「Vue.jsとVuexの関連がわからないので図解して欲しい」と頼まれてホワイトボードにサクッと書いて説明してみたらわかりやすいと大好評。 しかもその生徒が私のラフ図をキレイな動画に作り直してくれたのでカットごとの紹介記事を書くことにしました。 この記事でわかること state/mutations/commit/actions/dispatchの違いがわかるようになります。 getterやsubscribeについては扱いません。 実際のコードの書き方にも触れません。 Vuexを使ってはいるけど理解できなくて苦しんでいる方向けの内容です。 なぜVuexを使うのか Vuexの図解に入る前に、私がVuexを使っている理由を説明しておきます。 Vuexのメリットが明確でないと図があっ
Vue.jsで開発を始める前に決めておきたい事 - Qiita
ここ１年ほど実務でVue.jsを利用してWebアプリケーションを開発しています。 今回はVue.jsを使ってチームあるいは個人で開発を始める上で予め考慮しておくと良さそうな事をいくつか書きたいと思います。 コンポーネントルール Vue.jsは単一ファイルコンポーネントによって、とてもシンプルな記述でコンポーネントを作る事ができます。しかし、開発者同士でコンポーネントの認識を揃えておかないと同じようなコンポーネントが作られてしまい、保守性を低下させる要因になってしまいます。 そのため、昨今ではAtomic Designなどの考え方をベースにコンポーネントを管理する方法が用いられています。Atomic Designを用いたコンポーネント設計方法については、以下の記事が参考になるかと思います。 Vue.js × Atomic Design - it's an endless world. いずれ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x