Vue deep Selectorでscoped SASSの子コンポーネントにスタイルを適用する方法 - しぐれづき
vueのscopedスタイルって便利ですよね。 思わぬところにスタイルが適用されるのを防げるし。 ただ、子コンポーネントの一部に対してスタイルを適用したい場合とかよくあると思います。 外部モジュールのコンポーネントのスタイルをオーバーライドしたいとか。 そんなときはdeep selectorを使用することで解決できます。 機能しない例 // outer.vue <template> <div class="outer"> <p class="outer-text">Outer Text</p> <Inner /> </div> </template> <style lang="scss" scoped> .outer-text { color: red; } .inner-text { color: blue; } </style> // inner.vue <template> <div
【Vue3】compositionAPIでDOMを取得する方法 - ちいブログ
DOM取得はレンダリングされた後（mounted）に取るものなので、Vueファイルを読み込んだとき（created）に取ることはできません。 なので、mountedをsetup内で使うときのフック「onMounted」を使ってDOM取得をします。 今の簡単な流れをもう少し砕いてみてみましょう。 Refを使えるようにする ①Refを使うためにimportしていきます。 ②DOM取得したい場所にref属性を追加します。 https://v3.ja.vuejs.org/guide/reactivity-fundamentals.html#%E7%8B%AC%E7%AB%8B%E3%81%97%E3%81%9F%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%95%E3%82%99%E3%81%AA%E5%80%A4%E3%82%92-ref-
Vue.js開発におけるStorybookの導入 - 株式会社ライトコード
Storybookとは？ 「Storybook」とは、UIコンポーネントの開発を手助けするオープンソースツールです。 Storybookを導入することで、下記のようなことが可能になります。 アプリケーションから分離された環境で、コンポーネント単位の挙動を確認できる コンポーネントを一覧できるスタイルガイドとして利用し、チーム内で共有する 「Storybook」は、元々、Reactアプリケーション向けに開発されたツールでした。 現在では、「Vue」や「Angular」などのフレームワークや純粋な html など、様々なフロントエンドに対応しています。 今回は、シンプルなアプリケーションを例に、「Vue」アプリに「Storybook」を導入する流れを体験しましょう！ 【 Storybook 公式ページ】 https://storybook.js.org/ VueプロジェクトにStorybook
Nuxt.jsのpluginsにaxiosの共通部品を実装する - Qiita
はじめに Nuxt.jsにてクライアントサイドのvueからサーバのREST APIを呼び出す際に、vue内のスクリプトにロジックを書くと、他の場所で流用できない。そのため、外部のjsに共通ロジックとしてサーバのAPIを呼び出す処理を記述したかったが、あまり良い例が無かったので、検討&実装してみた（正しいかは不明） Vuexストア内でaxiosを使ってサーバAPIを呼び出すみたなことをやってる人も居たけど、それはちょっと違うだろう（というか気持ち悪い）ということで、pluginsに共通ロジックを作成することにした。 構成 修正する対象は以下の3ファイル（pages/index.vue , plugins/axios.js , plugins/api.js） ROOT ├─.nuxt ├─assets ├─components ├─layouts ├─middleware ├─pages │
Lazy loading and code splitting in Vue.js - Vue School Articles
While mobile-first approach becomes a standard and uncertain network conditions are something we should always take into consideration it’s harder and harder to keep your application loading fast. In this series, I’ll dig deep into Vue performance optimization techniques that we are using in Vue Storefront and that you can use in your Vue.js applications to make them loading instantly and perform
GitHub - vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js
Learn Vue 3: Step by Step on Laracasts Vuejs 2 Authentication Tutorial on Auth0 blog Create a GitHub File Explorer Using Vue.js on Scotch.io Vue.js Tutorial on Vegibit Vuex introduction video - James Browne from London Vue.js Meetup #1 Hybrid App Example with Laravel and Vue.js in Portuguese by @vedovelli Vue.js Introduction Turkish Language on oguzhan.in Vue.js VideoTutoral Series in Spanish (3-8
[Vue+TypeScript] Vue.extend で Vue らしさを保ちつつ TypeScript で書くときの型宣言についてまとめた - Qiita
[Vue+TypeScript] Vue.extend で Vue らしさを保ちつつ TypeScript で書くときの型宣言についてまとめたTypeScriptVue.js はじめに Vue + TypeScript の組み合わせでVueを書くときに、vue-property-decorator を利用して書いていくことが多いと思います。 ただ vue-property-decorator を利用すると、どうしてもVueらしさがなくなるというか、よりTypeScriptにらしい書き方になると感じています。 せっかくJavaScriptでVue書けるようになったのに、全然書き方が違うじゃないか…と挫折しかけることもあるんじゃないでしょうか？ ちなみに私は vue-property-decorator で書くほうが慣れているので好きですが、Vue入門者には厳しいところがあると思うので、 Vu
![[Vue+TypeScript] Vue.extend で Vue らしさを保ちつつ TypeScript で書くときの型宣言についてまとめた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d24dca2ec2445d4f436573a7cfd13be077eac4a9/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVnVlJTJCVHlwZVNjcmlwdCU1RCUyMFZ1ZS5leHRlbmQlMjAlRTMlODElQTclMjBWdWUlMjAlRTMlODIlODklRTMlODElOTclRTMlODElOTUlRTMlODIlOTIlRTQlQkYlOUQlRTMlODElQTElRTMlODElQTQlRTMlODElQTQlMjBUeXBlU2NyaXB0JTIwJUUzJTgxJUE3JUU2JTlCJUI4JUUzJTgxJThGJUUzJTgxJUE4JUUzJTgxJThEJUUzJTgxJUFFJUU1JTlFJThCJUU1JUFFJUEzJUU4JUE4JTgwJUUzJTgxJUFCJUUzJTgxJUE0JUUzJTgxJTg0JUUzJTgxJUE2JUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJUUzJTgxJTlGJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz05YjU1ZjE1M2ZjOWNiYTlkNzc0Yjc5ZGE4NDg4MmU4MA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBpc19yeW8mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTM1NWYxZWUwNjAwZDI3NzYyNjc5ZDMzY2Q4ZWJjNzJi%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dae6cdd9a816ff1f766d7bb611751484d)
Vue.jsで全然使ってない機能とかが割とあるって思って - うしろのこの本ください
吾輩はなんか使ってない/使う機会がないみたいなVue.jsの機能がある。理由はまだない。 最初に言っちゃうとグローバルで使うようなのは殆ど書いてない。Vue.useくらい？ filter <!-- mustaches --> {{ message | capitalize }} <!-- v-bind --> <div v-bind:id="rawId | formatId"></div> filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } マスタッシュ{{}}かv-bindでパイプ演算子をフィルタにかけたいdataに繋げていくことで使える。パイプは複
[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)
Atomic Design思考でVue.js×Plotly.jsでのグラフComponentを実装した結果 - ABEJA Tech Blog
第0章：はじめに こんにちは。はじめまして。 ABEJAでフロントエンドとバックエンドをフラフラしているエンジニアの齋藤(@z-me)*1です。 本ブログは ABEJA Advent Calendar 2019 の9日目です。 不本意ながらABEJAで開催するフロントエンドのミートアップやカジュアル面談でよく、 ABEJAってAIの会社ってイメージはあるけどUI/UXガッチリやってるイメージがない。 と言われる事が多いので、当ブログ編集長*2が言っている通り*3、ABEJAではプロダクトを開発＆提供しているということをお伝えしたいと思います。 今回はその中でも、あまり外部に広く知られていない、ABEJA Insight for Retailの提供しているDashboardで、どのようにUI/UXに力を入れて開発しているのかや、その開発手法(Atomic Design)やグラフCompone
v-modelにオブジェクトをバインディングする場合のコンポーネント実装を考える - Qiita
<template> <div class="contact-info"> <input-contact-name v-model="model.name" /> <input-phone-numbers v-model="model.phoneNumbers" /> <input-mail-addresses v-model="model.mailAddresses" /> </div> </template> <script> export default { data () { return { model: { name: { family: 'Hoge', first: 'Taro' }, phoneNumbers: [ ... ], mailAddresses: [ ... ], } } } } </script> 子コンポーネント側は、親から受け取ったオブジェクトを、inpu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js to TypeScriptの書き方一覧 - Qiita
GitHub - lakb248/vue-pull-refresh: A pull down refresh component implement by vuejs