Vue.js学習#1

18252 ワード
vue.js テキストリンク
前の記事では、単純なツールリストのようなAPIアプリケーションを作成するだけでは、実際の画面設計がないため、APIをどのように開発すべきか分からないと述べています.また、今回はOAuth機能も適用されていますが、リダイレクトのため、フロントエンドページが切実に必要だと思います.
したがって,フロントエンドの3大フレーム(反応,ロケータ,ビュー)においてVueとなる.jsを勉強して、私が作成したAPIを表示できる画面を自分で作ることにしました.どうしてもVuejsを選んだ理由は、初めて接触した(正確には耳に染まった)フレームサイズなので特にありません.
学習方向はnewline社が提供した30 Days of Vueという電子書籍とVue.jsガイドを参照する.

学習内容


Vue.jsとは何ですか。


オープンソースフロントエンドJavaScriptフレームワーク.Approachable、多機能、高性能の3つのメリット.
  • Approachable:HTML、CSS、JSを知るだけでいつでもアクセスできます.
  • 汎用性:フレームワークの一部としてvue-cli、vue-routerなどに関連する複数のコンポーネントを提供します.
  • performant:仮想DOMを使用して再レンダリング時間を短縮し、vue自体も最適化されています.
    • 主にユーザインタフェース(UI)のプログレッシブフレームワークを作成するため、最初はレイヤーに重点を置いて開発し、必要であれば追加のモジュールを追加できることを強調した.

    初期設定


    CDNからスクリプトをインポートまたはローカルから参照すると、Vueクラスのオブジェクトを作成できます.このオブジェクトを作成すると、elを超える値がelement、すなわちVueになります.jsアプリケーションは、接続する(マウントポイント)HTML要素を指定します.
    new Vue({
 el: '#app',
})
    すなわち、上述したように、elに#appである「app」IDのHTML要素を設定し、<body>の内部に「app」という名前の<div>を作成することにより使用することができる.
    <html>
  <body>
    <div id="app">
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>
    したがって、vueのインスタンスでは、これらの要素の内部の要素を管理できます.Vue.jsを勉強しているときに初めて遭遇したミスは「app」の外でviewを使いたいということなので、これからは注意しましょう.

    宣言レンダリング


    VUEがMustacheの文法を使っているのが印象的でした.Springプロジェクトでは、{{ data }}のようなMustace構文もこのVueのDOMで使用できるThymeleafやMustaceのようなSSRテンプレートエンジンについて理解しました.
    <div id="app">
  {{ data }}
</div>
    div#appには、出力dataのテンプレートが登録されています.ただし、これは、単純にサーバ側でレンダリングされる文字列を塗りつぶすテンプレートレンダリングとは異なります.

    Vueインスタンス

    Vueオブジェクトを作成すると、Vueインスタンスが生成されます.このインスタンスは、インスタンスで使用するデータまたはメソッドを管理することを最大の特徴とするフロントエンドアプリケーションのエントリポイントになります.
    new Vue({
  el: "#app",
  data: {
    greeting: "Cruel World!",
    name: "James",
    age: 26,
  },
  methods: {
    clickChangeButton: function () {
      this.greeting = "Hello World!";
    },
  },
});
    以上のように、Vueオブジェクトの作成者のデータ項目に対して、greeting、name、age、greetingなどのデータを設定することができ、これらのデータはアクティブにアクセスすることができる.これは、データが変更されると、以下に示すように、参照データのHTML要素自体が更新されることを意味する.
      <div id="app">
    <h2>{{ greeting }}</h2>
    <p>by {{ name }} ages at {{ age }}</p>
  </div>
    上記のコードはVueインスタンスの作成者「Creal World!」に基づいて、「byJamesagesat 26」文字列がレンダリングされます.ただし、その後、Vueインスタンスのnameまたはage、greetingデータを変更すると、文字列も自動的に変更されます.
    Vueインスタンスは、初期データを作成するアクセス者(getter/setter)をサポートし、これらのデータを反作用システムで処理します.これらのセクションには、クライアントの介入は必要ありません.
    本来はnameのようにアクセスすべきであるが、エージェント技術はthis.$data.greetingのように簡単にアクセスできる.this.greetingという名前のプロジェクトにアクセスすると、greetingと同じ方法でエージェントオブジェクトが検索されますか?これももう少し知る必要があります.
    さらに、「$」文字アクセスフィールド(i.e.getGreeting、vueInstance.$data)または呼び出しメソッド(i.e.vueInstance.$el)を使用して、Vueインスタンスのプロパティに直接アクセスすることもできます.後で関連APIドキュメントを読んで、適用可能な機能があるかどうかを確認します.

    インスタンスのライフサイクル


    VueインスタンスもSpringのbeanオブジェクトのようにライフサイクルを持ち、そのサイクルに干渉できるフックを提供します.

    上記のライフサイクルの対応する部分にインスタンスを作成する場合は、関数を代入するだけです.
    new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 는 vm 인스턴스를 가리킵니다.
    console.log('a is: ' + this.a)
  }
}) // "a is: 1"
    インスタンスを作成、破壊するだけでなく、反応型システムの動作時に干渉することもできるので、後で使用する部分があります.

    指示文


    イベントハンドラをHTML Elementに登録したり、特定の属性をデータにバインドしたりするために、vueInstance.$watch('el', function(newVal, oldVal) { ... })、v-on:clickなどのインジケータ(コマンド)を設定できます.
    <button v-on:click="clickChangeButton">Button to change</button>
<span v-bind:title="message">Bound to message!</span>
    例えば、v-bind:titleシリーズ登録イベントハンドラ、v-onはv-bind:title属性をtitleデータの最新値に接続する.したがって、ボタンをクリックするとmessageメソッドが呼び出され、clickChangeButtonが変更されるとmessageプロパティも変更されます.
    これに加えて、ブランチ用のtitle、重複用のv-if、双方向接続(入力フォームなど)用のv-forなど、「v-」で始まる様々な指示語が提供される.特に複文では,複文が参照する資料構造にデータを追加すると,追加したデータも対応する処理を行う.

    構成部品の再使用


    Vueの構成部品(component)は、あらかじめ定義された属性の再利用可能なVueインスタンスである.v-modelクラスの静的Vueメソッドとして登録できます.
    Vue.component("todo-item", {
  props: ["item"],
  template: "<div><span>ITEM: {{ item.text }}</span></div>",
});
    属性は、コンポーネントが描画するHTMLテンプレート(component)を指定するか、外部コンポーネントが受信するデータ(template)を指定します.このデータは、この構成部品の作成時に上記で使用したpropsコマンドを使用して、v-bindというフィールドに送信できます.
    <div id="todolist">
  <todo-item v-for="item in items" v-bind:item="item" v-bind:key="item.id"></todo-item>
</div>
    これにより、テンプレートは、このitemデータのitemフィールドを参照してレンダリングすることができる.クラスジェネレータにパラメータを渡すようにします.
    コンポーネントの利点は、アプリケーションを巨大なHTMLソースコードに組み合わせるのではなく、アプリケーションを機能別に分離できることです.上記の例に示すように、保留中のリストを出力するtextを個別に実装するか、カレンダー、サイドバーなどの追加の構成部品を実装することで適用できます.
    構成部品はインスタンスであり、各構成部品に個別の状態があることを意味します.たとえば、内部カウントカウンタ機能がある場合、複数の構成部品を配置すると、互いに一意のカウンタが使用されます.

    Data Driven Architecture


    データの変更は動的であるため、ビューアプリケーションをデータドライバアーキテクチャと見なすことができます.つまり、データの変更によって実際の画面が変化します.
    ビューを使用して直接実装しない場合は、どうすればいいですか?たとえば、ボタンを押したときに<div>文字列を変更したり、greetingを追加したりする機能を実現するには、次のようにageオブジェクトのdocumentまたは他のナビゲーション方法を使用してHTML要素自体を取得する必要があります.
    let greetingTag = document.getElementsByTagName("h2")[0];
changeGreeting = () => {
  if (greetingTag.textContent === 'Hello World!') {
    greetingTag.textContent = 'What is up!';
  } else {
    greetingTag.textContent = 'Hello World!';
  }
}
    また、データが変更された場合、複数の要素に同時に反映する場合は、各イベントハンドラを同時に呼び出す必要があり、要素を動的に追加または削除する場合は、これらの要素を個別に記憶する必要があり、多くのトラブルが発生します.
    これは主にDOMが基本的に単一信頼源(single source of truth)として使用されるためである.ただし、Vueインスタンスを使用すると、このインスタンスのデータを管理できるため、DOMツリーをこのように巡回する必要はありません.
    逆に、インスタンスの作成時にデータを作成し、必要な場所に注入するため、使用するインスタンスのデータはインスタンスの作成時にすべて渡さなければなりません.インスタンスの作成後に追加または削除することはできません.したがって、空の値でも初期値を指定して登録したり、Vue 3.0で作成後に追加または削除したりすることができます.

    ポスト


    諸説あるように整理されていますが、今日は勉強を遅らせ始めた初日なので意味があります.
    Dockerのインストールと基本操作
    白駿2468号安全区域(JAVA)