[Vue.js]コンセプトアレンジ

4536 ワード
vue.js テキストリンク

🚀 Package.json


必要なパッケージのリストをファイルに整理し、リストファイルを使用してコマンドを使用して必要なすべてのパッケージをインストールできます.これらの定義はまとめられています.
  • 管理項目に依存する小包の書類.
  • 必要なパッケージとバージョンを簡単に管理できる.
  • Package.jsonファイルの各情報は、基本的にはkey-valueで格納されている単一JSONオブジェクトである.

    • 🚀 ライフサイクル

    라이프 사이클(life cycle)イランビューインスタンスの生成と消失プロセス.
  • 作成フェーズ
  • マウントフェーズ
  • アップグレード(修正)フェーズ
  • 設計(消滅)段階

    • 💻 Create


    beforeCreate

  • ライフサイクルで最初に実行する.
  • data属性、methods属性はインスタンスで定義されていない.
  • 構成部品がDOMに追加されていないため、DOMにアクセスするとエラーが発生する.

    • created

  • 作成後に実行する段階.
  • data属性、methods属性が定義されているため、論理にアクセスして実行することができる.

    • 💻 Mount


    beforeMount

  • DOMに追加する前に実行したhook.
  • 素子初期にデータを作成する必要がある場合、createdライフサイクルフックをレンダリングおよび変更する必要がある場合は、mountedライフサイクルフックを使用することができるので、あまり使用されないライフサイクルフックです.

    • mounted

  • DOMに追加して呼び出されるライフサイクルフック.
  • $elDOMにアクセスできます.

    • 💻 Update


    beforeUpdate

  • DOMが再レンダリングする前に呼び出されるライフサイクルフック.
  • 更新後の値があるので、更新後の値で他の値を更新できます.

    • updated

  • DOM再レンダリング後に呼び出されるライフサイクルフック.
  • DOMは、更新後に呼び出されるHookであるため、変更後のDOMを用いて処理する際に使用される有用なHookである.
  • フック掛けと同様に、再レンダリングが完了することを保証する場合には、必ず$nextTickを使用します.

    • 💻 Destroy


    beforeDestroy

  • 構成部品が除去される前に呼び出されるライフサイクルフック.

    • destroyed

  • エレメントが除去された後に呼び出されるライフサイクルフック.
  • 素子の全てのイベントリスナー(@click、@change等…)と指導(v-model、v-showなど...)解除され、サブエレメントもすべて除去されます.

    • 🚀 Props

  • 親から子への情報伝達に使用props
    • 使用
  • ・v-bind親(親)のデータを動的にバインドして子(子)に渡すことができます.データが更新されるたびに、サブコンポーネントにデータが渡されます.
  • v-bind利用可能:ショートカットとして使用.
    • <UserDetail :nameOfChild="name"><UserDetail />
  • 左から子へのprops変数名を宣言し、右から変数の値を記入する.
    👉 UserDetail使用するnameOfChildこの引数は、親コンポーネントUserに親コンポーネントのnameを入れることを意味します.

    • 📍UserDetail(サブアセンブリ)

    <template>
	<p> {{ nameOfChild }} </p> 
</template>

<script>
export default {
	props: ['nameOfChild'], //부모컴포넌트에서 사용되는 변수명
    data() {
    	return {
         
    	}
   }
  }
</script>
  • サブアセンブリが親アセンブリからデータを受信する際にPropsを使用する.
  • array形式で発表される.
    • UbuntuコンパイルOpenWRT 15.05ヒント「Build dependency:Please install the xxx」
    エンコードテストの問題を解決しました.