ライブラリ不要！Vue.jsとSVGで簡単に動かせるUIを作る - Qiita
はじめに Vue.jsを普段開発で使っていて、SVGとの相性がすごく良いと感じてます。 Vue.jsのドキュメントでもアニメーションなどの紹介もされていますが、 今回はブラウザで編集可能なGUIの土台として、 使えそうなTipsを書いていきたいと思います。 Vue.jsのプロジェクトを作成していく 今回使っていくのはVueCLI v3.xの環境で開発していきます。 標準でプロジェクト作成のUIなども付いており、非常に開発しやすいです。 SVG内でズーム・パン風の機能を実装してみる 早速ですが、SVG内でズーム・パン風の機能を作って見たいと思います。 下記のような感じになります。 （MacBookProなどのノートPCですと二本指で開いてズームしたり、 二本指でスライドして、移動したりして、操作が実感しやすいと思います。） コードで実際に実装するとこのような形です。 移動の場合は差分値分移動
'v-slot' directive doesn't support any modifierとエラーが出たときの対処方法。 - Qiita
Nuxtを利用していると、プロジェクトの立ち上げ時に、ESLintというLintingツールをいれると、 v-slotで書いたとき部分に下記のようなエラーが出た。 <template> <v-data-table dense :headers="headers" :items="items" class="elevation-1"> <template v-slot:item.actions="{ item }"> <v-btn @click="deleteRow(item)">delete</v-btn> </template> </v-data-table> </template> <script lang="ts"> import { Component, Vue } from 'nuxt-property-decorator' import axios from 'axios' @
Composition APIを使って感じた「これどうなの？」
はじめに Vue.js のバージョン 3 系から導入された新しいコンポーネント形式として、「Composition API」があります。 昨年業務の中で、Composition API を使ったコードを書いてきましたが、その中でいくつも「これどうなの？」となることがたくさんありました。 そんな「これどうなの？」を自分の中での整理を含めて書いていきたいと思います。 Composition API とは Composition API を知らない方にざっくりとだけ伝えると、従来の Options API で切り離すことのできなかったリアクティブ値とリアクティブ値に関連した処理を UI コンポーネント（View）から切り離すことのできる技術です。 簡単に例を書きます。 export default { data: () => ({ count: 0, }), methods: { increme
【Vue.js】Composition APIを使用した共通関数の作り方 - プログラマーノート
はじめに mixisは共通関数としてどうなのか vue.jsで共通関数をどう作るか 共通関数のメリット Composition APIで使用可能 オブジェクト指向的に考えられる どこから呼び出したのか分かりやすくなる まとめ はじめに こんにちは。エンジニアの仕事をしている、たかふみです。 本日は、vue3より正式導入された、Composition APIを使用した共通関数の作り方についてまとめたいと思います。 Composition APIを共通化する際に、参考としてください。 mixisは共通関数としてどうなのか vue.jsには、mixinsという機能がありますが、mixinsには以下のデメリットがあります。 Options APIで動く想定なのでComposition APIでは使いにくい。 オブジェクト指向的に考えると複数のインスタンスを持てない。 グローバル定義した場合、どこで
Vue Datepicker
PowerfulSupports multiple modes such as range, various pickers, multiple calendars, custom components, and many more. ModularOffers a great range of features, slots and props, while providing a way to customize for specific needs.
emacsでvue-modeを使ったときに設定メモ
概要 AdamNiederer/vue-modeを使うことで vue ファイルを編集するときにいい感じハイライトなどをしてくれます ただ少しつまづく点があったのでそこも紹介します 環境 emacs 27.1 mmm-mode 20200908.2236 vue-mode 20190415.231 typescript-mode 20220815.1954 インストール package-list-packagesから以下をインストールしました mmm-mode vue-mode typescript-mode script タグの setup に対応していない これ https://github.com/AdamNiederer/vue-mode/pull/120/files が取り込まれていないため setup 構文がある場合に script タグをハイライトしてくれません 直接 vue-
Vue 3 Composition API を使ってみよう - Qiita
// MyTodo.vue <template> <todo-list v-for="todo in sortTodo" :todo="todo" :key="todo.id" @toggle="toggleTodo" @remove="removeTodo" /> <add-todo @add="addTodo" /> </template> <script lang="ts"> import { computed, defineComponent, reactive, watchEffect, onMounted } from 'vue' import TodoList from '@/components/TodoList.vue' import AddTodo from '@/components/AddTodo.vue' import { fetchTodo } from '@/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
@coddicat/vue-pinch-scroll-zoom
Vue.js 作成したシングルページアプリケーションをviteでbuildしサブディレクトリにデプロイする
How can I display the current app version from package.json to the user using Vite?
Vue.js new script setup with axios