GitHub - vitejs/vite-plugin-vue2: Vite plugin for Vue 2.7You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
【Laravel × vue.js】影響範囲最小限でvue2→vue3を行う
そろそろvue3も使ってみるかーと思い腰を上げて、Laravel×vue2のプロジェクトを vue3に上げて観ました。 その時の手順を記載します。 vue2→vue3を行う では、早速vue2からvue3に移行します。 関連パッケージをアップデートする 僕が引っかかったポイントとしては、 vue-js-modal というライブラリがvue3対応してなさそうということです。vue-js-modal が入っていると依存関係が解決せずに、vue3にアップグレードできなさそうでした。 僕は vue-js-modal を削除して、vue3の新機能である「teleport」を使ってモーダルをリプレイスしていきます。 他にもvue3で使えないライブラリはあるかもしれないですね。。。 package.jsonを修正する package.jsonをこのように変更します。 "scripts": { "deve
【Vue.js 3.2】`<script setup>` 構文がすごくすごい
<script setup> 構文とは Vue.js 3.2 から <script setup> 構文が使えるようになりました。これは単一ファイルコンポーネント(SFC)内で Composition API を使用している際に使える糖衣構文です。下記のようなメリットを得ることができ、公式からも使用が推奨されています。 ポイラープレートが減りより簡潔になる props と emit を定義する際に純粋な TypeScript の構文が使える ランタイムのパフォーマンスが向上する IDE のパフォーマンスが向上する 基本的な構文 <script setup> 構文をざっくりと説明すると、従来の Composition API における setup() 関数内部を <script> 直下に直接記述することができるという構文です。 単一ファイルコンポーネントの <script> タグにsetup属
高機能なセレクトボックス「vue-select」の使い方 | カバの樹
<script src="https://unpkg.com/vue-select@latest"></script> <link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css"> 導入手順 管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。 このサンプルでは、検索機能付きのセレクトボックスを実装します。 step 1ライブラリの呼び出し ES6等で実装する場合 import Vue from 'vue' import vSelect from 'vue-select' import 'vue-select/dist/vue-select.css'; UMDで実装する場合（CDNを使用する場合） const vSelect = VueS
2020年秋にVue.jsのアプリケーションを作るなら、押さえておきたい5つのポイント | フューチャー技術ブログ
TIGの伊藤真彦です。 ここ最近はVue.jsでのフロントエンド開発を行っています。 ほぼ何もない状態からのスタート段階から始めたのですが、その際調査したことが学びになったので共有します。 ※この記事は 2020/10/13 に執筆されました。調査日は2020/08/17～2020/09/01 のため、バージョンなど当時と状況が異なるものがあります。この1ヶ月の間でも、alphaからbetaに変わったり、betaが取れたりと進化が速いです。 公式ライブラリのステータスはこちらもご参考ください。 https://v3.vuejs.org/guide/migration/introduction.html#supporting-libraries 前提として押さえておきたい2点のポイント環境構築はVue CLIフューチャーでは仕事ですぐに使えるTypeScriptと題しまして、TypeScri
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTipsJavaScriptTypeScriptVue.jsフロントエンドvue-cli はじめに 最近iCAREさんの所でVue.jsを一緒にやらせていただいているのですが、フロントの技術スタックがGraphQL + Vue.js + TypeScriptで開発しており、そこでのVue.jsの開発体験がかなり良く、iCareさんの詳細なノウハウを公開しても良いと言っていただけたので、言語化し、整理して、共有出来たらと思います. ※ いつも通り記事の内容に意見がありましたら直接編集リクエストをください 前置き 今回のサンプルは@vue/cliを利用し、プリセットはTypeScriptだけいれときました. versionは2020年7月16日
エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA
Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
Vue開発者のためのVue.jsベストプラクティス集15選 - Qiita
はじめに みなさん、Vue使ってますかー！・・・・・・・（へんじがない。ただのしかばねのようだ。） 私は毎日使ってます。が、正しい使い方というのがいまいちわかっていません。ということで、ネットで拾ってきた情報を元にVueで開発する上でのベストプラクティス集15選をまとめてみました。 「ふんふんそうだよね〜」といったものから「えー！？そうなのー！？」となるものまで集めています。皆さんの開発の手助けになる情報が入っていると幸いです。 また、間違っている内容やさらに良い方法等あれば、コメント欄にて（優しく）ご指摘いただけるととても嬉しいです。 1. v-for内では必ず:keyを使う v-forディレクティブでkey属性を使うと、データを操作するのに役立ちます。さらに、Vueがコンポーネントの状態を追跡し、それぞれのエレメントに対し継続的に参照ができるようになります。 特に、アニメーションやVu
とても簡単にドラッグアンドドロップが実現できる Vue-draggable を使ってみた ｜ Developers.IO
西田@大阪です 以前 v-kansai Vue.js/Nuxt.js meetup #13 に参加させていただいた時に気になっていた Vue.js でドラックドロップでリストを入れ替えることができる Vue-draggable を使ってみました SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.js プロジェクトの作成 Vue.jsのプロジェクトを作成します。今回は今流行りの TypeScript を選びました $ vue create vue-draggable-sample ? Please pick a preset: Manually select features ? Check the features needed for your project: TS ? Use class-s
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"> での例です。 公式リファレンスにあるように、チェックボックス、ラジオボタン、セレクトボックスの場合はプロパティが異なります。 表にまとめると、次のようになります。
LaravelからVue.jsを使う最短レシピ - Qiita
以下古い情報です この記事は2018年3月に書かれた記事で、Laravel5.4をベースに記載しています。 （執筆時点では2020年4月ですが）今からこの手順通りにはできませんので、こちらの記事に移動してください。 Laravel7からVue.jsを使う最短レシピ - Qiita Laravel から最短でVue.jsを使う インストールから動かして本番投入まで一通りっていうのが見つからなかったのでまとめてみる。 知らないとわかんないよそんなの！みたいな罠がそこかしこに。 TL;DR bladeテンプレートの修正とコマンドをいくつか実行すれば使える bladeのいじるとこ クローンしたら割りといい感じになるリポジトリつくった fruitriin/laravel-vue-example 今回の環境 macOS High Sierra PHP 7.2 (composerがインストールされている
Vue.jsサンプルコード（29）フィールドごとに全角英数字入力と半角英数字入力を自動で切り替える｜TechRacho by BPS株式会社
前記事: 28. 文字の大きさをボタンで変更する 次記事: 30. パスワードを自動生成する 29. フィールドごとに全角英数字入力と半角英数字入力を自動で切り替える Vue.jsバージョン: 2.5.2 [全角]フィールドに入力する英数字は全角に、[半角]フィールドに入力する英数字は半角になります。 日本語入力には影響しません。 画面をリロードすると最初の状態に戻ります。 ポイント watchで変数の変更を監視しています。watchの内部で変数をさらに変更しても無限ループになりません。 const vm = new Vue({ el: "#app", data: {a: "", b: ""}, watch: { a: function(v) { this.a = v.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharC
v-modelにオブジェクトをバインディングする場合のコンポーネント実装を考える - Qiita
まとめ propsで受け取ったオブジェクトはイミュータブルなものとして扱う v-modelを使うには、算出プロパティのgetterでpropsの参照を、setterでイベント通知をさせる 配列をv-forでループしながらv-modelにバインドするのは無理そう はじめに いくつかの入力項目をドメインごとにまとめた小さな子コンポーネントに分け、親コンポーネントでそれらをひとまとめにするような構成を考えます。 親コンポーネントは、子コンポーネントの構成と同じ、もしくは近い構造のオブジェクトを状態として持ち、子コンポーネントにそのオブジェクトや配列をv-modelでバインドするような実装になっています。 例えば以下のような形です。 <template> <div class="contact-info"> <input-contact-name v-model="model.name" /> <
Vue.js で絞り込み検索できるドロップダウンリスト (select) をつくる
今回は Vue.js で作る「絞り込みできるドロップダウンコンポーネント」 を紹介します。 そう、「あー、あのプルダウンに検索ついた『あれ』、あれでいいよ」とか「このドロップダウン、なんで検索すらできないの？」とか言われがちなのに、標準では存在しなくて毎回つくる羽目になって、すぐできるだろうと思ったら意外と手間がかかりまくるコントロールの選手代表です。はい。 とはいえ、さすが Vue ですので、 jQuery なんかの時代よりはずいぶんスマートに書くことができるようになっています。同じようなコンポーネントが欲しくなった人の助けになれば幸いです。 前提条件 Vue.js v2 ES2015 ぐらい シングルファイルコンポーネント Scoped SCSS なにはともあれサンプル とりあえず実際の動作例をご覧ください。ソースコードも見られるので、参考にどうぞ。 なるべく汎用的にするため、必要最小
Vue.jsとjQueryライブラリを共存させなければいけない場合は、コンポーネントに閉じ込める。(select2版) | SAGA.TXT
禁断の融合魔術 もうjQueryなんて使いたくない！ Vue.jsや、Reactを使って脱jQueryするんだ！ こんな、言葉が叫ばれて久しい昨今、皆様どうお過ごしでしょうか？ 新しいプロジェクトでは、ほとんどが、脱jQeryを果たしていても、各フレームワークのテンプレートエンジン+jQuery+Vueが融合しているプロジェクトも実はあったりするのではないでしょうか？ または、お客様から、 「いやだ！この『ポワン』っていうアニメーションが気に入ってたんだから、このカレンダーはそのままのデザインにしてほしい！」 などの要望があり、泣く泣く、jQueryライブラリを使う事もあるかもしれません。 そんなときは、以下の方法で、なるべく被害が広がらないような、状態にしておきましょう(もちろん、Vue.jsを使用する場合は、jQueryを極力使わない選択をするのがベストです。) 対応前 mounted
第二回 Vue.jsでWebアプリをつくろう！ | MONSTER DIVE
前回、Vue.jsのトリコになって、試しに時計アプリを作成してみましたが、二回目の今回はもう少し複雑なアプリを作りたいと思います。 作るのはiTunesのAPIを使ったiTunesSearchです！ 実装ポイントはAPIとの通信による非同期処理とそれに伴うローディングの実装、親コンポーネントと子コンポーネントの連携方法などです。 開発環境構築 基本的な開発環境の構築は前回の記事を参考にしてください。 今回は axios というhttp通信を行う為のライブラリを使用するので、 コマンドプロンプト（ターミナル）に npm install -S axios と、入力してインストールしてください。 これで準備は完了です。 開発開始 前回同様、ファイルの整理から始めます。 src/App.vue を開いて <template> </template> <script> </script> <styl
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTipsアーキテクチャVue.jsElmReactAngular2 はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 もちろん、Vue.jsのコンポーネントシステムをフル活用し、Vuexを入れていないプロジェクトの経験もあります。 現在は構築したシステムを保守・運用しています。 また、勉強の為にReact、 Angular、 最近はElm等にも少し触れています。 その際に得られたノウハウ、Vue.jsが他のライバルフレームワークと比べた際に現時点で本当に勝っている利点やノウハウを言語化し、共有
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Vue】オブジェクト追加・削除には注意が必要👮♂️ - Qiita
Vue2.0とnl2br - Qiita
Loading...