Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita
Vue.jsはそのまま使ってもよいですが「自分(プロジェクト)に合ったフレームワーク」を見つけるのにも向いています。 これは、後発フレームワークだけあり各フレームワークの特徴を意識した設計がなされているためです。他の著名なフレームワークとの特徴を比較した文書もあるので、こちらをチェックしながら導入を検討するとよいと思います。 そのため、以下はVue.jsの紹介と他フレームワーク(Knockout.js と Angular)へのステップという2セクションに分けて紹介していきたいと思います。 JavaScriptフレームワークの導入を行いたいがこの選択は慎重にいきたい、という状況であれば最初にVue.jsを試金石としてみて、効果的と感じられる機能からAngularやKnockout.jsに流れていくというのは十分ありだと思います。 2016/06: Vue.jsの1.x系に合わせて記述・サンプ
Vue.js が data に渡した値を激しく書き換える件について
最近、JavaScript の MV* フレームワークの中で Vue.js が少しずつ注目を浴びてきているようであります。 5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 | 株式会社インフィニットループ技術ブログ Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita 軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog そんなわけで、自分も Vue.js (v0.10.5) を触ってみたのですが、data で渡した値を激しく書き換えるところに面食らったので記事にしておきます。 自作クラスのオブジェクトを Vue.js に渡すと壊される 何らかのビジネスロジックを持ったモデルを作って、それを Vue.js のデータバインディングで HTML に反映しようすると破綻します。 簡単な例として、よくあ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 先日の「OpenIL vol.2」にて「5分でわかるVue.js」というLTを発表しました。 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 前編 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 後編 この記事は、その時のLTの資料を元にブログ化したものです。 jQueryは頑張れば頑張るほど辛くなる jQuery、簡単に動きのあるサイトを作れてとても便利ですよね。 // 何か画面に反映する $(".hoge").html("変更したい内容"); // 変更時に何か処理して変更する $(".foo").on("change", function() { $(".bar").html("変更したい内容"); }); イベントを受け取って、色々と処理をし
「プログラムでシダを描画する」をVue.jsで描画する(+α) - Qiita
「プログラムでシダを描画する」をGoで描画する - Qiita Clojure - プログラムでシダを描画する - Qiita 「プログラムでシダを描画する」をPythonで描画する - Qiita 「プログラムでシダを描画する」をJavaScript+Canvasで描画する - Qiita 「プログラムでシダを描画する」をPHPで描画する - Qiita 「プログラムでシダを描画する」をEmacs Lispで描画する - Qiita ちょっと流行に乗り遅れましたが、自分もシダを描画してみました。 今更ただ描画しても面白くないかなーと思い、Vue.jsを使って各種パラメータをいじれるようにしてみました。 なお好みによりjadeとcoffeescript使ってます。 JSFiddle #app canvas#preview(v-attr="width: width, height: heig
AngularJSよりもお手軽！Vue.jsで超簡単データバインディング - Qiita
Vue.jsとは Vue.js is a library for building interactive web interfaces. It provides data-driven components with a simple and flexible API. vue.js フォームの操作に合わせてJS側のデータを操作する。JS側のデータ操作の結果をHTMLのあちこちに反映させる。 Vue.jsはこの手の頻発する処理……いわゆるデータバインディングをとても簡単に出来るようにしてくれる。 ざっくり言うと、KnockoutとかAngularJSをよりシンプルにした感じ。 Vue.jsの利点 シンプルなAPIでデータバインディングが実現出来る 学習コストがとても少ない 覚えた所から部分的に使うことが可能 他のプラグインと組み合わせが容易 古いIEを捨てた代わりにシンプルになってる 古
Vue.jsでチェックされたら or 入力されたら送信可能にするボタンを実装する方法
最近、色々なJavaScriptフレームワークを使ってみている中原です。 jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 | NxWorld http://www.nxworld.net/tips/jquery-switch-disable-input-button.html 今日上記の記事がはてなブックマークで話題になってました。 これと同じことをVue.jsのデータバインディングを利用して実装してみました。 Vue.jsの公式サイトはこちらです。vue.js http://vuejs.org/ （本当はHTMLとJavascript部分を別ファイルに分けて書くべきだと思いますが、今回は同じファイルに記述しています） チェックボックスにチェックされたら送信可能にするボタン チェックが付いてない場合はSubmitボタンは非活性です。 チェックを付け
軽量MVVMフレームワークのVue.jsを試してみた
プログラミング (iOS, JavaScript, Jenkins, Sikuli) とMacやiPhoneなどの話題が中心のブログ シンプルで高速なMVVMフレームワークであるVue.jsでサンプルアプリを作成してみました。 Vue.jsの特徴 General FAQ内でAngularJSとの違いを尋ねられたときの、作者であるEvanのコメントによると、Vue.jsには次のような特徴があります (超意訳)。 シンプル 高速 柔軟性があり、他のライブラリを混ぜても爆発しない ディレクティブとコンポーネントの役割をより明確にした 実際、TodoMVCベースのベンチマークテストでは平均的に他のフレームワークよりも早いらしいです。 サンプル というわけでサンプル。よくあるTODOアプリです。フレーム内だと上手く動作しないときがあるみたいなので、そのときは右上のEditから別ページで開いてください
Vue.jsでv-repeatをネストするには - console.lealog();
いまいちやり方がわからず前回はあきらめた・・。 が、いまやったらできた！ 見た方が早いと思うので、コチラをどうぞ。 なんかjsfiddleは調子が悪かったので、CodePenに。 参考：CodePen - Pen Gistにもメモっておくことにした。 参考：How to v-repeat in v-repeat at Vue.js v-repeatをネストするようなケース まあテンプレートなるものでアレコレするケースでは、よくあることかと思います。 こんなデータを、こんなテンプレで。 How to v-repeat in v-repeat at Vue.js v-repeat(他)で使える特殊変数 っていうかはわからんけど。 $parent: イテレーションしてるそれぞれの親オブジェクト $root: 根本のオブジェクト(てか$data) $index: いわゆるindex(0起算) $k
噂のVue.jsをさわってみた - console.lealog();
なんか流行りにのってる感があります。 参考：vue.js なんかわからんけどはてブの上位に出てた、気象庁のAPIとあわせて使ってみました。 以下、サンプルのURLです。 ソース見た方がはやいかも。 気象庁APIの仕様変更？の影響か、レスポンスが取得できなくなったので、現在動作してません。 使用感なんて語れるほど大した身分ではないのですが、まあこういう風にも見えてるよ、ということでココはひとつ。 20140712追記 いまだぽつぽつブクマされるので追記です。 このサンプルで使ってるVue.jsはバージョンがかなり古いので、そこを念頭に置いた上で読んでください！ 最近のバージョンアップでループまわりは記述方法変わってた気もするので。 さわるまえ ドキュメントを読んでる感じ、Angular.jsの時と同じような印象。 「え、コードこんだけでいいの？うわ動いてるすげー！」っていう感じ。 コードのス
WebでもBindingしたい！Vue.jsを使ってMVVMしてみる。 - atelier:mitsuba
タイトルのまま。 xamlでいうと、例えばTextBoxとTextBlockのTextを同期したい。 そんな時は方法は３つあって、 １．KeyUpでTextBlock.TextにTextBox.Text突っ込む。 ２．Text同士をControl Bindingする。 ３．きちんとVMにプロパティ用意して、Bindingする。 コントロール間とConverterで解決するときは２でいいかなーだけど、３じゃないといけない時とかあるよなぁ。 で、WebでどうするんやろーMVVMってあるんかなーってなって調べてみた。 １と同じ方法だと愚直にChangedイベントとか拾って、JSでDomの中身を書き換えるんだけど、やっぱり美しくない。 ２はよくわからん。 で、３を実現するために、Vue.jsっていうライブラリがあるらしい。 Angular.jsよりも気楽に使える軽量シンプルなJSのMVVM用ライブ
軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog
Vue.jsは軽量なMVVMライブラリ。 vue.js http://vuejs.org/ 使ってみた感じ、かなり手触りがよいので、紹介する。 概要 handlebars風のテンプレートを書いて、DOMを展開する。普通のテンプレートエンジンと違い、$dataアクセッサを通じて値を書き換えることで、テンプレート展開後も値が同期する(!!!)。 一言で言うと軽量Angular。コード読んだ感じ、内部的にもAngularから大量にコードを持ってきた痕跡がある。$watchとdirective定義がキモなのは同じ。 とはいっても、軽量なのは使う側のAPI側だけで、内部実装はそれなりに重い。APIを軽量にすることで、Angularのデメリットである学習コスト部分を限りなく削ることを目標にしているんじゃないだろうか。 大雑把な使い方 テンプレートを書く。対応するデータ構造を書く。{foo: 'bar'
Angularそっちのけで、Vue.jsについて所感
Vue.js 軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog を読んで触発されたので、自分も外見的に良いなと思ったポイントだけ書き留めてみます。さすがに実戦投入できていないので、そのあたりの精度は悪しからず。 サンプルコードの雰囲気 サンプルコードとか自分でちょっと触ってみたときの感触からは、以下のポイントが気に入りました。data-bidingsとかは前提として便利です。はい。 覚え切れそうな分量のAPI Class: Vue - vue.js 脳みそちっちゃいので助かります。それに尽きる。 プロパティによる宣言っぽさ Angularだとイベントハンドラ類を書くにも、$scopeに都度ハンドラを仕込んでいくのがあまり好きでないです。工夫で回避できそうですが、与えられたスタートが下記のような状態であることには変わりません。 angu
Vue.js - The Progressive JavaScript Framework | Vue.js
The Progressive JavaScript Framework An approachable, performant and versatile framework for building web user interfaces. Why Vue Get Started Install Get Security Updates for Vue 2 Approachable Builds on top of standard HTML, CSS and JavaScript with intuitive API and world-class documentation. Performant Truly reactive, compiler-optimized rendering system that rarely requires manual optimization.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nyle Engineering Blog
Vue.js