[Vue3対応]Vue.jsでドラッグ＆ドロップするなら「Vue.Draggable」がおすすめ | カバの樹
Vue.Draggableは、Vue.js製のドラッグ＆ドロップコンポートネントライブラリです。 現存するVue.js製のドラッグ＆ドロップライブラリとしては、最大の人気を誇ります。 コンパイルを必要としないUMD用のJSファイルが用意されているので、jQueryからの切り替えも容易に行う事が可能です。 単純にドラッグ＆ドロップの機能が欲しければ、このライブラリを選んでおけば問題無いはずです。 主な使用用途の並び順を変更するのはもちろん、複数のエリアを移動することが可能です。 さらにスマホにも対応しており、タッチイベントによる移動も可能となっています。 基本的な使い方、ちょっとした応用などコピペで1分のサンプルを公開しています。 The post [Vue3対応]Vue.jsでドラッグ＆ドロップするなら「Vue.Draggable」がおすすめ first appeared on カバの樹.
![[Vue3対応]Vue.jsでドラッグ＆ドロップするなら「Vue.Draggable」がおすすめ | カバの樹](https://cdn-ak-scissors.b.st-hatena.com/image/square/0d638f4ac09e6e984bef11328422794421895813/height=288;version=1;width=512/https%3A%2F%2Fwww.kabanoki.net%2Fwp-content%2Fuploads%2F2017%2F11%2Fvue.dragable_main.png)
Vue.jsの基本記法をおさらいしつつ、Nuxt 3ならではの「useAsyncData」「useFetch」機能を試してみよう
本連載では、Webページのユーザーインタフェース（UI）構築に「Vue 3」を利用したフレームワーク「Nuxt 3」の活用方法を紹介します。前回は、Nuxt 3の概要、Nuxt 3プロジェクトの生成・実行、Nuxt 2のプロジェクトでNuxt 3の機能を利用するNuxt Bridgeを紹介しました。今回は、Vue.jsの基本記法を簡単に確認した後、Nuxt 3で利用できる「useAsyncData」「useFetch」機能を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）を構築できるVue.jsとともに、様々な追加機能をまとめて提供するフレームワークです。現在次期バージョン「Nuxt 3」が開発中で、2022年4月にリリース候補（RC）版がリリースされました。 前回は導入編として、Nuxt 3の概要を説明するとともに、Nuxt 3プロジェクトを生成・実
Framework7 日本語サイト - iOS、Android、デスクトップアプリケーションを構築するためのフル機能フレームワーク
Framework7 - は、ネイティブなルック＆フィールを持つモバイル、デスクトップ、またはウェブアプリケーションを開発するためのフリーでオープンソースのフレームワークです。また、必要に応じてアプリのプロトタイプをすぐに表示できる、不可欠なプロトタイピングツールでもあります。 Framework7が提供する魅力的なUIコンポーネントのセットを使えば、ウェブアプリ、プログレッシブウェブアプリ（PWA）、iOSおよびAndroidアプリをネイティブなルック＆フィールで作成することができます。 また、ElectronやNW.jsなどの追加ツールと組み合わせることで、ネイティブなデスクトップアプリを構築することができます。 Framework7では、お好きなツールをお使いいただけます。HTML、CSS、JavaScript以外の使用を強制されることはありません。Framework7でアプリを作る
Vue.jsの世代交代が到来！ Vue 3デフォルト時代の「Vue.js開発新常識」
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsでコーディングするための基本的な記法を説明しました。今回はVue.jsの公式ブログから発信された「Vue 3をデフォルトバージョンにする」発表と、それに伴って、これまでと変わっていくVue.js開発の新常識を紹介していきます。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 本連載ではVue.jsの最新バージョンとなる「Vue 3」を用いてきましたが、実は
2022年の最新標準！Vue 3の新しい開発体験に触れよう - ICS MEDIA
2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueConf Toronto 2021（セッション動画）でようやく次の定番と言える構成がアナウンスされました。この記事では、Vite・cteate-vue・<script setup>・Piniaといった新しい推薦構成を紹介し、Vue 2時代から何が良くなるのかを比較します。 新しい構成は何が良くなる？ メリットを確認 新しい構成ではプロジェクトを作成する際のコマンドラインツールからVS Codeの機能拡張やコードの書き方まで、さまざまな部分が変わっています。個
「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。初回となる今回は、簡単なサンプルを通して、Vue.jsとTypeScriptの概要と機能を紹介していきます。 はじめに Webフロントエンド開発の分野では、JavaScriptを利用して動的なWebページを構築できるライブラリーやフレームワークがいくつかあります。Googleが中心となって開発しているAngularやその前身であるAngularJS、Facebookが中心となって開発しているReactなどが有名です。 本連載で取り上げるVue.jsも、そのようなフレームワークの一つです。JavaScriptを利用して、データとWebページの内容を結び付けて（バインディングして）表示したり、Webページ
管理画面テンプレートも用意されたオープンソースのVue.js向けUIフレームワーク・「Vuestic UI」 - かちびと.net
Vuestic UIはオープンソースのVue.js向けUIフレームワークです。Vue 3に対応しており多数コンポーネントに加えて管理画面テンプレートも用意されています。 コンポーネントはアラートやボタン、トグル、フォーム、アコーディオン、モーダル、カード、リスト、パンくずやタブ、ページネーション、ローダー、プログレスバーなどなど様々なプロジェクトで使われるUIコンポーネントが50以上用意されており、レスポンシブにも対応しています。 また、アクセシビリティとしてキーボードナビゲーションをサポート、TabキーやShift + Tabなどで全てのインタラクティブ要素にフォーカスできるよう設計されています。 更に、管理画面テンプレートも用意されているので管理画面を持つWebアプリ等のプロジェクトにおける施工工数を大幅に削減できる可能性を持っているのもメリットと言えそうです。 コンポーネント、管理画
新Vue.js「Vue 3」でコンポーネント実装法を大きく変える「Composition API」
はじめに Vue.jsは、Webページのユーザーインタフェース（UI）を構築できるフレームワークです。2015年のバージョン1（Vue 1）、2016年のバージョン2（Vue 2）に続き、バージョン3（Vue 3）が開発中で、2020年第2四半期にリリース予定です。 本記事では、全2回にわたって、Vue 3の新機能を紹介していきます。今回は、Vue 3で導入されるコンポーネントの新しい記述形式「Composition API」を説明していきます。 対象読者 Vue 3の概要を把握したい方 新しいライブラリーを試してみたい方 これからVue.jsをプロジェクトに採用する予定の方 必要な環境の準備 本記事のサンプルコードは、以下の環境で動作を確認しています。 Windows 10 64bit版 Node.js v10.18.1 64bit版 Vue.js 3.0.0-beta.15 Vue C
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Naive UI
Vue.js CSVファイルを読み込み表示[FileReader]
JavaScriptフレームワーク「Vue 3」と「Nuxt 3」の活用一覧
Swiper - The Most Modern Mobile Touch Slider
Vue3への移行は可能？Vue2のコードをComposition APIで書き換えてみた - bitA Tech Blog