Vue.jsのリストレンダリングとhtml5のドラッグ＆ドロップの実装 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Webpacker + Vue + Vuex + ActionCable で動作するサンプルを作った話 - Qiita
はじめに Qiita では初めまして、主に ProjectHL2 という名義で活動している何でも屋のおじさんです。 小さなソフトウェア開発会社でエンジニアをやっており、主に Ruby on Rails を用いた業務システム開発を行っておりました。 最近は会社にも後輩のエンジニアが増え、フロントやモバイルの開発もバンバン行うようになり、こうした技術についてもっと世のエンジニアの皆さんとも共有して行きたい（ついでに仕事も欲しい）と思い記事を書いていく事にしました。 今後ともよろしくお願いします。 動機 元々 React + Redux はたまたま実案件でご一緒させて頂いたエンジニアさんと「全然分からないんですか！僕もです、やりましょう！」といった流れで勉強しました。意味不明ですが、人生とはそういうものだと思います。 ともあれ Vue + Vuex でも同じような事ができそうだったので、後輩エン
Vue.jsミニハンズオン（TODOリストにアニメーションをつける） - Qiita
Vue.jsミニハンズオン（TODOリストにアニメーションをつける） AngularでもReactでもriot.jsでも満足できなかったひとに、ぴったりフィットなJSフレームワーク「Vue.js」のざっくりハンズオン第２回目です。 第１回目は「Vue.jsミニハンズオン（TODOリスト作成）」をご覧ください。 このハンズオンではnode.jsのパッケージは使わず、Google ChromeとテキストエディタがあればOKです。 Vue.jsミニハンズオンのシリーズは以下を公開しています。 Vue.jsミニハンズオン（TODOリスト作成） Vue.jsミニハンズオン（TODOリストにアニメーションをつける） Vue.jsミニハンズオン（TODOリストをコンポーネント化する） 今回の目標 目標は第１回目で作ったシンプルなTODOリストにアニメーションをつけることです。 まずはシンプルなアニメーシ
Vue.jsってどうやったら綺麗に使えるのよ - Qiita
前置き ・LaravelついでにVue.jsを使うことになった ・公式のドキュメントを流し読み ・とりあえずコンポーネントで分けてみるか ・カオスwwww というわけで、根本的にどうVue.jsを使っていいか分かっていないようなので、 どうすれば「俺はVue.jsを使ってるぜっ！」 と言えるのか試行錯誤してみる。 事の始まり 簡単な検索ページでも作ってみる <div> id<input type="text"> name<input type="text"> </div> <div> <input type="button" value="検索"> </div> <br /> <div> <table border="1"> <tr> <th>id</th> <th>name</th> </tr> <tr> <td>1</td> <td>たかし</td> </tr> </table> </
Vue.jsでGETとPOSTを実装する - Qiita
Vue.jsにおけるGET・ POSTに関する情報がほとんどない(公式のREADMEくらい)ので、上手くいった例をまとめておく。 GET/POSTにはvue-resoureを用いた。 この辺の処理はAngularJSとよく似ているので、Vue.jsで調べるよりAngularJSで調べた方がヒントは得られるかもしれない。 GET イベントのリストをJSONで返してくれるAPIに対してGETをして、その結果を表示する例。 【GitHub】 HTMLの実装 HTMLはシンプルで、js内でelに登録するidのhomeと、v-repeatでeventsの中の要素を取得して表示している。 <div id="home"> <h1>event list</h1> <hr> <div v-repeat="t : events"> {{$index}} <h2>{{t.title}}</h2> <p>{{t.
体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita
こんにちは、ほそ道です。 今回はMV**なフレームワークのひとつであるVue.jsを取り上げてみます。 さて、どこから手をつけたら良いものかと思案にくれた結果、序論や諸注意点をアレコレ展開する前にまずはビシバシと弄って、ヒジョーにシンプルなサンプルをいっぱい作って体にしみ込ませてみるのがイイんじゃないかと思いました。 ボリュームがあるので何回かに分け、今回はビューモデルを生成するパターンをまとめます。 「考えるな、感じろ」の精神でやった後にどう考え学習すべきかや、どう設計すべきかなどの私見は述べられたら良いなと思っております。 ViewModel生成編 ディレクティブ編 [インスタンスメンバ編] (http://qiita.com/setzz/items/ebbfcc3565bcd27f344c) [グローバルメソッド編] (http://qiita.com/setzz/items/8f0
Vue.jsとその周辺技術を学ぶ勉強会 - Qiita
はじめに 社内発表用として作成中の資料です。 （4/14発表しました。） Vue.jsとは [1.x] ・ MVVMという設計思想を用いている ・ 同じMVVMのKnockout.jsより、分かりやすくてシンプルなAPIを提供しているらしい ・ Vue.jsのいくつかのAPIはAngularJSから影響を受けているらしい（ただし設計思想は全く異なる） ・ AngularJSの経験者はVue.jsのディレクティブを見ると、どうゆうものかすぐ分かると思います。 [2.x] ・ 2016年10月に正式版リリースされた新しいライブラリ ・ コンポーネント指向を取り入れている ・ 仮想DOMを採用 ・ React.jsとAngularの良い所を採用して作られたようなライブラリ コンポーネント指向 Vue.jsはReactなどで採用されているコンポーネント指向を取り入れている。 MVVMはModel,
Vue.js初心者向け：Vue.jsとaxiosでJsonを取得してコンポーネントに反映するメモ - Qiita
はじめに Vue と Ajax を組み合わせて非同期で Json を取得するサンプルは意外と見付かりません。今回の実装もものすごく初歩的な方法ですが、自分的には丸1日悩んだ結果なので今後のためにメモを残しておきます。 むしろエレガントな方法を教えてください。 やりたいこと Vue インスタンス作成前ではなく、作成後にコンポーネント側で Json を取得したい。 データは専用のストアを用意して複数のコンポーネントで使い回したい。 しかし Vuex は制約がキツいので使いたくない。 Json を取得したらコンポーネントに反映したい。 コンポーネントは単一ファイルコンポーネント（.vue）を使いたい。 jQuery ではなく axios を使う axios とは Vue のドキュメントで推奨されている Ajax通信ライブラリです。jQuery を使ってもいいのですが、せっかくなので試してみました
Vue.js用テストライブラリ「avoriaz」入門 - Qiita
背景 Vue.js本家からは公式のテストライブラリは提供されておらず、非公式でvue-test, avoriaz, vue-testing, revue, vue-unit等が公開されています。それらの中で一番Star数が多いavoriazついて調査した内容をまとめます。 前提 Karma + Mocha + Chaiを利用する 以下のHelloコンポーネントをテスト対象とする <template> <div id="hello"> <img src="http://vuejs.org/images/logo.png"> <h1>{{ msg }}</h1> <h2 class="subtitle">Essential Links</h2> <h2>Ecosystem</h2> <h3>nickname: {{ user.nickname }}</h3> </div> </template
Vue.jsとTypeScript - Qiita
はじめに この記事を書いて１年経ちました。 １年間でVue.jsとTypeScriptの環境は大きく変わりました。まずは、その辺を色々と紹介していきます。そのあと、サンプルを作成します。 2017年3月19日に追記 作成したサンプルがエラー吐くとのissueを受けたのを機に、サンプルを結構いじりました。サンプルも必ずチェックしてね。 この１年間で変わったこと Vue.js 2.0がリリースされた 新しいメジャーリリースに際し、TypeScript関連で一番大きく変わったのは、型定義ファイルの提供方法です。バージョン１まではDefinitelyTypedに型定義ファイルを登録していました。そのため、tsdやtypingsで型定義ファイルをダウンロードする必要がありました。 一方新しいバージョンからは、Vue.jsのリポジトリ内に型定義ファイルがあります。したがって、npmなどを使ってライブラ
Electron + Vue + flowtypeで最高の画像を収集するためのTwitterクライアントを作った - Qiita
Electron + Vue2 + Vuex + Flow + BootStrap4 + AWS RekognitionのスタックでTwitterクライアント書きました。 本アプリは【Electron + react + flowtype】TweetDeckライクなpixivクライアントPixivDeckをつくった - Qiita に思想・設計共に大きく影響を受けて作りました。本当にありがとうございます。 Github - yuki-ycino/imecoletter: 最高の画像を集めるためのTwitterクライアント 諸事情（というか実装の都合上AWSの請求が大変なことになるため）バイナリの配布はできません。 簡単にビルドできるようにはしてあるのでもし興味がある方がいれば使ってみてください。 スクリーンショット TwitterのTLから画像ツイートのみを表示 Twitterから画像ツイ
Vue.jsはRiot.jsより良いんじゃないかと思ったのでメモ - Qiita
RiotとVue検討段階の人が書いたものです。実用してみての感想ではないのでご注意願います。 Vue.jsのドキュメントに優位性の説明があった 他のフレームワークとの比較 - Vue.js Riot 2.0 はよく似たコンポーネントベースの開発モデル（”タグ”と Riot では呼ばれています）を提供しており、必要最小限の美しく設計された API を持っています。Riot と Vue はおそらくその設計哲学の多くが共通しているのでしょう。しかしながら、Riot よりも少し重いにも関わらず、Vue はいくつか著しく優れた点を持っています： トランジションエフェクトシステム。Riot にはありません。 ずっと強力なルータ。Riot のルーティング API は極めて最小限です。 より優れた性能。Riot は 仮想 DOM を使用しているというよりむしろDOM ツリーをトラバースしているため、Ang
Vue.jsとUIkitでつくるフロントエンド環境 - Qiita
最近社内ではVue.jsが流行っています。 世間でも人気は上々のようで、混沌としたフロントエンドフレームワーク界隈でも一番気軽に使えると評判です。 UIkitはbootstrapなどと同じようなスタイルライブラリです。 あんまり巷では噂は聞かないのですが使い勝手がよくこちらも業務で愛用しております。 UIkitがver.3になってWebpackでインポート出来るようになったのでスターターキットを作成しました。 UIkitが3になって個人的に嬉しかったのはWebpack対応とScss版が出来たこと。 ちなみにUIkitの公式サイトもVue.jsで作成されています。 そこで今回はスターターキットの説明をしながらVue.js,UIkitのよいところを書こうと思います。 ※UIkitの説明がメインになってしまったのでVue.js,vue-loader,Webpackとかわかんねえよって方は意味不明
Vue.js の 単体テストについて、webpackなどビルドツールがない状況での環境を構築する - Qiita
背景 公式の単体テストでも、ビルドツールありきのテスト環境となっている。 ただ、自分の環境では、webpackなどビルドツールは使用しておらず、Vue.js の単体を使用している。 そんな状況だが単体テストは行いたい。 問題 公式でもwebpackなどを使用しているためか、vueのテストの情報は、ビルドツールありきになっている。 ただ、単体テストのためだけにwebpackを入れるか？ となるとそれはそれで、めんどくさい。 ちょろっと作ったvueアプリケーションの整合性が担保できればそれでいいので、できる限り手間をかけずにテストを行いたい。 達成目標 webpackは使わない. jasmine + karma での vue.js の単体テスト ヘッドレスなテスト (phantomjs使うよ) coverageは取れるようにしておく と以上の４点が達成できればOKということにします。 テストを
ElectronでVue.jsを始める - Qiita
プロジェクトの作成 今回は electron-vue（日本語ドキュメント）を使ってプロジェクトを作成しようと思います。 ドキュメントがすごい充実して驚きました。 また、最初からすでに vue-resource,vue-router,vuexを備えていることもいい点と言えるでしょう。 しかし、vue-resourceについては、公式がこういう記事を出しているので参考にするといいかもしれません。 vue-resource の引退について https://jp.vuejs.org/2016/11/03/retiring-vue-resource/ vue init まずはelectron-vueのREADMEにかかれているGetting Startedに沿って進めて行こうと思います。 基本的にはENTER押して行けば作れます。 vue init simulatedgreg/electron-v
Laravel(blade template)でvue.jsのmustache記法を使用する - Qiita
laravelアプリケーションを作成する際、viewにはblade templateが使用されています。bladeでのdataの出力では"{{}}"が使用されており、bladeテンプレート内で普通にmustache記法を使用すると競合してしまい、ErrorExceptionになるか、予測していない情報が表示されたりしてしまいます。ということで2つ対応方法をご紹介。 vue.jsのmustache記法に使用する記号を変更する（"{{}}"を別の記号にする） vue.jsドキュメントGlobal APIのVue.configに"delimiters" という設定があります。 { // print stack trace for warnings? debug: true, // attribute prefix for directives prefix: 'v-', // interpola
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js で画像(ファイル)アップロード直後に表示させる方法 - Qiita
electron 上で vue.js を動かす - Qiita
Vue.js を vue-cli を使ってシンプルにはじめてみる - Qiita
Vue.jsでサーバサイドレンダリングしたい - Qiita
