やわらかVue.jsについて / 迷わないVueの学び方 / イベント情報 / フロントエンドを気楽に歩こう / 猫本以前 / 書籍 / 【漫画で解説】Vue.jsで楽をしよう! / レイアウトどうすればいい? / 参考になるページ / webpackの動作を見てみよう / vue-routerとかvuexって使ったほうがいいの? / Vueのコミュニティに入りたい! / flaskやrailsと
合同会社kumanoteのTanakaです。 vue-router使用時にページ遷移を検知して、Google AnalyticsのBeaconを飛ばす実装の紹介になります。 ページ遷移の検知 $routeという変数をwatchすることで、ページ遷移を検知することができます。 単一のrouter-viewを使っている場合は、一箇所実装することで 全てのページ遷移に反応して、処理を行うことができます。 (※ 複数のrouter-viewを使っている場合は別の作り込みが必要になります。) 具体的には以下のような感じになります。 <template> <router-view></router-view> </template> <script> export default { watch: { '$route': function (to, from) { if (to.path !== fr
ハイパーテキストをマークアップするのがHTMLなら、グラフィックをマークアップするのがSVGです。簡単なコードであれば形をイメージできるうえに、JavaScriptから手軽に操作できます。 WebGLを含むCanvasは、できる事の幅でいえばSVGよりもはるかに上ですし、ベジェ曲線も用意されていますが、線を引くだけなら大げさな気がします。あとレスポンシブ対応が地味にめんどくさい。サクサク動くゲームとか、ゴリゴリ動くリッチなサイトをCanvasで作れる人はすごくすごいと思います。 そんなこんなで、今回はSVGを使います。 Vue.jsとSVG SVGの実体はXMLなので、HTMLのようにVue.jsから操作できます。ベジェ曲線に必要な座標を変数として定義しておいて、それをリアルタイムで変更できるようにすれば、いい感じのベジェ曲線がVue.jsとSVGで実現できそうです。高まります。 実装 プ
Vue.js では、要素を追加/更新/削除したときのアニメーションを、簡単に実装できるような機能が用意されています。 本当にありがたいことに、公式のドキュメントにバッチリとまとまっていますが、それを要約しつつパパッと今日から始められるように、ライトに端折って紹介します。 Enter/Leave とトランジション一覧 — Vue.js シンプルな実装 Vue が提供しているアニメーション機能は、かなり多機能で美味しい仕様になっていますが、とりあえず一番簡単なアプローチで実装してみます。 ポイント <transition name="your-anim-name"> で、v-if や v-show が指定された要素をラップする name 属性が class 名のプレフィクスになる 挿入(enter)/削除(leave)時のアニメーションの進捗を補足して、それに応じた class を自動で切り替
はじめに 最近耳にする Vue.js(ビュージェイエス) ってどんなもの? jQuery とどう書き方違うの?とか、jQuery でやってたこういう事って Vue.js だとどうやるの?jQuery しか使ってないけど Vue.js も使ってみたいなぁ~と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ(日本語翻訳率が半端ないと評判) もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
まえがき Vue.js #2 Advent Calendar 2017の記事です。 フロント初心者なので、vue.js固有の話とフロントフレームワーク全体の話が混ざっているかもしれませんが、ご容赦下さい。 どのページにも表示されるheaderをつくりたい vue-routerを使ってroutingを行いつつ、一番上に常にheaderを置きたかった。 はじめは「単一コンポーネントだし全てのページの最初におけば良いでしょ」とかおもっていました。 問題 $project_top/src/components/HelloWorld.vueに< router-view>を入れてもが動かない。 <template> <div class="hello"> <p>routing top</p <router-view></router-view> <!-- ここ --> </div> </templat
Vueの公式ドキュメントが強く推奨するVueコンポーネントのファイル名の命名規則。 単一ファイルコンポーネント 単一ファイルコンポーネントのファイル名はPascalCaseかkebab-case。 mycomponent.vue、myComponent.vue MyComponent.vue、my-component.vue ベースコンポーネント 頻繁に使われるベースコンポーネント(ステートを持たないDumpコンポーネントやPureコンポーネントと呼ばれるもの)は、Base、AppまたはVで始めないとならない。 MyComponent.vue VueTable.vue Icon.vue BaseButton.vue AppTable.vue VIcon.vue シングルインスタンスコンポーネント シングルインスタンスコンポーネント(1ページにつき1個しか使われないコンポーネント)は、The
Laravelのページネーション機能を使って、オリジナルのページネーション付きテーブルコンポーネントを作成します。 テーブルとページネーションの見た目はBootstrapのコンポーネントを使います。 プロジェクト作成 まず適当な名前でプロジェクトを作成します。 Laravelインストーラを使うなら以下のような感じで。 テーブル作成 デフォルトで存在しているマイグレーションファイルを改変し、名前・メール・住所フィールドの入ったusersテーブルを作成します。 database/migrations/xxxx_create_users_table.php public function up() { Schema::create('users', function (Blueprint $table) { $table->increments('id'); $table->string('na
このブログは https://minamo173.com に移転しました。 この記事は下記に移転しました。 ↓ Vue.jsと出会って感動したこと | 海月暮らし この記事はVue.js #2 Advent Calendar 2017の19日目の記事です。 (投稿が遅くなってしまって申し訳ありません。) 今年は初めてVue.jsと出会った年になりましたので、触れてみて感動したことを書いてみます。 条件付きレンダリングがとても便利 ボタンをクリックして表示・非表示を切り替えるような場面など、下記の実装だけで実現出来ます。 下記のサンプルでは、v-if=変数名とすることで、指定した変数の値に応じてv-ifが含まれているタグを表示するかを変化させています。 See the Pen Vue.js v-if example by minamo (@minamo173) on CodePen. 今回は
ここ1年ほど実務でVue.jsを利用してWebアプリケーションを開発しています。 今回はVue.jsを使ってチームあるいは個人で開発を始める上で予め考慮しておくと良さそうな事をいくつか書きたいと思います。 コンポーネントルール Vue.jsは単一ファイルコンポーネントによって、とてもシンプルな記述でコンポーネントを作る事ができます。しかし、開発者同士でコンポーネントの認識を揃えておかないと同じようなコンポーネントが作られてしまい、保守性を低下させる要因になってしまいます。 そのため、昨今ではAtomic Designなどの考え方をベースにコンポーネントを管理する方法が用いられています。Atomic Designを用いたコンポーネント設計方法については、以下の記事が参考になるかと思います。 Vue.js × Atomic Design - it's an endless world. いずれ
はじめに ゆるいAtomicDesignを意識してForm部品をComponent化してみました。 Input <template> <label> <span v-if="$slots.label"><slot name="label"></slot></span> <span v-else-if="label">{{ label }}</span> <input :type="type" :name="name" :placeholder="placeholder" :value="value" @input="updateValue" @focus="$emit('focus', $event)" @blur="$emit('blur', $event)" > </label> </template> <script> export default { props: { value:
8. 以下のコードを写経して ブラウザで開こう <!DOCTYPE html> <div id="app"> {{ message }} </div> <script src="https://unpkg.com/vue"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> 9. 以下のコードを写経して ブラウザで開こう <!DOCTYPE html> <div id="app"> {{ message }} </div> <script src="https://unpkg.com/vue"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!'
こちらの記事は、主にVue.js v2向けの記事となります。 Vue2は、2023年12月31日でEOLとなるため、それに伴い本記事は近日中にクローズする予定です。 こちらVue.js #4 Advent Calendar 20174日目の記事です~。 どもども。ソニックムーブっていう会社で、マークアップしたりJavascriptをちょいちょい触ったりしているココエっていいます。 最近Vue.js絡みの仕事ばっかりやっていて、初心者の方にVue.jsの使い方を教える機会がでてきたので、こんな記事を書いてみようと思いました。 やっぱり最初の難関がコンポーネント作成ですよね。 チュートリアル見ながら、コンポーネント作ってみたけど、なんかうまくいかなーーーい!という方は、後述する、コンポーネント作成がうまくいかないときにチェックする5つのことをチェックしてみてください。 お役に立てればこれ幸い。
これは Vue.js #3 Advent Calendar 2017 – Qiita 2日目の記事です。 この記事では、Vue.jsで簡単に「トップへ戻るボタン」を作る方法をご紹介します。 Vue.jsは、小さくも始められるjsフレームワークです。 なので、「とりあえずjQueryでやってたことを置き換えてみる。」と言った使い方もできます。 ただ、今までjQueryぐらいしか使ってなかった僕と同じjavascript初心者の方だと、「トップへ戻るボタン」のアニメーションが置き換えられず、結局jQueryに戻ってしまったという方も多いのではないでしょうか? その悩みを簡単に解決するのが、Vue.js用のプラグイン「Vue-scroll」です。 このプラグインを使うことで、脱jQueryに一歩近づけます。 気軽にスクロールアニメーションができる「vue-scrollto」 vue-scroll
2017.10.22 技術書典3 え17「べころもち工房」で頒布した技術書です。 ◆動作確認・作業環境 - macOS Sierra 10.12.6 - Chrome 最新 - iTerm2 3.1.4 - Brackets 1.10 - Node.js 8.4.0 - vue-cli 2.8.2 ◆注意事項 - 2017.10現在の内容です。使用バージョンによっては操作方法が解説と異なる場合があります。 - ターミナルの操作はMacです。Windowsでの解説はしておりません。 ◆概要 Webデザイナー兼コーダーが JavaScript ライブラリ Vue.js( ビュージェイエス)を使って自身のポートフォリオサイトを作った際の制作記兼解説本です。 ◆仕様 PDF形式 B5サイズ 49ページ(表紙含む) ◆目次 はじめに 2 Node.js ? npm ? vue-cli ? 6 vue
はじめに 最近耳にする Vue.js(ビュージェイエス) ってどんなもの? jQuery とどう書き方違うの?とか、jQuery でやってたこういう事って Vue.js だとどうやるの?jQuery しか使ってないけど Vue.js も使ってみたいなぁ~と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ(日本語翻訳率が半端ないと評判) もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く