Vue.jsの主な特性

携帯電話とモバイルインターネット市場がますます成熟するにつれて、モバイルApp分野もどのように開発され、どのようにより効率的で、よりコストの低い開発段階に発展した.従来のオリジナルプラットフォーム(PC、IOS、Android)の開発技術は成熟しているが、その開発効率とコストの制限のため、モバイルインターネットAppの開発ニーズを満たすことができない.プラットフォームにまたがる技術が世に出て、大量のJavaScriptフレームワークとツールが急速に流行し、Vue.jsはその中のトップに躍進し、ユーザーインタフェースを構築する絶好の実践技術の一つとなっている.Vue.jsはユーザインタフェースを構築する漸進的なフレームワークである.他の重量級フレームとは異なりVue.jsのコアライブラリはビューレイヤのみに注目し,ボトムアップ増分開発の設計を採用し,学習しやすい.Vue.jsは単一ファイルコンポーネントとVueを採用することを完全に駆動する能力がある.jsエコシステムがサポートするライブラリは、複雑な単一ページアプリケーションを開発し、それ自体も他のライブラリや既存のプロジェクトと統合しやすい.Vue.jsの5つの特徴:
一、コンポーネント
コンポーネントはVueである.jsの最も強力な特性の一つです.大規模なアプリケーションをよりよく管理するためには、アプリケーションを小さく独立した多重化されたコンポーネントに切断する必要があることが多い.Vueでjsでは,コンポーネントはベースHTML要素の拡張であり,そのデータと動作を容易にカスタマイズできる.

 


//   
Vue.component('my-component', {
  template: '<div>Hello Vue!</div>'
})
//      
new Vue({
  el: '#app'
})

二、テンプレート
Vue.jsはHTMLに基づくテンプレート構文を用いて、開発者がDOM要素と下位Vueを使用することを可能にする.jsインスタンスのデータはバインドされます.すべてVuejsのテンプレートはすべて合法的なHTMLなので、規範に従うブラウザやhtml解析器で解析することができます.最下位の実装ではVue.jsはテンプレートを仮想DOMレンダリング関数にコンパイルする.応答式システムと組み合わせて、適用状態が変化する場合、Vue.jsは、再レンダリングコンポーネントの最小コストをスマートに計算し、DOM操作に適用することができる.オリジナルのJavaScriptに詳しい場合は、テンプレートを使わずにレンダー関数を直接記述し、オプションのJSX構文を使用すればよい.
三、応答式設計
応答型ネットワーク設計(RWD/AWD)の登場は、モバイル機器により良い体験を提供し、デスクトップから携帯電話までの様々な画面サイズと解像度を統合し、技術でページを小さいから大きい(甚だしきに至っては超大きい)異なる解像度の画面に適応させることを目的としている.応答インタフェースの4つの階層:

同じページは、異なるサイズと割合で快適に見えるはずです.

同じページは異なる解像度で合理的に見えるはずです.

同じページは異なる操作方式の下で、体験は統一されるべきである.

同じページは、異なるタイプのデバイス(携帯電話、タブレット、コンピュータ)では、インタラクティブな方法がユーザーの習慣に合っているはずです.先端効果の表示に集中するVueとして機能する.jsは、それ自体が提供するほとんどのコントロールとコンテンツが応答式に基づいた設計である.それだけでなく、多くの開発者が使いやすいように、Vue.jsは、美しく簡潔なUIコンポーネントライブラリを多く生み出し、このようなUIコンポーネントライブラリは応答設計を完全にサポートしています.だから、合格したVueとして.jsプログラム開発者は,アプリケーション開発に際して,UIの応答設計を考慮し,ユーザが異なるサイズと解像度のスクリーンおよびデバイス上で一貫した優れた体験を得ることができるようにしなければならない.

四、移行効果
Vue.jsはDOMを挿入、更新、または削除する際に、以下のツールで様々な方法で移行効果を適用します.

css遷移とアニメーションにclassを自動的に適用する.

は、Animateなどのサードパーティcssアニメーションライブラリを併用することができる.css;

遷移フック関数でJavaScriptを使用してDOMを直接操作する.

は、VelocityのようなサードパーティJavaScriptアニメーションライブラリを使用することができる.js. Vue.jsはtransitionのパッケージコンポーネントを提供し、以下の場合、任意の要素とコンポーネントにentering/leaving遷移を追加できます.

条件レンダリング(v-ifを使用)

条件表示(v-show使用)

ダイナミックコンポーネント;

コンポーネントルートノード.簡単に言えば、ユーザが操作したり、ページ要素とインタラクティブになったりしたときに、良好で適切なユーザ体験効果を提供することができる.下の例でclickボタンをクリックすると、hello vueはグラデーション的に消えますが、実際にはスタイルの変更のため、再びクリックすると、スタイルのfadeは追加または削除に伴ってグラデーション効果を生み出し、すべてのユーザー操作またはコンテンツの表示が突然現れたり消えたりしないようにします.

  
    click
  
  
    
hello Vue
  


//      
new Vue({
  el: '#app',
  data: {
    show: true
  }
})

五、単一ファイルコンポーネント
複雑なプロジェクトに適応するために、Vue.jsは.vueは、Vueの代わりに拡張子のフォルダに完全なコンポーネントを定義する.コンポーネント登録コンポーネントの方式.開発者は、WebpackやBrowserifyなどの構築ツールを使用して、単一ファイルコンポーネントをパッケージ化することができます.この特性がもたらす利点は主に将来のオンライン参照であり、圧縮ツールと基本的なパッケージツールを使用した後、1つのファイルしかない可能性があります.これにより、ネットワーク要求の複数のファイルに対するファイルキャッシュや遅延の問題が大幅に減少します.