この授業は簡単に文法と概念を見たいです.文法の主な概念を見てみましょう.😎

Vue Instance

例はVueです.jsで画面を開発するために必要な単位.

Vee Instance作成者

コンストラクション関数を使用してインスタンスを作成する方法.

new Vue({
  // instance option properties
});

Vueオブジェクトを作成する場合は、data、template、el、method、lifecycle hookなどのオプションプロパティを含めることができます.

new Vue({
  // instance option properties
  template: "",
  el: "",
  methods: {}
  // ...
});

VUE Instanceライフサイクルの初期化

インスタンス(オブジェクト)の作成時に実行される初期化操作

データ観察

コンパイル

テンプレート

オブジェクトを

DOM

に接続する

データ変更時にDOM

を更新
これにより,初期化操作に加えて,開発者が意図したカスタムロジックを記述することができる.

new Vue({
  data: {
    a: 1
  },
  created: function() {
    // this 는 vm 을 가리킴
    console.log("a is: " + this.a);
  }
});

vmはViewModelの略です.

Vue Components

画面の領域を一定の単位で区切って、リサイクル可能な形で管理するのがその構成部分です.

構成部品の登録

<div id="app">
  <my-component></my-component>
</div>

new Vue({
  el: "#app",
  // 컴포넌트 등록 코드
  components: {
    // '컴포넌트 이름': 컴포넌트 내용
    "my-component": {
      template: "<div>A custom component!</div>"
    }
  }
});

Global Component

これはグローバル構成部品登録方式です.

Vue.component('my-component', {
  // 컴포넌트 내용
  template: '',
  ...
})

Local Component

ゾーン構成部品登録方式.

var cmp = {
  // 컴포넌트 내용
  template: '',
  ...
}

new Vue({
  components: {
    'my-cmp' : cmp
  }
})

親子コンポーネント関係

上から下へデータを提供する(props)
フリーフォールとは、親構成部品から子構成部品に降下するデータ属性です.
各構成部品には独自のスキャンがあるため、他の構成部品の値を直接参照することはできないため、propsを使用してこれを克服します.
注意:
props変数名をcamelメソッドとして定義する場合は、htmlタグで使用する場合はcacheメソッド(-)として宣言します.
同じレベルの構成部品間の通信は次のとおりです.
同じサブエレメントを持つサブエレメント間の通信.
(子)->(親)->(その他の子)
👏Vueの基本構造は,他のコンポーネント間の直接通信を許さない.

の下にイベント

が送信される

Event Bus

上下関係のない素子間で通信するためにEvent Busを用いる.

// 화면 개발을 위한 인스턴스와 다른 별도의 인스턴스를 생성하여 활용
var eventBus = new Vue();

new Vue({
  // ...
});

イベントを起動する構成部品を$emit()と呼び出します.

eventBus.$emit("refresh", 10);

$on()イベントは、イベントを受信する要素から受信される.

// 이벤트 버스 이벤트는 일반적으로 라이프 사이클 함수에서 수신
new Vue({
  created: function() {
    eventBus.$on("refresh", function(data) {
      console.log(data); // 10
    });
  }
});

Vue Routers

ビューを使用して単一ページアプリケーションを作成するときに便利なルーティングライブラリ
ルーティング:パスを決定し、パスに渡す一連のプロセス.
ルータ:複数のパスの中で最適なパスを決定することによってルーティング機能を実行する
ルーティング:パス[ろーど:ぱす]

ソース

https://kr.vuejs.org/v2/guide/index.html
https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/