はじめに ANDPADでフロントエンドの開発を担当している小泉です。 前回、約3ヶ月前にVue Composition APIをチームで導入して得られたメリットという記事を書かせて頂きました。 その後、今年の5月頃からまた新たなプロダクトの立ち上げを担当する機会があり、フロントの技術選定についていろいろ検討する中で、Vue.jsでもJSXを使って書けること、かなり導入しやすくなっていることを知りました。 そこで、Nuxt Composition API + TSXという組み合わせを採用してみたところ、かなり使いやすく、Vue と React のいいとこ取りができて最高 なのではないかとさえ思いました。 この記事では、そんなVue + TSX の導入方法と、メリット・デメリット、そして使う際のTipsをいくつか紹介しています。今後のフロントエンドの技術選定や、Vue + JSXでの開発に興味
日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 特に、Reactのフックについて具体的な使い方が解説されています。 I created the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 本記事は以前翻訳した記事の2019年Editionで、Reactのフックが追加されています。以前の記事は下記をご覧ください。 ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点 隣の家の芝生は青く見える ReactとVueで作成し
概要ブラウザのリロード時にストアに保持していたデータは破棄されてしまう。 ユーザの操作上リロードが許容すべきセッション情報や更新頻度の高くない情報は保持しておきたい場面がある。 vuex-persistedstateを利用する。(localForgeには対応していない) npm install vuex-persistedstate をした後、下記のように Store のプラグインとして定義する。 import Vue from "vue"; import Vuex from "vuex"; import createPersistedState from "vuex-persistedstate"; Vue.use(Vuex); export default new Vuex.Store({ state: { token: "", }, mutations: {}, getters: {
コンポーネントで参照する各コンポーネントではthis.$storeでVuexの情報が取得できます。 以下のようにApp.vueを変更してビルドすると、hello vuexと表示されます。 App.vue<template> <div class="message"> {{ message }} </div> </template> <style lang="less" scoped> @import "~less/variables"; .message { color: @red; } </style> <script> export default { computed: { message: 'hello world' message () { return this.$store.state.message; } } }; </script>
I'm writing this tutorial to bring some well-deserved attention to Dynamic Components in Vue.js. I extensively use them when building simple single page applications where including a full-blown routing solution can be unnecessary. Dynamic components in Vue allow you to specify a single mounting point where you can dynamically switch between components in your application. Throughout this tutorial
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く