Vue.js+Vuex+VuexFireでTodoList - Qiita
最近、Firebaseを勉強中です。Vuexも勉強中です。 その2つをつなぐためのVuexFireというライブラリを組み込んで、TodoListを作ってみました。 作ったやつ とりあえず現状だと接続先のFirebaseデータベース残してるから動くけど、その内消すかも。 コード比較 VuexFireの有無でのStoreのコードを比較してみます。 import Vuex from 'vuex'; import Vue from 'vue'; import { ADD_TODO, REMOVE_TODO } from './action-types'; Vue.use(Vuex); export default new Vuex.Store({ strict: process.env.NODE_ENV !== 'production', state: { todos: [], }, mutati
Vue.js入門ハンズオン、ビンゴゲームのルーレットを作成してみる - Qiita
{ "name": "vuebingo-qiita", "version": "1.0.0", "description": "vuebingo-qiita", "main": "index.js", "scripts": { "webpack": "webpack" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-plugin-transform-runtime": "^6.15.0", "babel-preset-es2015": "^6.18.0", "copy-webpack-plugin": "^4.0.1", "vue-loader": "^10.0.2", "vue-template-compil
C++で書いたクラスをemscriptenを経由してVue.jsで利用する - Qiita
この記事は @janus_wel さんの emscripten でドメイン層に型と速度を持ち込む に触発されたロマンを感じた筆者が、C++で書かれたクラスをemscriptenを通してVue.jsにバインドしてみた記事です。「なぜそもそもそんなこと面倒なことを？」と思われた方がいたら、元記事の「コンセプト」や「経緯」の部分を読んでもらえればと思います。「要するにロマンです」です。 概要 リポジトリ: edwardkenfox/vue-emscripten-todo デモ: vue-emscripten-todo TodoクラスはC++で実装 最近趣味でC++触り始めていたので自分で書いても良かったんですが、Todo.cppやビルド用のスクリプトは元の実装を拝借しました AppコンポーネントおよびTodoコンポーネントをVueで実装 Appコンポーネント（コンテナ）は複数のTodoコンポーネ
Vue.js+d3.jsで折れ線グラフを描く - Qiita
Vue.js Advent Calendar 2016 11日目 まえがき Vue.jsと描画機能とd3.jsの計算機能を合わせて折れ線グラフを描いてみます。 d3.jsで直接描画してもいいのですが、せっかくなのでVue.jsで宣言的に描けたらな、と。 デモ デモ(jsfiddle) コード メインのコンポーネント <svg :width="width" :height="height" :viewBox="viewBox"> <my-line v-for="(line,index) in lines" :x-scale="xScale" :y-scale="yScale" :parameters="line" :index="index"></my-line> <horizontal-grid v-for="y in yTicks" :x-scale="xScale" :y-scale=
Vue.js Vueコンポーネントのユニットテストを書いてみよう - Qiita
※このエントリはVue.jsアドベントカレンダー10日目の記事です。 最近の開発はjQueryでプロトタイピングだけ行って、本開発はVue.jsをベースに行っているPotato4dです。 Vue.jsは非常に強力で便利なフレームワークですが、そのテストについての情報というのは、探しても中々見つからないため、困っているかたも多いのではないでしょうか。 今回は、そんな問題を解消するために、Vue.jsのコンポーネントをテストしていく手法について共有していきたいと思います。 開発の準備 今回の環境 今回は、簡単に導入して試していくために、Vue.js公式のコマンドラインツールvue-cliを用いて開発を行っていきます。 vue-cliは、Vue.jsを用いた様々なプロジェクトの雛形を自動生成してくれるツールとなり、Node製であるため、Vueの開発環境が整っていれば、すぐに導入し、開発を始めるこ
Vue.js（v2.x.）を使ってメモアプリを作ってみた - Qiita
* この記事では、説明のためのサンプルコードを書いていますが、Githubにあるコードとは似て異なります。ご注意ください。 環境 vue-router、vuex、Firebase を使っています。 vuefire はあえて使用していません。 vuex から Firebase を呼び出しています。 vue-router@2.x. vuex@2.x. vuex-router-sync@3.0.0 babel (es2015, stage-2) webpack webpack-dev-server firebase@3.6.2 lodash@4.17.x moment@2.17.x 画面遷移 vue-router を使い、３つの画面を管理しています。 - Index（タイムライン） - Viewer（ひとつのメモを見る） - Editor（メモを追加、編集） それぞれ、URLが個別に割り当てられ
簡単にVue.jsでサーバーサイドレンダリングを試してみた - Qiita
Vue.js 2からはVirtualDOMになったのでサーバー側でHTMLを組み立てられます。 サーバーサイドレンダリング(SSR)のメリットとしてjsを実行してくれないクローラー向けのSEO対策だったり、スペックがあまり高くない端末向けにjsの実行部分を減らしたいと言った用途に使います。 今回はvue-cliのwebpack-simpleをSSRで実行してみたいと思います。 環境 Macです。 $ uname -mprsv Darwin 16.1.0 Darwin Kernel Version 16.1.0: Thu Oct 13 21:26:57 PDT 2016; root:xnu-3789.21.3~60/RELEASE_X86_64 x86_64 i386 $ node -v v7.0.0 $ npm -v 3.10.8 雛形を作る vueには雛形を作るためのツールとしてvue-
普段Vue.jsでフロントエンド開発するときの構成と運用時のポイント - Qiita
Vue.jsでSPAを開発する際、そのプロジェクト構成に迷うかたは多いようです。 今回はそんなかたのために、私が普段Vue.jsで開発するときの構成と、その構成化で開発するときのポイントを共有したいと思います。 追記 2019/12/05 追記 時代が大きく変わって求められる構成なども変化しました。 現在ではこの記事は参考にしないことをおすすめします 2018/01/30 追記 まずは Nuxt.js の利用の検討を Vue.js製のフロントエンド開発フレームワークである Nuxt.js がついに v1.0 のリリースを迎えました。SPA開発とSSR + SPAの開発両方を全面的にサポートしており、PWA対応などもプラグイン一つでできる上、ルーティングの自動生成やVuexストアのオートロードも可能と非常に強力なフレームワークとなっております。本格的なSPA開発を開始するときは、まずは Nu
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 2.0+Spring Bootでサーバーサイドレンダリングを実現するサンプルを書いた - kitak blog
Vue.js 2.0+Spring Bootでサーバーサイドレンダリングを実現するサンプルを書いた github.com Vue.js 2.0がサーバーサイドレンダリングに対応した話は Vue.js 2.0のServer Side Renderingを試しつつ、軽くコードリーディングした - kitak blog に書いた通りで、その記事ではNode.jsでレンダリングをおこなった。ただ、個人的な理由で、Javaで出来るかどうか検証したかったのでGitHub - winterbe/spring-react-example: Isomorphic Spring Boot React.js ExampleをベースにReactをVue.jsに置き換える形で検証した。 サーバーサイドレンダリングの必要性 そもそも、なぜサーバーサイドレンダリングが必要か。Vue.js 2.0のServer Side
Vue.js 2.0のServer Side Renderingを試しつつ、軽くコードリーディングした - kitak blog
数日前に、Vue.js 2.0 が発表された ( Announcing Vue.js 2.0 – The Vue Point – Medium )。Server Side Renderingに対応するそうなので、pre-alphaではあるけれど、単純なサンプルを動かしつつ、軽くコードリーディングした。対象のVue.jsはこの記事を書いた時の最新のnextブランチ( fix eslint again · vuejs/vue@014ac35 · GitHub ) 2.0のポイント 内部で GitHub - snabbdom/snabbdom: A virtual DOM library with focus on simplicity, modularity, powerful features and performance. ベースのVirtual DOMを持つようになり、パフォーマンスが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js 2.0 Server Side Rendering