electron 上で vue.js を動かす - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
非公開サイト
サイトの構築。作品の販売。ブログの投稿。この他にもさまざまな機能があります。 ログイン サイトをはじめよう 非公開サイト このサイトは現在プライベート設定になっています。
SVG can do THAT?!
//variable declaration for the global repeated animations const gear = $("#gear1, #gear2, #gear3"); ... //animation that's repeated for all of the sections function revolve() { let tl = new TimelineMax(); tl.add("begin"); tl.to(gear, 4, { transformOrigin: "50% 50%", rotation: 360, ease: Linear.easeNone }, "begin"); ... return tl; } const repeat = new TimelineMax({repeat:-1}); repeat.add(revolve())
VueをSSRに乗せると容易にXSSを生み出す場合がある件について - Qiita
はじめに 最近Vue.jsを頻繁に使用するのですが、他のSSR(サーバーサイドレンダリング)の仕組みと組み合わせる場合、容易にXSSを生み出してしまうケースが存在するので、注意喚起も兼ねて事例を紹介させていただきます。 9月7日 追記を追記しました 前提 サーバーサイドで動的に要素をレンダリングするシステムとVue.jsを組み合わせた場合 この記事はrailsのSSRとの組み合わせで解説しますが、プレーンなPHP等、動的にHTMLをレンダリングシステムとの組み合わせでも発生します。 サンプルコード まず、こちらのコードをご覧ください。 user.erb <div id="app"> <div class="user"> <%= @user.name %> </div> <button v-on:click="registerFavorite" data-user-id="<%= @user
vue-router webpackでページごとにファイルを分割する
vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。 ページごとにファイルを分割し、そのページがアクセスされたタイミングでそのjsファイルを読み込むようにすれば最初のロード時間を短縮できます。 一見実装が難しそうですが、vue-routerとwebpackを使えば簡単に実現できます。 以下の説明の開発環境やフォルダ構成はvue-routerを導入してSPAを作成するで扱ったものと同様とします。 router.jsの修正コンポーネントの読み込み方法を以下のように設定します。 router.jsimport Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { pa
Vue+VuexでMVVMなWebApplicationを設計するときに考えたいこと
まえがき ここ最近、Vueを使って実装されたWebアプリが随分と増えてきたように感じます。自分も何度となく実装してきました。すごく小さなデモを作るときにも使えるし、中規模以上のWebアプリを作るときにも使えるし、扱いやすいライブラリでとても好きです。 ある程度の規模になってくると「複数の画面でデータを共有したい」「こっちのComponentの状態をあっちのComponentに伝えたい」といったような問題にぶち当たり、アーキテクチャを導入することでそれらを解決するというのもお馴染みな感じです。特にVueでは双方向データバインディングの特性上、MVVMアーキテクチャが使われることが多いと思います。 今回は、VueでMVVMを実現する際に起き得る設計上の問題について、現時点での私の解決方針をまとめてみました😌 まえがき Vue+MVVMとはどんなものか 一般的なMVVMを理解する View V
Vue.js on Rails / vue-js-on-rails
マネーフォワード Pay for Businessのフロントエンド / Money Forward Pay for Business Frontend
Rails アプリケーション内でいい感じに Vue.js を使いたい
Vue.js は普通の Web ページにもゆるふわに導入しやすい点がメリットの一つですが、(SPA ではない) Rails アプリで使う時は少し考えて書かないとつらくなってくると思います。 例えば、ある <select> 要素の値に応じて別の <select> 要素で選択可能な値をフィルタリングするという機能を実装したい場合を考えます。フィルタリングの機能を持たない、ただのフォームであれば Rails のフォームヘルパーで簡潔に書くことができます。 <% # コントローラーから渡す %> <% @categories = [['Category 1', 1], ['Category 2', 2], ['Category 3', 3]] %> <% @items = [['Item 1', 1], ['Item 2', 2], ['Item 3', 3]] %> <%= form_with(
Vue.js + Brunch: The Webpack Alternative You've Been Hungry For
Vue.js + Brunch: The Webpack Alternative You've Been Hungry For Imagine if there was a build tool that you could use for Vue.js projects that compiled faster than Webpack, gave you a smaller bundle size and required only a few lines of configuration. Brunch is that tool. In this article, I'll show you how incredibly easy it is to set up a Vue.js + Brunch project, cover some of the pros and cons of
Vue.jsを教えるまでの道のり - sushitecture
querySelectorを教えるべきかgetElementByIdとかでやるべきか一瞬迷う（結局querySelectorにする）
VMS - Vue.js製のCMS MOONGIFT
CMSは常に新しいものが登場します。それはプログラミング言語だったり、フレームワークだったりします。CMSがあることで、そのプログラミング言語やフレームワークの使い方が分かるようになります。CMSは殆どの方が機能について理解していますので、コードの理解も早いでしょう。 今回はVue.jsを使ったCMS（管理画面）のVMSを紹介します。 VMSの使い方 管理画面のダッシュボードです。 ユーザ一覧。 ページを追加する画面です。 アンケート機能もあります。 こんな感じで設問を追加します。 質問の一覧です。 VMSはVue.jsでできていますので、UIの遷移などはとてもスムーズです。Vue.jsの書き方、使い方を学ぶ上でも役立つのではないでしょうか。なお、ユーザが見る画面については自分で開発する必要があるようです。 VMSはnode/JavaScript製のオープンソース・ソフトウェア（MIT L
Release v2.4.0 Kill la Kill · vuejs/vue
"Fear is freedom! Subjugation is liberation! Contradiction is truth!" Features Full SSR + async component support in core: SSR now supports rendering async components used anywhere and the client also supports async components during the hydration phase. This means async components / code-splitting now just works during SSR and is no longer limited at the route level. (9cf6646 & 7404091) Easier cr
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,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今、我々は、 GUI の設計について 何を考えるべきか
GitHub - microsoft/TypeScript-Vue-Starter: A starter template for TypeScript and Vue with a detailed README describing how to use the two together.
http://moonjs.ga/
GitHub - surmon-china/surmon.me: 🌱 My digital garden, powered by myself.
Vue.js を vue-cli を使ってシンプルにはじめてみる - Qiita
