TL;DR Vue.jsはHTMLをJavaScriptの中に書かなくて済むので、可読性が高いです Vue.jsは双方向バインディングをサポートしており、Reactみたいなsetter/getterみたいな無駄な作業は必要ありません Vue.jsはHTMLとCSSとJavaScriptを分けて記述することができるため、どこを修正すればいいか直感的です ReactはJSX内で{}と()が大量に出現するため、可読性が低く、タイピングミスしたときのバグ探しが大変です 2025年、ReactとVue.jsどちらを選ぶべきか？ 2025年、フロントエンド開発者にとってReactとVue.jsは引き続き主要な選択肢となっています。 1. ReactとVue.jsの基本的な違い React 開発元: Meta（旧Facebook） アプローチ: ライブラリ（必要に応じて周辺ツールを追加） 学習曲線: 中
Vue3ではFragmentsが導入されて、マルチルートノードコンポーネントがサポートされた。 ・Fragments | Vue.js 以下のようなのも対応しているけど、 <!-- pages/index.vue --> <template> <button class="btn mx-2">ボタン1</button> <button class="btn btn-primary mx-2">ボタン2</button> </template> Nuxt3のpagesだと、warningが出てしまう。。 runtime-core.esm-bundler.js:38 [Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. at <Parts onVnodeU
Composition APIだけではない、Vue 3の新機能（2） コンポーネント内容を任意の場所に移動するTeleport Teleportは、コンポーネント内容の一部を、Webページ内の任意の場所に移動（テレポート）する機能です。モーダルダイアログやポップアップなど、コンポーネント外部に記述する必要があるHTML要素に、コンポーネント内容を反映する場合などに利用できます。図2のサンプルでは、コンポーネント内容の一部を、コンポーネント外（index.htmlに記述したHTML要素）にテレポートしています。 図2 Teleportのサンプル（p002-teleport） コンポーネントの<template>部をリスト3に示します。（1）の通り、移動させる内容を<teleport>タグで囲み、to属性にテレポート先のCSSセレクター（ここでは「teleport-target」ID）を指定し
はじめに Vue.jsを用いてポートフォリオなどを作成するとき、Bootstrapを使いますよね。 そのときに、ナビゲーションバーを実装するのが少し詰まった点だったので残しておきます。 大まかな流れやVue CLIに関しては、下記記事を参考にさせていただきました。 ありがとうございました。 https://qiita.com/masa08/items/3474d97a1283dfc275c9 https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2 環境構築 Node.jsのインストール まずは開発環境にNode.jsをインストールして下さい。 https://nodejs.org/ja/ 最新版でも良いですが、LTS（Long Term Support）版のほうが安定動作すると思います。 インストールした後に、念のため下記コマン
I have just started using Vue.js and find myself continuously turning to jQuery to help in certain situations. Most recently I have attempted to, unsuccessfully "trigger" (or emulate) an event, such as an on click or blur event. I know in jQuery you can do the following: $('#my-selector').trigger('click'); But how can this be acheived using Vue.js? I am wanting to move away from using jQuery as mu
dataプロパティでオブジェクトの定義 変更する場合は$setで置き換え 配列中のオブジェクトはループなどで同様に変更可能 例1) 配列の2番目（インデックスのキーが1）の場合にvalueを変更する場合 例2) nameが「test2-Name」の場合にvalueを変更する場合 dataプロパティでオブジェクトの定義 Vue.jsでインスタンスを生成した際、dataオブジェクトに変数を定義した場合のリアクティブな動作についてはご存知だと思いますが、テンプレート内でdataオブジェクトに定義した変数を使用していた場合、変数の中身が変更されるとリアクティブに変更されます。 リアクティブについて詳細に述べるのは別な機会にするとして、簡単に言えば変数が変更されると、それに応じてテンプレート内で使用されている箇所も同時に変更され、変更後の値に応じた振る舞いをします。 単なる文字列(String)や数
vue.jsではSlotを利用することで親コンポーネントから子コンポーネントにコンテンツを渡して表示させることができます。例えばボタンというコンポーネントを作成し、ボタン上に表示されるテキストのみ変更したい場合、親コンポーネントからSlotを使ってテキストを渡すことで子コンポーネントのボタン上に表示させるテキストを変更することができます。ボタン上のテキストを変更できることでボタンコンポーネントを再利用することが可能となります。 本文書ではSlotのみに特化して説明を行っているので本文書を読み終えるとSlot、Named Slot、データプロパティを使ったScoped Slot, メソッドを使ったScoped Slotの4つを理解することができます。 前半はSlot, Named Slotを使って親コンポーネントから子コンポーネントにコンテンツを渡す方法を確認し、後半ではScoped Slo
Vuex mutationでstateの値を変更するでVuexでmutationを実装するまで行いました。 次はVuexのactionについて説明したいところですが、そのためにはajaxのライブラリを導入していたほうが、わかりやすいとので、ajaxライブラリのaxiosの導入方法を紹介します。 Vue.jsではajaxまわりの処理は用意されておらず、外部のライブラリを各自で自由に用意するようになっています。 vue-resourceというライブラリが公式ライブラリとされていましたが、現在ではaxiosを使うように推奨されています。 私も最初はvue-resourceを使用していて、途中でaxiosに変更しましたが、ajax処理の記載方法はほとんど同じでしたので、コードの書き換えも少なくスムーズに移行できました。 パッケージのインストールaxiosのパッケージをインストールします。
<template> <div id="app"> <v-wait for="loading"> <template slot="waiting"> <div> リストをロード中... </div> </template> <ul class="list-group" style="margin: 0 auto; width: 600px;"> <li v-for="(item, key) in myList" :key="key" class="list-group-item">{{ item }}</li> </ul> <button @click='load' class="btn btn-primary">リストをリロード</button> </v-wait> </div> </template> <script> const list = ['メロン', 'モモ', 'スイカ',
<template> <v-app> <Loading v-show="loading"></Loading> <Home v-show="!loading"></Home> </v-app> </template> <script> import Loading from '@/components/Loading' import Home from './views/Home' export default { name: 'App', data() { return { loading: true, } }, mounted() { setTimeout(() => { this.loading = false; }, 1000); }, components: { Loading, Home, }, }; </script> 前提 Vuetifyを使用しているので、<v-app>で
これは、モバイルファクトリー Advent Calendar 2018 の16日目の記事です。 こんにちは、エンジニアのid:tenmihiです。 今日の記事は、vue-routerのナビゲーションガードを利用してページ遷移時のローディング処理を実装する方法のご紹介です。 概要 業務で次のような要件を満たすフォームをvueを用いて実装しました。 フォームが複数のページで構成されている(いわゆるウィザード、ステップ形式) 各ページに遷移するタイミングでフォームの構成に必要なデータをfetchしてきて、結果が返るまではフォームの操作をローディング画面を挟んで制限する ローディング処理についてcreatedフック内のfetch処理の前後でloadingフラグを操作する方法を考えましたが、毎ページでフラグ操作を記述するのが冗長に感じました。 <template> <div> <form> ...
Vue.js 2.3.0から実装された 「.sync 修飾子」がVue.jsを書いていると陥るよくある困りごとを解決したので紹介します！ サンプルコードはこちら↓ https://github.com/harhogefoo/vue-sync-modifier-sample 対象読者 Vue.js 経験者 子コンポーネントに複数のプロパティをバインドさせたい人（Object型も含む） これから大量の入力フォームを子コンポーネントに分割して実装していくんだぜ...な人 よくある困りごと 例えば、新規作成(new)、 編集(edit)それぞれのページの共通のフォームのコンポーネントを実装する場合、 そのコンポーネントにフォームの情報を持つObject型のプロパティを渡したくなりますよね。 Vueでは、プロパティを渡した先でプロパティの情報を更新しようとすると、 以下のようなwarningログが出
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
