[Vue.js] 3. インスタンス&構成部品

31339 ワード
vue.js テキストリンク
03画面の開発に必要な基本単位-インスタンスと構成部品
03-1ビューインスタンス
(1)ビューインスタンスの定義と属性
ビューインスタンス(instance)は、スクリーン開発においてブロックなどの任意の「単位」と見なすことができる.
ビューインスタンスのフォーマットは次のとおりです.
new Vue({
	...
});
これは、前回の実習でルート(最上位)コンポーネントのデータ属性を議論したときに見たテンプレートです.
それは実例です
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Sample</title>
</head>
<body>
  <div id="app">  <!-- view 인스턴스가 그려질 지점 -->
    {{ message }} <!-- 데이터 속성에서 정의된 message 값이 연결됨 -->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 인스턴스 start
    new Vue({
      el: '#app',                 //el속성      : view 인스턴스가 그려질 지점 지정
      data : {                    //데이터 속성  : message 값 정의 했음
        message : 'Hello Vue.js!'
      }
    });
    // 인스턴스 end
  </script>
</body>
</html>
ここで、new Vue()でインスタンスを作成する場合、Vueをジェネレータと呼びます.vueライブラリをロードすると、ライブラリにアクセスできます.(ロードされていない場合は)
ジェネレータを使用する理由は、ジェネレータで実装された機能を再使用するためです.
(2)ビューインスタンスオプション属性
その他に、以下の定義済みのプロパティを使用することもできます.
new Vue({
      el: '#app',                 //el속성      : view 인스턴스가 그려질 지점 지정
      data : {                    //데이터 속성  : message 값 정의 했음
        message : 'Hello Vue.js!'
      },
      template: ,                 // 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성
      methods : ,                 // 화면 로직제어 관련 속성
      created :                   // 뷰 인스턴스 생성되자마자 실행할 로직을 정의할 수 있는 속성
    });
(3)ビューインスタンスの有効範囲
Vueインスタンスが上記の例の範囲を超えている場合、どうなりますか?
<div id="app">  <!-- view 인스턴스가 그려질 지점 -->

</div>
{{ message }}
このように実行すると、メッセージ属性値はインスタンスの有効範囲内ではないため、メッセージ属性値はHelloVueになります.js!には変更されず、そのまま出力されます.
(4)ビューインスタンスのライフサイクル
作成前
  • :インスタンス作成後に最初に実行されたライフサイクルフェーズ
    • 作成
  • :データ、メソッド属性で定義された値にアクセスできるため、サーバにデータを要求して受信するロジック(ex.HTTP通信)
    • に適している.
  • beforeMount:el属性で指定するdomにインスタンスをアタッチする前に呼び出すステップ
    • .
  • マウント:elプロパティで指定するdomにインスタンスをアタッチして呼び出すには、テンプレートプロパティで定義されたドームにアクセスして、制御画面要素の論理
    • を実行します.
  • 事前更新:
    • 、インスタンス定義のプロパティが画面に変換され、所定の変更データにアクセスし、それに関連する論理を予め入れることができる
  • updated:データ変更後に仮想domを使用して画面を再描画した後に実行するステップは、データ変更後に画面要素制御に関連する論理を追加する良いステップです.この論理では、データ値を変更すると無限ループに陥る可能性があるため、値を変更するにはcomputed、watchなどのプロパティを使用する必要があります.したがって、更新データ値の論理は更新前に追加することが望ましく、更新後にデータを変更する画面要素(dom)に関連する論理を追加することが望ましい.
  • 前期設計:ビューインスタンスが破壊される前のステップ;
    • はビューインスタンスデータを削除する最良のステップである
    破壊
  • :ビューインスタンスを破壊した後に呼び出すステップで、定義されたすべての属性とサブインスタンスが
    • 破壊されます.
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Instance Lifecycle</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data : {
        message: 'Hello Vue.js!'
      },
      beforeCreate : function() {
        console.log("beforeCreate");
      },
      created : function() {
        console.log("created");
      },
      mounted : function() {
        console.log("mounted");
      },
      updated : function() {
        console.log("updated");
      }
    });
  </script>
</body>
</html>
    コンソールを使用して上記のコードを検証すると、beforeCreate>create>installedが出力されます.マウントフェーズでデータを変更するとしたら?
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Instance Lifecycle</title>
</head>
<body>
<div id="app">
  {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data : {
      message: 'Hello Vue.js!'
    },
    beforeCreate : function() {
      console.log("beforeCreate");
    },
    created : function() {
      console.log("created");
    },
    mounted : function() {
      console.log("mounted");
      this.message = 'Hello Vue!'; //message 값 변경
    },
    updated : function() {
      console.log("updated");
    }
  });
</script>
</body>
</html>
    さっき見えなかった更新ログが出力されます.
    03-2ビュー構成部品
    (1)素子とは?
    「構成部品」(Component)とは、スクリーンを構成するブロックを組み合わせてもよい.
    (2)登録部品
    グローバル構成部品の登録
    Vue.component('컴포넌트 이름', { 
	//컴포넌트 내용
});
  • コンポーネント名:テンプレート属性用HTMLカスタムタグ名
  • コンポーネント内容:HTML要素に変換したときに表示される属性で、テンプレート、データ、メソッドなどのインスタンスオプション属性を定義できます
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Component Registration</title>
</head>
<body>
  <div id="app">
    <button>컴포넌트 등록</button>
    <my-component></my-component> <!--전역 컴포넌트 표시-->
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('my-component', {
      template : '<div>전역 컴포넌트가 등록 되었습니다!</div>'
    });

    new Vue({
      el : '#app'
    });
  </script>

</body>
</html>
    ゾーン構成部品の登録
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Component Registration</title>
</head>
<body>
<div id="app">
  <button>컴포넌트 등록</button>
  <my-local-component></my-local-component> <!--지역 컴포넌트 표시-->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var cmp = {
    //컴포넌트 내용
    template : '<div>지역 컴포넌트가 등록되었습니다!</div>'
  };

  new Vue({
    el : '#app',
    components: {
      'my-local-component': cmp
    }
  });
</script>

</body>
</html>
    ゾーンとグローバル構成部品の違い
    03-3ビュー素子通信
    • あなたのプロジェクトの誰もがコミットメントとcommitizenを使用して美しいコミットメッセージを書くこと🚀
    微信ブラウザ内h 5直接起動appの微信開放ラベルwx-open-launch-app