エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA
Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
Vuejs 追加と編集フォームを共通化する
課題追加と編集フォームは同じデータを操作することが多い。そのため、各フォームを異なるコンポーネントとして作成するとほぼ同じ処理をするコンポーネントが2つできることになり、入力チェックやレイアウトの調整に2重のコストがかかる。そのため、追加と編集フォームを共通化したい。 解決方法あまりスマートな方法を見つけられなかったので、以下、愚直に実装した例。 子コンポーネントに、入力チェックや画面のレイアウトなどの共通処理を実装する子コンポーネントで入力チェックが終わったデータを、親コンポーネントにイベントとして通知する親コンポーネントで子からイベントを受け取り、追加/編集固有の処理ロジックを実装する 検証環境package.json ... "dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1" }, ... 子コンポーネント初期表示するた
Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (1) イントロダクション | Hypertext Candy
はじめに 対象者 JavaScript / Vue.js / PHP / Laravel の入門レベルの方、入門書を読んだあとに「何か作ってみたい」という方が、それぞれの知識を組み合わせて本格的なアプリケーションを開発できるようになることを目指しています。 上記のいずれかの知識がまったくない状態だとこのチュートリアルの内容は少し難しいかもしれません。チャレンジするのもいいですが、参考文献に挙げた市販の入門書か、関連記事のチュートリアルを先に読んでおくと理解しやすいと思います。 学べること Vue.js と Laravel を組み合わせて SPA を構築する方法 SPA におけるクッキー認証と CSRF 対策 Vue Router を使用した画面遷移 Vuex を使用した状態管理 Vue でのタブやローディング UI の表現 SPA におけるエラー処理 扱わないこと デザインと CSS コー
ビデオチャット作るときの逆引きTipsまとめ - xor
リモートワークのため社内用ビデオチャットツールを先日作ったのですが、せっかくなので一部をオープンソースにしてGitHubにあげておきました。 github.com ※リファクタしてないので見辛いです SPAなのでGiHub Pages上でそのまま利用もできます。 ukkz.github.io （OGP設定しないと…） 一旦開発が落ち着いたので、作業時のメモを簡単に整理して公開しておきます。 構成 Vue.js (@vue/cli v4.3.1) Vuetify @2.3.1 Vuex @3.4.0 Vue-Router @3.3.4 SkyWay まとめ一覧 ビデオストリームの情報を知りたい 使ったところ：実際の映像アスペクト比とブラウザ画面のアスペクト比から複数映像配置時の自動最適化 VideoTrack.getSettings()でいろいろ情報がとれました。 // メディアストリームオ
Vueでグローバルイベントを使う
Vueなどで画面を作っていると、時々画面コンポーネントの親子関係を飛び越えたイベント送信を行いたくなる場合がある。例えば汎用のメッセージ表示ダイアログや確認ダイアログの表示処理を最上位コンポーネントで定義し、その呼び出しイベントをコンポーネント階層の末端から行いたい場合など。 通常ではコンポーネントにイベントリスナーを定義してどんどん階層を遡る定義をする必要があるが、流石にこれは漏れが発生しがちだし調査も大変なので、どこからイベントを発火しても基底のコンポーネントのイベントハンドラーが動作するような仕組みの方が漏れはなくなる。 過去のVueにはEvent Busの仕組みがあったが、最近のバージョンでは削除されている。Event Busは複雑になりやすいからというのが理由のようだが、一方で単にイベントを上位にスルーするだけの定義を何回も書くのもそれはそれで問題。 結論を書けば、$root.$
週休七日
やること 今回はGanacheを利用して、昨日作成したスマートコントラクトをテストネットワーク上で動かしてみたいと思います。 luca3104.hatenablog.com Ganacheとは truffleframework.com 一言で言うとONE CLICK BLOCKCHAINです(!?) ローカル環境にEthereumのテストネットワークを手軽に立ち上げることができます。 ダウンロード ヘッダー右下にある、DOWNLOADボタンをクリックし、ダウンロードを開始します。 開く アプリケーションを開始すると、以下のような画面になります。 最初からテスト用に複数のアカウントと、それぞれ100ETHずつあることが確認できます。 ネットワークの確認 アプリケーション右上にある⚙ボタンをクリックし、設定画面を開きます。 設定画面内にサーバーの情報が書かれているのでメモします。 デプロイの準
Vue.js 汎用的な確認メッセージをモーダルダイアログで定義する
Vue.jsで汎用的な確認メッセージ（confirm）をモーダルダイアログで定義してプログラムから呼び出す方法を紹介します。 以下のソースではVuetifyを使用していますが、CSSフレームワークにかかわらず考え方は同じです。 Vue.js モーダルダイアログをプログラムから呼び出すで紹介した方法をもとに定義します。 コンポーネントの作成まずはコンポーネントを作成します。 Vue.js モーダルダイアログをプログラムから呼び出すで定義したミックスインを使用しています。 メッセージはプロパティで受け取るようにしています。 また、OKとキャンセルのボタンを押したときのアクションをプロパティで定義するのがポイントです。 Confirm.vue<template> <v-dialog v-model="show" :max-width="400"> <v-card> <v-card-title c
Vue.js最初の難関、「props down, event up」を初心者にわかるように解説してみた | フューチャー技術ブログ
なぜ、アルファベットで表現してまで分割して考えるのか？それは、具体例を考えれば簡単に理解できるはずです。 ユーザに何らかのデータを伝えるとき、どんな見せ方をしますか？あるいはどんな見方をしたいですか？文章、表、写真、動画、音楽の再生など、データに合わせて適切な見せ方が存在するはずです。では、適切な見せ方が決まって同じ種類のデータを扱うのなら、ある種のテンプレートにデータを流し込んで決まった見せ方にしますよね？ もし変えてしまったらユーザーは混乱しますし、そんな複雑なサイトを作るのは困難かつ望ましくありません。 上記の話の見せ方（ある種のテンプレート）の部分をview(見た目)としてDOMが担当します。viewに流しこむデータの取得・加工、viewで受けた操作の命令を受けるのはmodelとしてのJavaScriptです。（写真管理のwebサービスなんかであればダウンロード操作など） MVVM
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (3) SPA開発環境とVue Router | Hypertext Candy
Vue入門