Vue.jsの仮想DOMと差分レンダリングの仕組み① - Adwaysエンジニアブログ
こんにちは、@binarytaです。 何回かに分けて記事を公開していこうかなと思っております。 前提 Vue.js version : 2.5.13 対象読者 JSフレームワークの知見がある 仮想DOMの仕組みを知りたい はじめに なぜVue.jsか？という質問が飛んできそうなので一応述べさせて頂きます。 そもそもですが僕がコミットしているチームではVue.jsを使っています。 なぜVue.jsを選択したかというと、流行りのフロントエンドフレームワークだということももちろんありましたが、Vue.jsのhtmlの記述がReactのようなJSX記法ではなく限りなくhtmlに近いDSLを持っていることが一番大きいです。 それに加え、既存のプロジェクトに適用しやすいようなメリットが多かったのも選択した理由になりますが、その辺に関しては以下のVue.js公式ページを参照してみてください。 https
Vue.jsにおけるRender PropとScoped Slotsについて - Qiita
こんにちは。転職によりReact畑からVue畑に乗り換えることになったフロントエンドエンジニアです。 Vueでも描画関数使ってればRender Propsも使えるじゃんと思ったところ、Vue.js 作者のEvan You曰く「Render PropパターンはVue.jsにおけるScoped Slotsと同じ」とのこと。 In case you are wondering what’s the equivalent pattern in Vue, it’s called scoped slots (and if using JSX it works the same as React) — Evan You (@youyuxi) 2017年9月25日 本当にそうなのか簡単な実装例を用意してみました。 まず、そもそものRender Propを使う目的としては 「コードの再利用性を高めるための実
VeeValidate サンプル集 - Qiita
はじめに Vue.jsで実装されているフロントにおいて汎用的なフォームバリデーションには、 VeeValidateを使っていて、よく使うものをまとめてメモするコーナーです。 Vue.js: https://jp.vuejs.org/ VeeValidate: http://vee-validate.logaretm.com/ examples jsFiddleのSample交えつつみると秒速理解かもしれません。 数値指定と文字数制限（おまけでmax_value） Sample <div id="app"> <p> <h4>option: numeric and max:length</h4> <input v-validate="'numeric|max:10'" type="text" name="num1"> <br> <span v-if="errors.has('num1')">{
中〜大規模なSPAを開発する時に抑えておきたい10のポイント - KAYAC engineers' blog
こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向
サーバサイドレンダリング — Vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
算出プロパティとウォッチャ — Vue.js
テンプレート内に式を書けるのはとても便利ですが、非常に簡単な操作しかできません。テンプレート内に多くのロジックを詰め込むと、コードが肥大化し、メンテナンスが難しくなります。例えば: <div id="example"> {{ message.split('').reverse().join('') }} </div> こうなってくると、テンプレートはシンプルでも宣言的でもなくなってしまっています。しばらく眺めて、やっとこれが message を逆にして表示していることに気付くでしょう。逆にしたメッセージをテンプレートの中で 2 回以上使おうとすると、問題はより深刻になります。 上記の理由から、複雑なロジックには算出プロパティを利用すべきです。 基本的な例<div id="example"> <p>Original message: "{{ message }}"</p> <p>Comput
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
