ポッドキャストサイトをJekyllからNuxtでモダンに作り直した知見を余さず全部書く - Qiita
本記事は Vue.js #1 Advent Calendar 2017 の23日目の記事です。 TL;DR soussune（そうっすね）という技術系ポッドキャストのサイトをJekyllで構築してます よくVueの話をしてるのに肝心のサイトでは使ってない。のでVue使いたい Nuxt.jsにNuxtentモジュール入れて、nuxt generate で静的サイトを生成してデプロイしました ポッドキャストをやっている @trkw と @miyaoka の二人でこの一週間くらいスクラッチでサイトを作ってました。そこで実際にNuxt使ってみた話についていろいろ書いていこうと思います。 使用前・使用後 開発は8,9割程度終わった感じですが、現状まだ新サイトに移行してない状況です。 →移行しました。 旧サイト https://soussune-v1.netlify.com （開発リポジトリ） 新サイ
vue-cliでwebアプリケーションを作って、Netlifyを使って無料で爆速でリリースした話 - Qiita
はじめに vue-cliでwebアプリケーションを作って、GitHubPagesで無料で爆速でリリースした話の記事で、vue-cliで実装したものをGitHubPagesでリリースしました。 今回の記事はNetlifyが熱いと最近聞いたので、アカウント登録からvue-cliで作ったwebアプリケーションのリリース、カスタムドメインとHTTPSの設定をしたので書いていきたいと思います。 ※vue-cliに関しては上記記事に詳しく書いてあるのでこの記事では触れません リリースしたサイト（中身はGitHubPagesでリリースしたサイトと同じ） https://holy-place-photo.netlify.com/ https://www.netlify.com/ 静的なサイトなら簡単にリリースができるサービスです。 下記Qiitaの記事に詳しく特徴が載っています（下記Qiitaの記事で自分
【Vue.js #1 Advent Calendar 2017】Vue.js + Element でフォームダイアログをいい感じに呼び出す【24日目】 - Secret Garden(Instrumental)
Vue.js #1 Advent Calendar 2017 24日目の記事になります。 少し前に Electron + Vue.js + Element でネイティブアプリの開発を行っていたのですが、その時に利用したコードなどを簡単に紹介してみようかと思います。 Element とは Element(element-ui) とは Vue 2.0 ベースのコンポーネントライブラリになります。 例えば、以下のようにモーダルダイアログからフォーム入力などを行うことが出来ます。 index.html <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <div id="app"> <!-- 登録ダイアログ --> <el-button @
グリグリ動く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入門ハンズオン 〜環境構築からS3静的ホスティングで世の中に公開するまで〜 - log4ketancho
この記事は、 Vue.js #1 Advent Calendar 2017 - Qiita の１日目です。 最近（1ヶ月前くらいから）Vue.js を使い始めた初心者です。同じように Vue.js を始める人の少しでも参考になれば、ということで「ことはじめ」的なメモを残しておこうと思います。 手元の環境でも同じことができるハンズオン形式の記事にしたつもりです。ただ、無意識的に省略してしまっている部分があるかもしれませんので、不明点がございましたら遠慮なくご連絡ください！また、「こうすべき！」という Vue.js プロの方々からのコメントもお待ちしております！ この記事を読むとできるようになること この記事では（超）簡単なランディングページを作ることで、Vue.js の基本のキを学びます。具体的には下記の流れになります。 環境セットアップ 新しいコンポーネントの追加 入力値バリデーションの実
Vue.js + ElectronでTwitterクライアントを作った - razokulover publog
Vue.jsとElectronでシンプルなTwitterクライアントを作った。 vue-twitter-client きっかけとしては一言で言うとフロントエンド周りの勉強。 2017年1~3月の振り返りにも書いた通り。 自分はモダンなフロントエンドの開発に疎かったので重い腰を上げてそろそろやるかという気持ちになって3月中頃くらいからはじめた。 Vue.jsについては2,3週間前くらいから触りはじめている。 Vue.jsはちゃんとしたSPAからフォームにちょいと味付けみたいな使い方もできたり小回りがきく。 個人的にはReactでの開発よりやりたいことが直感的に書ける気がしてるので使いやすいという印象。 とりあえず最初はTODOアプリやAPIを叩く小さなフィードを作って、次にNuxt.jsでSSRできるミニサイトを作ったりで大体使い方は覚えてきたというステータス。 ライブラリでいうとvuex,
💓 Vue.js
P�A�IV � �IV `}��IV @�|�IV ���IV �%��IV �� �IV �7��IV �H�IV ����IV ����IV ����IV �5��IV Р4�IV ����IV p� `$8�IV � ��IV �� �IV � ��IV � ��IV `���IV �C �IV �G��IV ����IV `�A�IV �B��IV � c�IV 0���IV ���IV 0� �IV q|�IV �;��IV e��IV �m��IV P���IV ���IV p;��IV o��IV �8C�IV ����IV �L��IV 0� �Il�IV ^�IV � �IV P� �IV � �IV PQ��IV � �IV ��:�IV ����IV � ��IV ��1�IV ����IV ����IV p�;�IV � ��IV P�|�IV 0i
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にreduxを載せた話｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
概要 先日とある案件でVue.jsを用いたアプリケーションを開発することとなりました。 一般に同種のフレームワークと比較してVue.jsは、学習コストが低く気軽にはじめやすいということがメリットとして語られています。 ただ、今回の案件のようにMVC系フレームワークを用いて開発する際にネックとなっていたのが、コンポーネント間のデータ共有についての最適解が見つけられていないと感じていたことでした。 もちろん、適切にモデルを設計すればコンポーネント間のやり取りに責任を持つ、親コンポーネントとでもいうべき層を実装することでこの問題は解決できると思います。 しかし実案件では往々にして親コンポーネント層の実装が個々人の裁量に陥りやすく、結果的にコンポーネント間データ共有の方式が統一出来ていないケースも出てきてしまいました。 コンポーネント間で共有したいデータ=アプリケーションの本質となるデータは、もっ
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.jsでcomponentsに親からデータがわたらない時に確認する2つのこと - 俺、サービス売って家買うんだ
Vue.jsはコンポーネントを利用てUIの親子関係にルールを持って記述できるようなフレームワークになっています。 その仕組みの一つにpropsというコンポーネント(子ども側)のルールがあります。 これは何かというと、コンポーネント側のオブジェクトにpropsとプロパティを用いて親の$dataのキーを書かなければ親の$dataに触ることができないというルールです。このルールにより親・子間のデータの流れが一方通行になり、両者の責任範囲の漏れ出しを防ぐことができます。 古いバージョンの時に一度記事を書いていますが、今回はバージョン1系、且つ、つまずきポイントのみに着目します。 www.ie-kau.net 1.props 前置きにも書いてしまいましたが、触りたい親の$dataのpropsを必須で書かなくてはなりません。これを忘れると、コンポーネント内でそのデータはundefinedになってしまい
Vue.jsで体感余命みえる君を作った - 無理しない感じ
体感余命みえる君 http://life.hogesuke.net 体感余命みえる君 とは 体感余命がみえるWebアプリケーションです。 ジャネーの法則 歳をとるにともなって、１年の経過がどんどんはやく感じるようになっていませんか？ この現象をポール・ジャネーという人が心理学的に説明していて、ジャネーの法則って呼ばれているようです。 すでに人生はどれくらい終わっているか 歳をとるごとに１年の体感はどんどん短くなっていくので「寿命までの残り年数＝体感の残り人生」とはなりません。体感余命みえる君では、ジャネーの法則に則って、すでに人生のナンパーセントが終了しているかを計算します。 例として25歳の若者の場合、現在何パーセントの人生が終わっているかを見てみます。 なんと、63%もすでに終了しているようです。おそろしい。 ※ 真偽の程は定かじゃないのでジョークとして捉えてください Vue.js こ
体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita
こんにちは、ほそ道です。 今回はMV**なフレームワークのひとつであるVue.jsを取り上げてみます。 さて、どこから手をつけたら良いものかと思案にくれた結果、序論や諸注意点をアレコレ展開する前にまずはビシバシと弄って、ヒジョーにシンプルなサンプルをいっぱい作って体にしみ込ませてみるのがイイんじゃないかと思いました。 ボリュームがあるので何回かに分け、今回はビューモデルを生成するパターンをまとめます。 「考えるな、感じろ」の精神でやった後にどう考え学習すべきかや、どう設計すべきかなどの私見は述べられたら良いなと思っております。 ViewModel生成編 ディレクティブ編 インスタンスメンバ編 グローバルメソッド編 フィルター編 v-repeatネスト編 全体の目次はこちら ザックリとしたVue.js概念 IE8以下には非対応 MVVMアーキテクチャにフォーカスしている MVVMとはモデル(
uu59のメモ | RailsとJS(vue.js)の連携
前書き Railsを使いつつJSもそこそこ書きたい、という条件であればまず前提としてjQuery脳を捨てましょう。jQueryスタイルで考えるかぎり何をどうやっても破綻するのでJSを諦めるか保守性を諦めるかして覚悟を決めましょう。 捨てるのは「jQuery」ではなく「jQuery脳」です。jQueryでグローバルな領域に進出してメソッドチェインで狼藉を働いたり、いま現在目の前にあるHTMLだけを考えてDOM操作をしたり、$.onと$.triggerを使ったクロージャ内部へのGOTOなどを記憶から消しましょう。 可能な限りスコープを小さく保つのはプログラミングの基本原則といえます。その原則を思い出し、JSを軽く扱わず、一般的なプログラミングと同様に閉じられた関心事にのみ注力するようにしましょう。 RailsとJSと役割分担 Railsもviewとしてテンプレートエンジンの処理を持っていますが
Vue.jsで手軽じゃないアプリケーション構築 - Qiita
概要 Vue.jsは、MVVMというMVCの派生種を設計基盤として構築されたクライアントサイドJSフレームワークです。AngularJSと表面上は似ていますが、設計思想は全く異なるもので、作成したUIコンポーネントを組合せてページを構成することを前提にしています。 「Vue.jsで遊んでみた」のような記事はよく見るのですが、実際にプロジェクトとして走らせる場合に、アプリケーション構成からテストまで、どのようにするのがベストなのかを、まとめました。 SPAをベースに、サーバーサイド言語上で動かすときの構成も調べています。 ブラウザサポート yyx990803/vue - Vue.jsはレガシー・ブラウザをサポートしていません。 参考記事 Getting Started - vue.js Vue.js概要？ - Qiita - はてぶ200 大きめのアプリケーション構成について ガイドライン
phiary
Vue.js 入門です. 1.0 対応してます. 説明うんぬんよりもとりあえず触ってみたいって方向けの入門エントリーです. Runstant を使って, 今すぐに Vue.js 始めちゃいましょう♪ 「これ何やってんの？」 とか 「どういう意図で？？」 などありましたら 気軽に下のコメントや Twitter にて質問してください. Runstant デモです. input box の内容を変更すると 上のメッセージが連動して変わるのがわかるかと思います. Runstant で作ってあるので, 実際にコードをイジって試せます. Vue.js の使い方 1. Vue.js を読み込もう cdn 経由で読み込んじゃいます. <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script> これで準備完
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hilongjw/vue-lazyload: A Vue.js plugin for lazyload your Image or Component in your application.
Vue.jsによるWebアプリケーション開発 - SSSSLIDE
Vue.jsで実現するMVVMパターン Fluxアーキテクチャとの距離
https://laracasts.com/discuss/channels/vue/rebuild-array-after-order-change