Vue.jsのアプリ制作時に参考になった記事のまとめ|おちゃカメラ。お問い合わせVue.jsのアプリ制作時に参考になった記事のまとめ2019.09.17ブログWeb・プログラミングこちらの記事もどうぞ無料のPOSレジアプリを作った話。名古屋クリエイターズマーケットで活用するまでの苦労話jQueryの写真スライドショープラグインはslippryがおすすめかも。時代遅れだけど追加してみた話この記事名とURLをコピーする本日限定Amazonタイムセール開催中セール商品を見に行く本日限定Amazonタイムセール開催中セール商品を見に行くVue.jsでアプリを作る際に参考となった記事をまとめたいと思います。ゼロからVue.jsを触るにあたり、つまづいたポイントなどを順番にご紹介します。具体的には、Vue.jsの大まかな概要を理解できる記事やフレームワークの紹介。配列とオブジェクトの扱いが難しかったので、その値の操作方法を中心に解説します。私自身は過去にAngularでアプリを作った事がありましたが、もし同じようにVue.jsをこれから触ろうと考えてる方の参考になりましたら幸いです。目次Vue.jsの入門。Vue.jsAmazonで見る楽天市場で見るYahooショッピングで見るその他:カメラのキタムラで探すVue.jsの入門。触って慣れるVue.jsでアプリを作る前に、大まかな使い方を雰囲気だけでも掴みたいと思いました。そこで、CodePenを使い実際にプログラミングしてみることにしました。Vue.jsは短いコードでフォームの入力内容や処理内容を同期・処理させることができるのが特徴です。上記のサンプルで参考になったのがこちらの記事です。Qiitaスポンサーリンクコンポーネントやフレームワークを大まかに把握Vue.jsにはコンポーネントと呼ばれる一連の動作を処理する塊が有ります。高機能なフォームであったり、リストや表を生成するプログラムです。コンポーネントは自身で定義もできますが、用途に応じて既存のプログラムを利用すると素早くアプリを作成できます。コンポーネントについては以下の記事が参考になりました。QiitaまたUIフレームワークと呼ばれる、見た目のデザインも設計されたプログラムも紹介されています。私の場合はVuetifyというUIフレームワークを利用させて貰うことにしました。レスポンシブであり、コンポーネントも十分揃っているのが選ぶ決め手でした。配列の要素を上書きする方法ここからはVue.jsを実際に触りながらアプリを作っていくことにしました。この時に、理解が難しかったのが配列の扱いです。Vue.jsで配列の値を変更したり追加するにはspliceやpushなどを使います。変更に使えるメソッドは限られています。詳しくはVue.jsのドキュメントが参考になります。Vue.js変更メソッド例えばitemsという配列があり、0番目の配列要素の値を変更したいとします。"hoge"通常のJavascriptやESでは動作するのですが、Vue.jsの場合は上手く動作しません。Vue.jsではspliceを使います。"hoge")0番目の要素から1つをhogeに変更します。配列要素の変更や追加、削除については以下の記事が参考になりました。Qiitaオブジェクトの扱いについてVue.jsではオブジェクトの扱いも、配列の時と同じように通常とは異なります。usersというオブジェクトのプロパティであるfooを消したい場合は次のようにVue.delete()を使います。}})Vueオブジェクトのプロパティを新たに追加する方法Vue.jsで扱うオブジェクトにプロパティを追加するにはVue.set()を使います。}})Vueオブジェクトの複製と大幅な書き換え一部のプロパティを変更したり追加するには前述の方法でも良いのですが、複数のプロパティを大きく変更したい場合はVueオブジェクトを作り直す方法もあります。Vue.util.extend(copyMyObject)JSON.stringify()すると単純な文字列に変換することができます。JSON.parse()でオブジェクトを作り直すと、一般的なオブジェクトを作ることができます。Vue.util.extend()で通常のオブジェクトからVueオブジェクトを作ることができます。ここまでの内容は下記が参考になりました。}が使われていることでした。2.xではmethods:{}の中でfunction(){}を使うルールがあり、Vueの中で定義した変数やメソッドにアクセスできるようです。基本的にthisとfunction(){}を使うことになります。Qiitaただ、例外としてアロー関数を使う場面があります。}メソッドの中でsetTimeoutを使いたい場合には、アロー関数式を使うことでthisにアクセスすることができるようです。StackOverFlow29番目の回答が参考になりました。(てぃー)InstagramTwitterYoutubeノスタルジックな写真や映像撮影が好きです📷✨当サイトではカメラ関連製品の魅力を中心に情報発信を行っています。RAW現像教室」タグIT・プログラミングnode.jsHTML5javascriptJQueryslimスポンサーリンク関連する記事Youtube作例&製品レビューGalleryおちゃカメラ。プライバシーポリシーコンテンツの保存及び転載は固くお断りいたします。当サイトに記載されるコンテンツ(文章・画像等)は著作権により保護されています。万が一コンテンツや写真の盗用・二次利用が見つかった場合には500pxの写真販売価格を参考に差止め請求及び使用料または損害賠償請求をさせて頂く場合がございますので予めご了承下さい。記事に関するお問い合わせや寄稿についてはお問い合わせフォームまでお願いいたします。hexo.お問い合わせポートフォリオフィード。