【ISSUE】【Vue.js】よく使うプロパティ、メソッド
2024年12月23日 8:40
今回は、Vue.jsでよく使う主力のプロパティを書いていきます。
dataは、簡単に言うとファイル内で使うデータを設定するものになります。フォームに初期値を設定したり、別のファイルからpropsを使って受け取った値を組み込んだりすることができます。
そして、配列を格納する変数を設定して、メソッドを介したりして、複数のデータを格納することもできたりします。
https://ja.vuejs.org/guide/components/props.html
サンプルコードは以下のようになります。
こちらは、ファイル内で使用するメソッドをまとめていくプロパティになります。
以下が、サンプルコードになります。
こちらは、プロパティが更新されると、自動的に値が更新される算出プロパティです。
サンプルコードはこちらです。
こちらは、store/index.jsに定義している、メッセージの一覧を表示するためのメソッドを、画面が表示されると同時に呼び出しています。
このように、画面が表示されると同時に動かしたいメソッドを格納するプロパティです。
Vue.jsのcreatedとmountedは、どちらもVue.jsコンポーネントのライフサイクルフックであり、それぞれ特定のタイミングで呼び出されるメソッドです。
createdは、Vue.jsインスタンスが初期化された直後に呼び出されるメソッドで、DOM要素が作成される前に呼び出されます。createdの中では、Vue.jsインスタンスに初期データをセットするなど、初期化に関する処理を行うことができます。
一方、mountedは、Vue.jsインスタンスがDOMにマウントされた後に呼び出されるメソッドです。このタイミングで、Vue.jsインスタンスが作成したDOM要素にアクセスすることができます。mountedの中では、DOMに関する処理を行うことができます。
簡単に言うと以下のような感じです。
createdはDOMがまだ作られていない状態で呼び出すメソッド、mountedではDOMが作成された直後の状態に呼び出すメソッド
これは、コンポーネント化したファイルの一覧をまとめるプロパティになります。
これは、チャット機能のフォームをコンポーネント化したものです。
templete内では、コンポーネント化したファイルを表示したい場所に、以下のように書きます。
https://reffect.co.jp/vue/vue-js-created-mounted-diffrence#createdmounted
https://qiita.com/tanoken729b/items/5770d4c620163a25ad21
[cv:issue_marketplace_engineer]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。