エンジニアのひよこ_level10

毎日更新してた人。たまに記事書きます。

Vue.js

【Laravel+Vue】MPAでLaravelとVueで値を共有するには?【693日目】

DBの値をVueで扱いたい <ul v-for=items> <li></li> </ul> こんな風にfor文とかでVueを使って値を回したい。 でも、Vueからデータベースの値を取ることはできない。 ということで、Laravelなどバックエンドから値をとってきて、Vueに渡してやる必要がある。 ではどうやるのがいいか。 今の…

【Vue】Vueの勉強始めようpart19(Last!!!)(本を読み返す!)【554日目】

前回 www.nyamucoro.com 参考書籍 今回やったことは? コードのリファクタ 本を再度読み返す 実際のコード ■プルリク v-modelでgetとset出来るように変更 by klack710 · Pull Request #13 · klack710/study_vue_cli · GitHub ■作ったもの(ブランチはmaster参…

【Vue】Vueの勉強始めようpart18(vuexでフォームの値を共有)【553日目】

前回 www.nyamucoro.com 参考書籍 今回やったことは? vuexでフォームの入力値をaction経由で保存 実際のコード ■プルリク Vuexでフォームの値をaction経由で変更 by klack710 · Pull Request #11 · klack710/study_vue_cli · GitHub ■作ったもの(ブランチは…

【Vue】Vueの勉強始めようpart17(dataとpropsの違いがわからない)【552日目】

前回 www.nyamucoro.com 参考書籍 今回やったことは? なし(´;ω;`) 実際のコード ■作ったもの(ブランチはmaster参照なので、今後も更新されます) competent-brown-63c0e3.netlify.com 学んだメモ 現在Vuexを勉強中なのですが、 今更、propsと、dataの違い…

【Vue】Vueの勉強始めようpart16(Vuexで、ページ読み込み回数保持)【551日目】

前回 【Vue】Vueの勉強始めようpart15(詳細ページをSPAで作成)【550日目】 - エンジニアのひよこ_level10 参考書籍 今回やったことは? Vuexで、ページの読み込み回数を記録 実際のコード ■プルリクエスト Vuexでページの読み込み回数持ち、consoleで吐き出…

【Vue】Vueの勉強始めようpart15(詳細ページをSPAで作成)【550日目】

前回 www.nyamucoro.com 参考書籍 今回やったことは? 製品リスト、製品詳細をSPAで作成 実際のコード ■プルリクエスト APIで商品ページと商品詳細ページをつなぐ by klack710 · Pull Request #7 · klack710/study_vue_cli · GitHub ■作ったもの(ブランチはm…

【Vue】Vueの勉強始めようpart14(vue-routerでSPA作成)【549日目】

前回 www.nyamucoro.com 参考書籍 今回やったことは? vue-router導入 SPAページ作成 実際のコード ■プルリクエスト vue-router導入、SPAページ作成 by klack710 · Pull Request #5 · klack710/study_vue_cli · GitHub ■作ったもの(ブランチはmaster参照なの…

【Vue】Vueの勉強始めよう番外編(ESLintの設定をしよう)【547日目】

前回 www.nyamucoro.com 参考書籍 今回やったことは? ESLint(コーディング規約と合っているかチェックするシステム)の設定 ESLintに合わせて修正 実際のコード ■プルリクエスト Eslintの設定 by klack710 · Pull Request #3 · klack710/study_vue_cli · Git…

【Vue】Vueの勉強始めようpart13(Netlifyで自動デプロイ+自作プラグイン)【545日目】

前回 www.nyamucoro.com 参考書籍 今回やったことは? Netlifyで公開。GitHubと連携で自動デプロイ。 自作プラグイン作成 実際のコード ■プルリクエスト プラグインの作成 by klack710 · Pull Request #1 · klack710/study_vue_cli · GitHub ■作ったもの(ブ…

【Vue】Vueの勉強始めようpart12(vue-cliでプロジェクト作成)【544日目】

前回 www.nyamucoro.com 参考書籍 今回やったことは? vue initでプロジェクト作成 実際のコード github.com 学んだメモ $ vue init webpack study_vue_cli ? Project name study_vue_cli ? Project description I study vue-cli ? Author klack710 <willow710kut@gmail.com> ? Vue b</willow710kut@gmail.com>…

【Vue】Vueの勉強始めようpart11(vue-cliをインストール)【543日目】

前回 www.nyamucoro.com 参考書籍 今回やったことは? npm install -g @vue/cliでvue-cli3.xをインストール nodeのバージョンアップ(nodebrew使用) 学んだメモ 日本語ドキュメントはまだVue CLIバージョン2だったので、英語のドキュメント見ながらチャレンジ…

【Vue】Vueの勉強始めようpart10(transition-groupでリストも管理)【538日目】

前回 www.nyamucoro.com 参考書籍 実際のコード ■プルリクエスト transition-group実装 by klack710 · Pull Request #25 · klack710/study-vue · GitHub ■作ったもの(ブランチはmaster参照なので、今後も更新されます) 過去のも含めて今日反映しました! kla…

【Vue】Vueの勉強始めようpart9(transitionでアニメーション管理)【537日目】

前回 www.nyamucoro.com 参考書籍 実際のコード ■プルリクエスト 単一トランジション実装 by klack710 · Pull Request #24 · klack710/study-vue · GitHub ■作ったもの(ブランチはmaster参照なので、今後も更新されます) (2019/04/04時点では、今回の内容は…

【Vue】Vueの勉強始めようpart8(componentで共通のHTMLタグを管理)【530日目】

前回 www.nyamucoro.com 参考書籍 実際のコード ■プルリクエスト コンポーネントを作成。値をbindするまで by klack710 · Pull Request #23 · klack710/study-vue · GitHub ■作ったもの(ブランチはmaster参照なので、今後も更新されます) (2019/03/27時点で…

【Vue】Vueの勉強始めようpart7(watchで監視)【529日目】

前回 www.nyamucoro.com 参考書籍 実際のコード ■プルリクエスト watchのサンプルAPIページ by klack710 · Pull Request #21 · klack710/study-vue · GitHub ■作ったもの(ブランチはmaster参照なので、今後も更新されます) klack710.github.io 今回やったこ…

【Vue】Vueの勉強始めようpart6(computedで変数いじり)【528日目】

前回 www.nyamucoro.com 参考書籍 実際のコード ■プルリクエスト Sp96 絞り込み・ソート・set,get by klack710 · Pull Request #14 · klack710/study-vue · GitHub ■作ったもの(ブランチはmaster参照なので、今後も更新されます) klack710.github.io 今回や…

【Vue】Vueの勉強始めようpart5(モンスターとの戦闘)【526日目】

前回 www.nyamucoro.com 参考書籍 実際のコード ■プルリクエスト モンスターとの戦闘を実装 by klack710 · Pull Request #12 · klack710/study-vue · GitHub ■作ったもの(ブランチはmaster参照なので、今後も更新されます) klack710.github.io 今回やったこ…

【Vue】Vueの勉強始めようpart4(次の勉強の下準備)【525日目】

前回 www.nyamucoro.com 参考書籍 実際のコード ■プルリクエスト Sp70 戦闘ページのベースを作成 by klack710 · Pull Request #11 · klack710/study-vue · GitHub ■作ったもの(ブランチはdevelop参照なので、今後も更新されます) (2019/03/23時点では、まだ…

【Vue】Vueの勉強始めようpart3(v-forとv-bindでリンク集生成)【524日目】

前回 www.nyamucoro.com 参考書籍 実際のコード ■プルリクエスト topのリンク生成方法を変更 by klack710 · Pull Request #5 · klack710/study-vue · GitHub ■作ったもの(ブランチはdevelop参照なので、今後も更新されます) klack710.github.io 今回やったこ…

【Vue】Vueの勉強始めようpart2(v-bind)【523日目】

前回 www.nyamucoro.com 参考書籍 実際のコード ■プルリクエスト bindの機能をいろいろ実装 by klack710 · Pull Request #3 · klack710/study-vue · GitHub ■作ったもの(ブランチはdevelop参照なので、今後も更新されます) klack710.github.io 今回やったこ…

【Vue】Vueの勉強始めようpart1(Hello World他、基礎)【522日目】

前回 www.nyamucoro.com 参考書籍 実際のコード ■プルリクエスト github.com ■最終ブランチ GitHub - klack710/study-vue at ep42 ■作ったもの(ブランチはdevelop参照なので、今後も更新されます) klack710.github.io 今回やったことは? Hello World表示 ク…

【Vue】Vueの勉強を始めようpart0(環境構築編)【519日目】

さあ勉強を始めよう さて、勉強を始めるにあたって、環境構築ですね。 ってことで、Dockerで一から環境構築を・・・ ってのは面倒なので。 以前Laravel用に作ったdockerの環境を流用しちゃいましょう。 使ったリポジトリ github.com あまり整備していません…

Vue.jsの勉強始めました。【518日目】

Vueの勉強始めました Laravelの勉強していたんですが、私、フロントエンドは生のJavaScript、jQueryで書いてました・・・ TypeScriptやなにかフロントエンドのJSフレームワーク覚えたいな・・・ってことで、選ばれたのはVue.jsでした。 なんでVue? JavaScrip…