以下のコマンドを打ち込むことで解決しました。 $ npm install $ npm run dev 参考 【Laravel】初期導入時エラー「The Mix manifest does not exist.」

こちらの記事を元にやっております。 qiita.com まず ec2-user:~/environment (master) $ node -v v8.16.0 ec2-user:~/environment (master) $ npm -v 6.4.1 ec2-user:~/environment (master) $ nvm install 10.7.0 Downloading https://nodejs.org/dist/v10…

See the Pen componentへのdata、computed、methodsの設定方法 by りっしー (@hiwriterprogram) on CodePen. 設定方法はnew Vue後とさほど変わりませんが、気をつけるのはdataの定義方法です。関数を通して、オブジェクト形式で返すことをお忘れなく！ 参考 …

VueのComponentを作る際の基本形は以下の通りです。 See the Pen componentの作り方 by りっしー (@hiwriterprogram) on CodePen. 参考 基礎から学ぶ Vue.js

追加機能 削除機能 更新機能 参考 追加機能 まずはオブジェクト（リスト）に要素を足す方法です。 See the Pen rXeLEb by りっしー (@hiwriterprogram) on CodePen. ここで引っかかったのは、 this.monsters.reduce(function(a,b){ //reduce以降はidの最大値…

以下のようにすることで、hpが300以上のmonsterにだけ、「強い！」という文字を足すことができます。 See the Pen v-forとv-ifを連携して特定のdateにだけ効果を付与したい by りっしー (@hiwriterprogram) on CodePen. また、v-forと同じタグの中で、先ほど…

SPAにも重要な機能であるページ切り替え。これを実現するのが、v-ifとv-showです。以下はv-ifを使用し、selectオプションによって表示内容を切り替えるというもの。 See the Pen v-ifで表示切り替え by りっしー (@hiwriterprogram) on CodePen. 以下はv-sho…

See the Pen SVGとv-bindの連携 by りっしー (@hiwriterprogram) on CodePen. 参考 基礎から学ぶ Vue.js

通常、imgタグ内に属性やサイズなどを指定する際には以下のような書き方をしなければなりません。 <img id="1" alt="商品1サムネイル" width="200" height="200" src="......"> しかし、これでは1つ1つ書き込む手間も、修正にかかる時間も大きく、html自体の可視性も下がってしまいます。 Vue.jsのv-bindを使用すれば、最初にかかる手…

1つ目は、JSのdataオブジェクトに設定した中身をv-onのclassやstyleに直接指定する方法です。 See the Pen QeNyqY by りっしー (@hiwriterprogram) on CodePen. 2つ目は、上記の方法の簡略版。オブジェクトをdataに作っておき、html側にはシンプルに記述する…

v-onを使うもの See the Pen クリックごとに数が増えるボタン by りっしー (@hiwriterprogram) on CodePen. $refsを使うもの See the Pen $refsを使ったカウントアップボタン by りっしー (@hiwriterprogram) on CodePen. 2つの違いは？ 1つ目はdataにcount…

See the Pen transitionを利用したフェードイン・フェードアウト by りっしー (@hiwriterprogram) on CodePen.

See the Pen v-forの基本的な使い方 by りっしー (@hiwriterprogram) on CodePen.

See the Pen Vue.jsの基本出力 by りっしー (@hiwriterprogram) on CodePen.

[Vue warn]Cannot find element: #appが出る時の解決法としては、以下の2つ。 bodyタグの最後にnew Vue()を記述 DOMContentLoadedイベントハンドラ内でnew Vue()を行う DOMContentLoadedイベントハンドラ内でnew Vue()を行う document.addEventListener('DOM…

LaravelとVue.js Vuex Vue Router学習用に使用したサイトや使える素材サイトをまとめています。情報あればコメントにお願いします〜！ チュートリアル Vue.js Vuex Vue Routerを使ってメッセージ送信機能 qiita.com 説明は割と端折られているところもありま…

See the Pen VoaLPG by りっしー (@hiwriterprogram) on CodePen. 手順 Vee-Validateプラグインのインポート(CDNからが手軽） Vee-ValidateをJS側で有効化（useメソッド） form要素に検証ルールを付与 errorsメソッドで検証後のエラーをキャッチ V-Validate…

参考 フック関数 フック関数の引数 addEventLisrtener追加も可能！ See the Pen ydZdJQ by りっしー (@hiwriterprogram) on CodePen. 参考 速習Vue.js 速習シリーズ 山田祥寛 フック関数 //以下の「bind」はフック関数と言う bind:(el,binding)=>{ el.style.…