Vue.js


目的


バックエンド開発者であっても、フロントエンドで最も流行している技術の最低駆動原理を知ることで、チームプロジェクトのViewを自然に熟知することができます.

Vue.jsとは何ですか。


ウェブページ画面を開発するために発行されるJavaScriptベースのフロントエンドフレームワーク.vue.jsの利点は,他のフロントエンドフレームワークよりも学習しやすいことである.
ReactとAngularの2つのフレームワークの利点を頭から引き出し、より速く、より楽なフレームワークを創造します.

vue.jsは上図に示す構造を有する.コアライブラリは、スクリーン側のデータ表示機能を重点的にサポートしていますが、フレームワーク機能(ルータ、ステータス管理、テストなど)を組み合わせやすい形式も提供しています.
すなわち,単純ライブラリの機能に加えてフレームワークの役割を果たす.
Vue.メリット
ビューのような場合、アンカーのデータバインド特性と反応器の仮想ドームベースのレンダリング特性があります.
学びやすい.
性能は反応器と位置決め器より優れている.
反応の利点と不規則な利点がある.

Vue.jsの必要性?


Vue.html、css、javascriptを使用してWebページを作成できますが、jsを使用する必要はありません.jsを使用すると、ユーザと対話する動的UIを容易に作成できるため、広く使用されている.
それだけでなく、反応器や位置決め器よりも性能が優れていると言われるほど速い.
反応の利点と不規則な利点がある.

Vue.js特性


MVVCモード
「ビュー」(Vue.js)は、UI画面の開発方法の1つであるMVVMモードのビューモデルに対応するスクリーンライブラリです.

図に示すように、MVVMモードとは、画面をモデル(Model)-ビュー(View)-ビューモデル(View Model)として開発することを意味する.
このように開発されたのは、制御画面要素のコードとデータ制御ロジックを分離することで、コードをより直感的に理解し、後続のメンテナンスを容易にすることができるからである.

2.コンポーネントベースの構成


ビューのもう一つの大きな特徴は、コンポーネントベースのフレームワークです.

上の図に示すように、素子は組合せレゴ積み木に似ている.
すなわち,スクリーンを左図に,右図に示す素子ツリー構造とし,これらの素子ベースフレームワークを用いることで,コードの再利用性を向上させ,直感的なスクリーン構造とすることができる.
フィードバックとロケータの利点を備えたフレームワーク
Vueはアンカーの双方向データバインディングとリトラクトの一方向データストリームの利点を組み合わせたフレームワークである.双方向データバインディングは、画面に表示される値がフレーム内のモデルデータ値と同期し、一方が変更されると他方も自動的に変更されます.一方向データストリームは、素子の一方向通信を意味する.
すなわち、フレームワークは、コンポーネント間のデータを転送する際に構造化され、常に親コンポーネントからサブコンポーネントに一方向にデータを転送する.
このほか、VUEはREACTの仮想ドームレンダリング方式を採用してスクリーンを迅速にレンダリングし、ユーザーのインタラクションが大きい現在のネットワークスクリーンに適切な動作構造を提供している.
仮想ドームを使用すると、一部のドーム要素を追加または削除して変更した場合、画面全体を再描画するのではなく、フレームワークで定義された方法で画面を更新します.
したがって、ブラウザの観点からパフォーマンス負荷が減少するため、通常のレンダリングよりも高速に描画できます.
Vueのインスタンスの定義と属性
ビューは、画面を開発するために必要な基本単位です.
すなわち,ビューで画面を開発するためには,必ず少なくない条件が必要である.
<html>
  <head>
    <title>Vue Sample</title>
  </head>
  <body>
      <div id="app">
        {{message}}
      </div>
      
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
      <script>
        new Vue({
          el:'#app',
          data:{
            message: 'Hello Vue.js !'
          }
        });
      </script>
  </body>
</html>
HTML画面の「HelloVue.js !' 名前のテキストを出力するコード
まず、new Vue()を使用してビューインスタンスを作成し、Vueインスタンスを以前に使用可能にします.jsライブラリをダウンロードするコードがあります.
次に、インスタンスでelプロパティを使用してビューインスタンスの範囲を設定し、dataプロパティでメッセージ値を定義し、画面の{message}}で「HelloVue」とします.js !'出力させる.
よく見ると、elの範囲は特定のdivのid値と一致していることがわかります.(cssセレクタ)
すなわち、このビューインスタンスは、appという特定のHTMLタグ範囲を有するインスタンスである.
リファレンス(リファレンス)
  • https://coding-start.tistory.com/214?category=811388