Help us understand the problem. What is going on with this article?

vueをいじったので、忘れないうちにアウトプット

最近、仕事でvueをいじったので、忘れないうちにアウトプット(笑)
取り急ぎ、アウトプットしているので、文面がひどいです。
徐々に肉付け、整形していきますので、ご容赦ください。

参考サイト

実装関連

https://jp.vuejs.org/v2/guide/instance.html
https://vuex.vuejs.org/ja/api/#vuex-store
https://element.eleme.io/#/en-US

単体テスト関連

https://vue-test-utils.vuejs.org/ja/
https://jestjs.io/docs/ja/getting-started

デバック関連

https://qiita.com/hashimoto-1202/items/c81f5d4c271eef16d957

いいなーって思ったポイント

htmlとCSSとJavaScriptとデータモデルが分かれていること

レガシーな画面しか経験の無かった自分としては、データモデルが分かれているのは、非常に分かり易かったです。
しかも、データモデル自体が構造的でわかり易いです。

ライフサイクル

まだ、created と mouned しか使ってなくて、理解できていませんが、ライフサイクルがあるのは面白い。
理解出来次第、書いていきます。

1.beforeCreate
2.created
3.beforeMount
4.mounted
5.beforeDestory
6.destroyed

computed、watch、filter

各々面白い機能だな~って思っています。
まだ完全な使い分けを理解していないので、理解出来次第書いていきます。

わからんーって思って、ハマったポイント

vue と vuex と ライブラリの分けがわからんかった。

たぶん、勘のいい人は気にしないと思いますが、私はハマッてしまったので。

要するに、既に実装してある機能を参考に作ろうとすると、その実装されている「タグ」がどういう動きをするのか?がわからん!
って思って、調べるときに、どの本家のサイトを見ればよいのか?が分からなくなってしまいました。

Google先生に聞くと、情報は出ます。ただ、本家の情報が知りたいじゃないですか。
そのときに、「このタグ」って。。。

っていうのに、だいぶハマリました。

単体テストについて

vue-test-utils とはいえ、jestも知っておく必要あった。
ただ、jest は神かと思いましたw どんなファンクションもモック化できるので隅々までUTが実施できますね。

デバックについて

GoogleChromeのデベロッパーツールのコンソールは、神ですねw
javascirptを試しに実行ができます。
あと、console.log で出力した内容が表示されます。

あと、chromeの拡張機能のVue.js Devtoolsは、必須ですね。。
なんでか?というと、データモデルがvueの記載方法で確認ができるからです。

何かを操作して、値がどう変わった?って見るときに、Devtoolsが無いと、console.logでログ出力するか、HTML上で判断するしかないですが、Devtoolsだとそのまま見れます。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away