1。Vue.jsの紹介
1. VUEの主な機能： （1）簡潔（2）軽量（3）高速（4）データドライバー（5）モジュールフレンドリー（6）コンポーネント化
（1）簡潔
これが双方向のバインディングを実装するためのAngularのコードです
// html <body ng-app = "myapp"> <div ng-controller = "myctrl"> <p> {{note}}} </p> <入力タイプ= "text" ng-model = "note"> </div> </body> // jsvar mymodule = angmodule（myapp '' '' []）; mymodule.controller（ 'myctrl'、['$ scopp'、function（$ scope）{$ scope.note = '';]）;次に、Vueのコードを見てください。
// html <body> <div id = "app"> <p> {{note}} </p> <入力タイプ= "v-model =" note "> </div> </body> // jsvar vm = new vue（{el： '＃app'、data：{note： '}}}}}）それに比べて、私は個人的に、Vueのコードライティングスタイルはより簡潔で理解しやすいと思います。
（2）優雅さがないわけではありません
Vueは比較的軽量なフレームワークですが、シンプルで軽量で非常にユーザーフレンドリーです。それが提供するAPIも非常に理解しやすく、いくつかの非常に便利な指示と属性も提供します。
例えば：
1）クリックイベントをバインドします
<a v-on：click = "dosomething"> </a>
それは次のように省略することができます
<a @click = "dosomething"> </a>
2）動的属性をバインドします
<v-bind：href = "url"> </a>
それは次のように省略することができます
<a：href = "url"> </a>
3）便利な修飾子
<！ - クリックイベントが泡立つのを防ぐ - > <a @click.stop = "dosomething"> </a> <！ - Enterキーが押された場合にのみイベントがトリガーされます - > <input @keyup.enter = "submit">
4）実用的なパラメーター特性
<！ - debounceの最小遅延設定 - > <入力v-model = "note" debounce = "500"> <！ - 「入力」の代わりに「変更」のデータを更新します - > <入力v-model = "msg" lazy>
それはどうですか、それはとてもエレガントに感じますか？
（3）小さなヒント
小ささといえば、最初にVUEのソースコードサイズに注意する必要があります。 Vueの生産バージョンのソースコード（つまり、最小バージョン）はわずか72.9kbです。公式ウェブサイトでは、GZIPは圧縮後わずか25.11kbであり、Angularの144kbよりも半分小さくなっています。
コンパクトさの利点の1つは、ユーザーが対応するソリューションをより自由に選択できることを可能にし、他のライブラリと一致するという点でユーザーがより多くのスペースを提供できることです。
たとえば、VUEのコアにはデフォルトではルーティングとAjax関数は含まれていませんが、プロジェクトにルーティングとAJAXが必要な場合は、Vueが提供する公式ライブラリVUEルーターとサードパーティのプラグインVUEリソースを直接使用できます。同時に、JQueryのAjaxなど、使用する他のライブラリまたはプラグインを使用することもできます。
それは非常に柔軟だと感じませんか？
（4）多くの素晴らしいマスターがいます
Vueは小さいですが、「スズメは小さく、すべての内臓があります」であり、大規模なアプリケーションを簡単に構築することもできます。
1）モジュラー
CommonJS、RequireJS、またはSEAJなどの一部のサードパーティモジュールビルディングツールと組み合わせることで、コードモジュール性を簡単に実現できます。
ただし、ここでは、上記の建設ツールを使用することはお勧めしません。現在、ES6のモジュラー関数を直接使用し、それに応じてWebpackにパッケージ化する最も人気のあるソリューションです。
ES6モジュールの機能がわからない場合は、詳細についてはリンクアドレスを参照してください。
今後の記事では、Webpackの構成を含む、紹介します。
2）コンポーネント化
Vueのコンポーネント機能は、そのハイライトです。ページ上の特定のコンポーネントのHTML、CSS、およびJSコードを管理用の.VUEファイルに配置することにより、コードのメンテナンスを大幅に改善できます。
例えば：
// app.vue <テンプレート> <div v-text = "note"> </div> </template> <script> export default {data（）{return {note： 'これはコンポーネントのHTMLテンプレートです！ '}}} </script> <style scoped> .box {color：＃000;} </style>コンポーネントにいくつかの前処理言語を書くこともできます。
// app.vue <テンプレートlang = 'jade'> div（class = "box" v-text = "text"）</template> <script> export default {data（）{return {note： 'これはコンポーネントのHTMLテンプレートです！ '}}} </script> <スタイルlang = "styles">。ボックスカラー：＃000 </style>もちろん、Webpackを使用してパッケージ化する必要があります。 Webpack + Vue-Roaderを使用し、同時にES6構文を使用することをお勧めします。バベルは変換のためにインストールする必要があります。この記事はvue.jsの簡単な議論であるため、ここでは詳細な紹介はしません。
3）ルーティング
Angularのように、Vueにはルーティング機能があります。ルーティング関数を通じて、各コンポーネントのオンデマンドロードを実現し、単一ページアプリケーションを簡単に構築できます。簡単なルーティング構成ファイルは次のとおりです。
// router.js'use strict'export default function（router）{router.map（{'/'：{component：function（resolve）{require（['./ components/foo.vue']、resolve）}}}}、 '/foo'：{component：function（solufent）{require（ '' '' '' ']、forve.vue.foo. }、 '/bar'：{component：function（resolve）{require（['./ components/bar.vue']、resolve）}}}}}2。ブートページコンポーネントの紹介
実際、それはハイエンドコンポーネントではありません。それどころか、それは本当に単なる単純なテーブルページングコンポーネントです。これは主に、最近のプロジェクトにテーブルページングコンポーネントが必要だからです。 VUE公式コンポーネントライブラリページネーションコンポーネントは強すぎるか、私には適していないので、私はそれを作るために自分自身を書きました。たぶん、私のような誰かが、シンプルなページング関数を実装するためにそのような単純なページングコンポーネントを必要としています。ここで共有すると、誰もがピットを埋めます。
ハイエンドコンポーネントが必要な場合は、公式のVueコンポーネントライブラリに移動できます
（1）使用方法
.vueコンポーネントファイルでは、このようなテンプレート、つまりHTMLコードを書きます。
<表> <thead> <tr> <th> id </th> <th> name </th> <th> content </th> <th> verme </th> </tr> </thead> <tbody> <tbody> <ttr v-for = "data in tablerist"> <td v-text = "data.num"> </td> <td v-text = "data v-text = "data.contents"> </td> <td v-text = "data.Remark"> </td> </tbody> <tfoot> <tr> <td colspan = "4"> <div> <boot-page：async = "fals"：data = "list"：lens = "lenarr"> </bot> </td> </tr> </tfoot> </table>
<boot-Page>タグでは、ASYNCとは、サーバー側からデータを取得するかどうかを指します。データは静的な表形式データアレイです。レンズは、ページごとに表示される行の配列です。 Page-lenは、表示できるページ数です。
静的データを使用するJavaScriptコード、つまりスクリプトタグの内容は次のとおりです。
<script> bootpageから './components/bootpage.vue' export default {data（）{return {lenarr：[10、50、100]、// pagelenあたりの表示長：5、//表示できるページ数：[{num：1、著者： 'luozh'、contents： 'bootpage：' bootpage： 'luozh'、contents： '123'、areg： 'bootpage'}、{num：1、著者： 'luozh'、contents： '123'、arem： 'bootpage'}、{num：1、auther： 'luozh'、contents： '123'、 'bootpage'}、{num：1、 'num：1、' luzh、 'bootpage'}、 'bootpage'}備考： 'bootpage'}]、// table raw data、サーバーデータを使用するときにテーブルリストを使用する必要はありません：[] //ページネーションコンポーネントによって返されたデータのポストページングデータ}}、コンポーネント：{bootpage}、イベント：{//ページネーションコンポーネント「データによって返されるデータ」（データ）一般に、静的表形式データを使用することはめったになく、ほとんどのアプリケーションのデータはサーバー側から取得されるため、サーバーページネーションデータを取得する方法を次に示します。
サーバーデータを使用するコンポーネントHTMLは次のとおりです。
<boot-page：async = "true"：lens = "lenarr"：url = "url"：page-len = "pagelen"：param = "param"> </boot-page>
ここで、URLはサーバーの要求アドレスです。 PARAMは、サーバーに送信する必要があるパラメーターオブジェクトです。
サーバーデータJavaScriptを使用したコードは次のとおりです。
<script> './components/bootpage.vue' export defayour {data（）{return {lenarr：[10、50、100]、// pagelenあたりの表示長：5、// url： '/bootpage/'、 '/bootpage/'、// request path parm：{] {] {} {] {] {} purs pass pass parted dated parted dated patristed fimetrページネーションコンポーネント}}、メソッド：{refresh（）{this。$ broadcast（ 'reffery'）//テーブルリフレッシュ関数はここに提供されます}}、コンポーネント：{bootpage}、イベント：{//ページネーションコンポーネントによって返されるテーブルデータ（ここではサーバーによって返されるデータです） 'データ（データ）注：コンポーネントテーブルに渡された配列コンテンツに加えて、サーバーはPage_numという名前のページの総数のキー名も必要です。
（2）コンポーネントソースコード
ページネーションの実装に関しては、ここのソースコードは表示されません。すべてのソースコードをgithub、アドレスにアップロードしました
事前に思い出させてください。このコンポーネントを運転するのに数時間かかったので、Vueコンポーネントの書面での形式と仕様が不十分であり、完全に独立していないため、意識的にピットを埋めます。ここでのみ共有します。
もちろん、プロジェクトの使用に合わせてコンポーネントのコードを意志で変更することもできます。結局のところ、大規模で完全なページングコンポーネントを実装することは非常に複雑です。
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
Vue.jsコンポーネントのチュートリアルについては、特別なトピックVue.jsコンポーネント学習チュートリアルをクリックして学習してください。
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。