Nuxt.js のような自動ルーティングを可能にする Vue CLI プラグインを作った - Katashin .info
2018年7月16日VueNuxt.js という Vue.js で SSR をするアプリケーションが簡単に書けるフレームワークがあります。Nuxt.js は SSR だけでなく、webpack の設定やディレクトリ構造なども最初から決められており、規約がすでに存在することによる開発の効率化の面においても注目されています。 個人的に Nuxt.js で便利だと感じている機能にルーティングの自動解決とレイアウト機能があります。通常の Vue Router を使ったアプリではルーティングの設定は自分で書く必要がありますが、Nuxt.js では pages/ ディレクトリ以下の構造から自動的にルーティングの設定を生成してくれます。また、Rails のレイアウトのように、各ページごとにレイアウトファイルを指定することができます。 これらの機能に慣れてしまうと、Nuxt.js を使っていないプロジェク
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
Vue.js #1のカレンダー | Advent Calendar 2017 - Qiita
The Qiita Advent Calendar 2017 is supported by the following companies, organizations, and services.
Vue.jsのpropsカスタムバリデーターを使った堅牢なコンポーネント作成 - Qiita
Vue.jsには、それぞれのコンポーネントのpropsにバリデーションルールを設定することができます。 ReactでいうところのpropTypesのような概念ですが、あちらより基本構造がシンプルであり、反面複雑な条件は自分でバリデーションルールを書くスタイルとなっています。 これまでは受け付けるpropsの名称だけを設定することも一般的でしたが、Vue 2.4以降は公式のスタイルガイドでも、propsに型や独自で定義するバリデーターを定義することを推奨することとなりました。 ですが、従来型の記法が利用されていることもまだまだ多く、中にはご存じないかたも多いのではないでしょうか。 この記事では、そんなVue.jsのpropsのバリデーターに焦点をあて、基本的な使い方についてご紹介します。 TL;DR propsでキー名のみを指定するのはやめよう とりあえず型だけでも縛ることができるなら型制限
Vue.jsミニハンズオン（TODOリスト作成） - Qiita
AngularでもReactでもriot.jsでも満足できなかったひとに、ぴったりフィットなJSフレームワーク「Vue.js」のざっくりハンズオンです。 このハンズオンではnode.jsのパッケージは使わず、Google ChromeとテキストエディタがあればOKです。 Vue.jsミニハンズオンのシリーズは以下を公開しています。 Vue.jsミニハンズオン（TODOリスト作成） Vue.jsミニハンズオン（TODOリストにアニメーションをつける） Vue.jsミニハンズオン（TODOリストをコンポーネント化する） 今回の目標 目標はシンプルなTODOリストの作成です。 WebStorageに保存してリロードしてもデータを保持できるようにしてます。 Chromeの拡張機能を入れる デベロッパーツールでデータを見やすくするためChromeの拡張機能「Vue.js devtools」を入れます
実況中継シリーズ「Vue.jsで学ぶMVVM 非同期処理 その光と闇」 Aパート - Re.Ra.Ku tech blog
2017年3月4日に、大阪にてYAPC::Kansaiというカンファレンスが開催されました。弊社からもわたしがスピーカーとして参加しており、「Vue.jsで学ぶMVVM 非同期処理 その光と闇」という発表をしてまいりました。とても参考になる発表が非常に多く、Perlコミュニティの力を改めて感じました。また、懇親会などでも、たくさんのハッカーと議論や情報交換ができ、大変有意義でした。カンファレンスは議論や情報交換してこそですよね！ というわけで、恒例のプレゼン再現ブログ「実況中継シリーズ」を行います。長くなりすぎるので前半と後半に分けます。本日は前半のみの公開です。 導入 本日はこういう発表をします。よろしくおねがいします。 簡単に自己紹介をさせてください。さいきん会社の名前が変わって、リラクっていう名前だったのがメディロムっていう名前になったんですけど、そこで働いています。言語的にはまあだ
Vue.jsとvuex、Fluxについて - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く
最近立て続けにそのあたりの話をする機会があったので。わたしの意見です。 vuexというかFluxに手を出すタイミング Vue.jsを利用していて、相互に関連のある二つ以上の状態を扱う必要が出てきたら、それはもうすでに「十分に複雑な状態管理」である たとえば、APIとの通信中はインジケータを出したいので「通信中かどうか」を管理し、通信が終わったらその結果を表示するために「通信結果」も管理したい、など。 十分に複雑な状態管理に立ち向かうためには、自分でピュアなDomain側をきちんと作ってそこで状態管理するか、vuex利用するべきだと思う 自分で設計からやるにしても、まっとうにMVVMをやれば単方向データフローは守れるので、Fluxの考え方とMVVMは矛盾しない see http://techblog.reraku.co.jp/entry/2016/12/13/080000 vuexを触ってみ
vue.jsで作るぷよぷよ - Qiita
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>vue.js 落ち物パズルゲーム ver.2</title> <style> table {background-color:gray;} td {width: 30px;height: 30px;border-radius: 15px;} .box{display: flex;} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.min.js"></script> </head> <body> <div id="app"> <h3>vue.js 落ち物パズルゲーム ver.2</h3> <p>startを押してからキーボードの矢印キーで操作します</p
ReactとAngularのいいとこ取り？ 2017年こそ学びたいVue.jsの始め方
Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく（バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません）、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと
Vue.jsで実現するMVVMパターン Fluxアーキテクチャとの距離
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Vue.jsで10万件のリストを表示する - Qiita
はじめに Vue.jsは軽量ですが、数万件のリストを並べるとそりゃ普通につらい。 だから目に見えるとこ以外はdom描いてもらうのやめるってコードです。 デモ デモ(jsfiddle) コード <div id="app"> <div style="overflow:auto;height:170px;" @scroll="getScrollParam"> <ul :style="listStyle"> <li style="height:17px" v-for="num in displayList">{{num}}</li> </ul> </div> </div> new Vue({ el: '#app', data: function(){ return { list:list, scroll:0,//スクロール量 scrollMax: (list.length - displayRow
Vue.js + Vuexで開発をしてみよう！
Vue.js + Vuex = Magic コンポーネント指向とFlux architectureで始めるモダンフロントエンド こんにちは、フロントエンドエンジニアの蔀です。 ここ数年のフロントエンド開発の潮流の変化は急激で、雨後の筍のように色々なフレームワークが出てきていますね。 8月末には、Mediumでこんな記事が人気になりました。 The State Of JavaScript: Front-End Frameworks と銘打たれたこの記事は、React/Angular/Angular2/Ember/Vue/Backbone といった、近年流行しているJavaScriptフレームワークに関する興味、満足度、知名度などを調査して比較してくれています。 注目していただきたいのが、「Satisfaction（使ってみて満足したかどうか）」の項目です。 近年流行しているReact.jsと
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-router
Vue Router は Vue.js (opens new window) 公式ルータです。これは Vue.js のコアと深く深く統合されており、Vue.js でシングルページアプリケーションを構築します。機能は次の通りです: ネストされたルート/ビューマッピング モジュール式、コンポーネントベースのルータ構造 ルートパラメータ、クエリ、ワイルドカード Vue.js の transition 機能による、transition エフェクトの表示 細かいナビゲーションコントロール 自動で付与される active CSS クラス HTML5 history モードまたは hash モードと IE9 の互換性 カスタマイズ可能なスクロール動作 はじめに または 例 (opens new window) から試してください。 (README.md (opens new window)を参照してくだ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話 #vuejs_meetup6
Vue.js 2.3 CheatSheet
コンポーネント指向のUI開発時に起きがちな密結合・複雑化問題をStoreパターンで解決する
GitHub - vuejs/vuex-router-sync: Effortlessly keep vue-router and vuex store in sync.