ビューとは何ですか

vue は Vue.js の略称です。これは、ユーザー インターフェイスを作成するためのオープン ソースの JavaScript フレームワークであり、シングル ページ アプリケーションを作成するための Web アプリケーション フレームワークです。vue の焦点の中心は、MVC のビュー層です。同時に、データ更新を簡単に取得し、コンポーネント内の特定のメソッドを通じてビューとモデル間の対話を実現することもできます。

このチュートリアルの動作環境: Windows7 システム、vue バージョン 2.0、DELL G3 コンピューター。

[関連記事の推奨: vue.js]

Vue.js (/vjuː/、または単に Vue) は、ユーザー インターフェイスを作成するためのツールです。オープンソースの JavaScript フレームワークであり、シングルページ アプリケーションを作成するための Web アプリケーション フレームワークでもあります。

Vue.js は、Web 開発をより適切に整理し、簡素化するために設計された人気のある JavaScript フロントエンド フレームワークです。 Vue の中心となるのは MVC パターンのビュー層ですが、同時にデータ更新を簡単に取得し、コンポーネント内の特定のメソッドを通じてビューとモデル間の対話を実現することもできます。

機能

コンポーネント

コンポーネントは、Vue の最も強力な機能の 1 つです。大規模なアプリケーションをより適切に管理するには、多くの場合、アプリケーションを小さく、独立した、再利用可能なコンポーネントに分割する必要があります。 Vue では、コンポーネントは基本的な HTML 要素の拡張であり、そのデータと動作は簡単にカスタマイズできます。以下のコードは、マウスのクリックをカウントするボタンとしてレンダリングされる Vue コンポーネントの例です。

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: &#39;<button v-on:click="count++">You clicked me {{ count }} times.</button>&#39;
})

Template

Vue は HTML ベースのテンプレート構文を使用して、開発者が DOM 要素を基になる Vue インスタンスのデータにバインドできるようにします。すべての Vue テンプレートは正当な HTML であるため、仕様に準拠するブラウザおよび HTML パーサーで解析できます。基礎となる実装では、Vue はテンプレートを仮想 DOM レンダリング関数にコンパイルします。応答性の高いシステムと組み合わせると、アプリケーションの状態が変化したときに、Vue はコンポーネントの再レンダリングの最小コストをインテリジェントに計算し、それを DOM 操作に適用できます。 [12]

さらに、Vue を使用すると、開発者はコンポーネントのレンダリング関数として JSX 言語を直接使用して、テンプレート構文を置き換えることができます。 [13] 以下は、クリック数をカウントできるボタンの JSX レンダリング バージョンです (対応する Babel プロセッサを構成する必要があります):

Vue.component('buttonclicked', {
  props: ["initial_count"],
  data: function() {var q = {"count": 0}; return q;} ,
  render: function (h) {
    return (<button vOn:click={this.onclick}>Clicked {this.count} times</button>)
  },
  methods: {
    "onclick": function() {
      this.count = this.count + 1;
    }
  },
  mounted: function() {
    this.count = this.initial_count;
  }
});

レスポンシブ デザイン

レスポンシブとは、MVC モデルのビューがモデルの変更に応じて変更されることを意味します。 Vue では、開発者はビューを対応するモデルにバインドするだけでよく、Vue は自動的にモデルの変更を監視し、ビューを再描画できます。この機能により、Vue の状態管理が非常にシンプルかつ直感的になります。

トランジション効果

Vue には、DOM の挿入、更新、または削除時にトランジション効果を適用するさまざまな方法が用意されています。次のツールが含まれています:

• CSS トランジションとアニメーションにクラスを自動的に適用します

• サードパーティの CSS アニメーション ライブラリと併用できます。 Animate.css

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

• サードパーティの JavaScript アニメーション ライブラリを使用できます。 Velocity.js など

単一ファイル コンポーネント

複雑なプロジェクトにうまく適応するために、Vue は .vue 拡張子を持つファイルをサポートしています。 Vue.component を使用してコンポーネントを登録する代わりに、完全なコンポーネントを定義します。開発者は、Webpack や Browserify などのビルド ツールを使用して、単一ファイル コンポーネントをパッケージ化できます。

コアプラグイン

vue-router
vuex
vue-loader
vueify 
vue-cli

以上がビューとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。