Vue_3

Vue

コンポーネント

2コンポーネントライフサイクル

3コンポーネント化開発

4コンポーネント間パラメータ

1コンポーネント
独自のHTML、CSS、データを持つページ独立領域.利点:再利用が容易で、ばらばらな結合、分業協力ページは独立した領域から構成され、コンポーネントにカプセル化されています.すなわち、各ページは複数のコンポーネントからなる
1.Vueコンポーネントの作成:1.1コンポーネントのHTMLクリップを定義してから、唯一の親要素のみを包む必要がある1.2 Vueコンポーネントの作成

 Vue.component(“   ”,{
  template:”   ”, //       

2.コンポーネントの使用:コンポーネントは、実際には再利用可能なラベルです.コンポーネント名は、ラベル名の実行時:ラベルの代わりに中のHTMLクリップを使用する場所です.
2コンポーネントライフサイクル
1つのコンポーネントのロードプロセスには、4つのフェーズ:1が含まれます.Create作成:コンポーネントインスタンスオブジェクトを作成し、dataオブジェクトを作成します.Mountマウント:コンポーネントテンプレートの要素をバインドし、DOMツリー3にマウントします.Update:モデル変数が更新4.Destory:コンポーネントを破棄するには
ライフサイクルフック関数:ライフサイクルフェーズごとに放出されるイベント処理関数は、ライフサイクルフェーズでタスクを実行する場合に、そのフェーズに対応するコンストラクション関数に書きます.含む:beforeCreate:コンポーネントインスタンスを作成する前にcreatedをトリガーする:コンポーネントインスタンスを作成した後、コンポーネントをDOMツリーにマウントする前にnew Vue($data:モデルデータ$el:undefined)をトリガーしてajax要求を送信して一時的にDOM操作を実行できません!beforeMount:コンポーネントをDOMツリーにマウントする前にmountedをトリガする:コンポーネントをDOMツリーにマウントした後にnew Vue($data:モデルデータ$el:仮想DOMツリー)をトリガするajaxリクエストを送信してDOM操作を実行することもできます!
beforeUpdate:モデルデータが更新される前にupdatedがトリガーされる:モデルデータが更新された後にbeforeDestroyがトリガーされる:コンポーネントオブジェクトを破棄する前にdestroyedがトリガーされる:コンポーネントを破棄した後にトリガーされる
注意createdフェーズは、ページの再ロード時にのみ再実行されるため、createdフェーズでaxiosリクエストを送信した後、vueコンポーネントのジャンプのたびにaxiosリクエストを送信できるようにwatchリスニング関数を追加する必要があります.
3コンポーネント化開発
コンポーネント:独自のHTML、CSS、JSとデータを持つページ独立領域コンポーネント化開発:ページを入手した後、まず領域を区分し、各領域はHTML、CSS、データを持つ独立コンポーネント分類である:

本のコンポーネント:new Vue({el:"#app",data:{}})は通常1ページで、1本のルートコンポーネント

しかありません.

グローバルコンポーネント、任意の場所で自由に使用できるコンポーネントVue.component(「コンポーネント名」,{template:「#tplxxx」,data:function(){return{}}})

ローカルコンポーネント(サブコンポーネントとも呼ばれ、特定の親コンポーネント内のコンポーネント1のみに使用可能)サブコンポーネントとしてのグローバルコンポーネントを通常のオブジェクトに降格させ、コンポーネントオブジェクト名を将来のコンポーネントラベル名からアルパカ名に変更する2)親コンポーネントにcomponentsプロパティを追加します:{サブコンポーネントオブジェクト、...}サブコンポーネント定義位置は親コンポーネントの前にある必要があります.Vueはアルパカの名前のサブコンポーネントを-名前の小文字署名に変換します.

4コンポーネント間パラメータ

親->子:親コンポーネントのモデル変数です.子コンポーネントは直接使用できません.解決:[属性の下り]1)子コンポーネント

  var    ={
    template:"xxx",
    props:["  ", ... ] //           
	 //  :           
     //  :    data:{    }
  }
  

2)親コンポーネント

子->親:イベント上り問題:子コンポーネントは親コンポーネントのモデル変数の内容を直接削除する権限がありません解決:イベント上り1)親コンポーネント:子コンポーネントにカスタムイベントと処理関数を事前に定義する:

)子コンポーネント

        ={
            …
       methods:{
                (){
                 This.$emit(“     ”,     )
   		}
        }
   }

イベント上り下りの例

var todoAdd={
  template:"#tplTodoAdd",
  data:function(){
    return { new_task:"" }
  },
  methods:{
    add(){
      this.$emit("add",this.new_task);
      this.new_task="";
    }
  }
}




var todoItem={
  template:"#tplTodoItem",
  props:["task","i"]//  :        
  //  : data:{ task:xx, i:x }
}




var todoList={
  template:"#tplTodoList",
  props:["tasks"],//  :         
  //  :    data:{tasks}
  components:{ todoItem }
}




Vue.component("todo",{
  template:"#tplTodo",
  data:function(){
    return {//data
      tasks:["  ","  ","   "]
    }
  },
  components:{
    todoAdd,//Vue    todo-add
    todoList//Vue    todo-list
  },
  methods:{
    do_add(new_task){
      this.tasks.push(new_task);
    }
  }
})



  


new Vue({
  el:"#app",
  data:{}
})