最新のVue3.0でウェブ開発はどう変わるか？ - Qiita
こちらの記事は、2019年1月に公開された『 What Does Vue 3.0 Mean for Web Development? 』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 補足: Vue3.0は2019年内もしくは2020年の初めにリリースされると予測されています。 2019年9月時点ではまだv2.6.10であること、ご留意ください。 はじめに 昨年11月、VueのクリエーターであるEvan Youは、Javascriptフレームワークの最新版となるVue 3.0の主要アップデートを紹介しました。 今回のアップデートによってVueはより効率的で、モジュール化され、さらに使いやすくなりました。 これらの変更と、Vue 3.0のリリースによる影響について説明します。 Vueの現在の状況は？ 彼らによると、Vueは「ユーザーアプリケーションを構築するためのプログレ
縦横スクロールつきのテーブルを Web で使いたい - かずきのBlog@hatena
むか～～しむかし、Flash や Silverlight みたいなブラウザープラグイン系のリッチクライアントアプリケーションのプラットフォームと HTML 5 が覇権を争ってた時代がありました。私はブラウザープラグイン寄りの人で「DataGrid コントロールがあるだけでプラグイン系のほう使うわ」って思ってました。 やりたかったことは 表形式でデータを表示したい 表を縦横スクロールしたい スクロールしても固定列や固定行はスクロールしないで欲しい JavaScript で頑張ることで当時でもできてましたが、結構しんどかったら重めだったりと何かと問題がおきがちだった気がするので例えば <DataGrid ItemsSource="{Binding People}"> <DataGrid.Columns> <DataGridTextColumn Header="ID" Binding="{Bin
VueJS is dead, long live VueJS!
With the release of the VueJS 3 "Request for Comment" documentation about two weeks ago, Evan You introduced the VueJS function-based API and has set the VueJS community ablaze. These new ideas are still in the "Request for Comments" stage, so they're far from set in stone, but because the RFC introduces such significant changes, I made a quick summary of what you need to know. NB: All this inform
Vue API calls in a smart way
For a very long time, I wanted to expose different ways to make calls to our API. In this chapter, I will talk about the pattern that worked best for me, so allow me to introduce you to the RepositoryFactory. I love this approach because it scales very well, and at least for me, it has worked almost always. Let me explain why:On the one hand, we will use the repository pattern to access our resour
これまでに公表されたVue.js 3.0に関する情報をざっと眺めてみた – Yohei Noda’s Blog – Medium
(この記事は2018年12月時点の情報を元に書かれています。） この記事は、PLAID Advent Calendar 19日目の記事です。 9/20–21に開かれたVue London以降、9/30のEvan氏によるブログポストや弊社プレイドもスポンサー協賛させていただいたVue Fes Japan 2018を含むイベントなどで、Vue.jsの時期バージョン(3.x)に関する様々な情報が発表されてきました。 既に各情報を見られた方にとっては今更な記事にはなりますが、現状把握と今後のためにざっと眺めてまとめてみました。 公表されている主な情報公開されている主要な情報をリストアップしてみました。 9/30: Plans for the Next Iteration of Vue.js11/3: Vue 3.0 Updates — Vue Fes Japan 2018 (Keynoteの動画は
Vue.jsはより速く、より小さく！〜Evan氏が来日講演から読み解くVue 3の進化〜 - アシアルブログ
こんにちは。Monaca/Cordova担当の内藤です。 今年(2018年)の11月3日に、秋葉原 UDXでVue Fes Japan 2018が開催されました。Vue.jsの開発者であるEvanさんをはじめ、Vue CLI UIクリエーターのGuillaumeさん、Microsoft シニアデベロッパーアドボケイトのSarahさん、Vue Test UtilsメインクリエーターのEddさんらをお招きしています。 開発者であるEvanさんの基調講演では、新しくリリースが予定されているVue 3.0の概要について、お話いただきました。Vue 3.0の特徴として、以下の点を解説していただきました。 より速く より小さく よりメンテナンスしやすく よりネイティブ向けに作りやすく よりあなたのコードの保守性を向上 どれも魅力的な改善点ですが、このブログ記事では特に、コンポーネントやレンダリングのロ
Vue.js v-modelなComponent - ワイのメモ帳なんやで...
Vue.jsを使っていると 「子に渡したpropsの値を変更したら親側の値も変更されるようにしたい！」 というシーンに割とよく直面する。 propsの値はそのままv-modelでは使用できないという制約もあり、回避策の知識がないと割と困ってしまうものである。(公式に書いてあるけどというツッコミは無しな！) なので今回は子のComponentで変更された値を親に反映する方法を紹介します。 実行結果だけ知りたい人はSandboxが一番下にあるのでスクロールしてね☆ modelプロパティを指定する Vue.js 2.2.0 からmodelプロパティが追加された。 詳しくは公式にかかれているが、正直わかりにくかったのでここでも解説する。 子のComponentで以下の宣言をする export default { model: { prop: 'propData', event: 'input' }
「Vueコンサルが教えたくない７つの真実」を勉強してみた - Qiita
Vueの便利なテクニック７つ Youtubeで見つけたので勉強ついでにまとめてみる。 出展 Chris Fritz さん Youtube https://www.youtube.com/watch?v=7YZ5DwlLSt8 資料（Github） https://github.com/chrisvfritz/7-secret-patterns まとめ - 動画とはバージョン違い（英語） https://www.vuemastery.com/conferences/vueconf-2018/7-secret-patterns-vue-consultants-dont-want-you-to-know-chris-fritz/ Productivity Boost - 生産性向上 1. Smarter Watcher 元のコードはこれ。生成時になにかしてアップデート時にもなにかする。よくやる。
GitHub - ktsn/vuex-type-helper: Type level helper to ensure type safety in Vuex
import * as Vuex from 'vuex' import { DefineGetters, DefineMutations, DefineActions, Dispatcher, Committer } from 'vuex-type-helper' /** * Declare module types */ export interface CounterState { count: number } export interface CounterGetters { // getterName: returnType half: number } export interface CounterMutations { // mutationName: mutationPayloadType inc: { amount: number } reset: void // ha
JavaScriptでClean Architectureを導入してみた - Vue.js・Reactのサンプルつき - Qiita
事の発端 始まりはこちらのツイートから。 Usecasesレイヤーを充実させていったらVuex Actionsほとんど使わなくなるな笑 — Andy (@andoshin11) 2018年6月15日 それはどういうことだよ・・・ フロントでどう使うんだ・・・？ と疑問に思い、自分なりに検証・実装してみたいと思ったのが事の発端です。 Clean Architectureとは？ まず根本の理解がほぼなかったので調べることにしました。 こことか https://qiita.com/koutalou/items/07a4f9cf51a2d13e4cdc こことか https://blog.tai2.net/the_clean_architecture.html こことか https://qiita.com/Tueno@github/items/705360b357c2a00c9532 こことか h
TypeScriptでVue.jsを書く – Vue CLIを使った開発のポイントを紹介
2018年8月11日に新しいメジャーバージョンとなるVue CLI 3.0がリリースされました。Vue CLI 3では、公式にTypeScriptをサポートし、 TypeScriptを利用するプロジェクトの生成に対応しました。これにより、TypeScriptでVueを気軽に試せるようになったということで、今回ちょっとどんなものか試してみることにしました。試した中でポイントとなりそうな部分をまとめてみたので紹介します。なお、私は普段はAngularでTypeScriptを書いているため、TypeScriptのクラス構文を使った説明になっています（クラス構文を使わなくても、TypeScriptでvue.jsを書くことはできます）。 目次 はじめに – Vue CLI + TypeScript TypeScript + Vue サンプル Vue CLIでTypeScriptプロジェクトを生成する
Vue.js / Nuxt.js を採用した Web 開発で得た知見 | rakuishi.com
2018 年に入ってからは Vue.js / Nuxt.js を採用した Web サイト開発に携わっています。ログイン機能がある Web サイトで、データは API サーバーを叩いて取得するという構成。最近のフロントエンド開発は、感覚としてはアプリ開発ですね。 Vue.js に加えて Nuxt.js を採用したのは SSR（Server Side Rendering）をしたいという理由に尽きます。SSR することによるメリットは、以下となります： Facebook や Twitter が OGP タグを正しく評価してくれる 検索エンジンがサイトを正しく評価してくれる 副産物として、ログインユーザー情報が描画されて返るため、クライアント側で描画されるまでの空白状態がユーザーに見えない この記事ではそんな Vue.js / Nuxt.js を採用した Web 開発で得た知見を紹介していきます。
2018年Vue.jsとVuexを使ってる人に提案するコンポーネントの分類と設計パターン - Qiita
はじめに 私はVue.js with Vuexを使った業務で1画面３０APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 その際に得られたノウハウを言語化し、共有出来たらと思います。また、これらのノウハウよりも良いノウハウがあった場合は共有・議論して頂けるととても嬉しいです。 ※注釈 この記事はサンプルコードが全然ないです。 OSSの様に気軽に編集リクエストでサンプルコード等を提供頂けたら幸いです！ 目次 コンポーネント設計の使い分けの効果 コンポーネントに関わるレンズの種類と重要性 技術者のレンズから覗く、コンポーネントの分類 プレゼンテーションコンポーネントを更に分類 複雑なコンポーネントの設計パターンとパターン名 デザイナーのレンズでコンポーネントの分類と技術者レンズからのプラクティス 技術者レンズでの
Vue Native
Vue Native is a framework to build cross platform native mobile apps using JavaScript
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Quasar Framework - Build high-performance VueJS user interfaces in record time
GitHub - vugu/vugu: Vugu: A modern UI library for Go+WebAssembly (experimental)
Tiptap - Dev Toolkit Editor Suite
VueToolbox
Clean Architecture with Vue
GitHub - alxpez/vuegg: dnd visual editor - mockups and code in one go!
