ホームページ > 記事 > ウェブフロントエンド > Vue.js に基づくテーブル ページング コンポーネント
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> <input type="text" ng-model="note"> </div> </body> // js var myModule = angular.module('myApp', []); myModule.controller('myCtrl', ['$scopp', function($scope) { $scope.note = ''; ]);
次に、Vue のコードを見てください:
// html <body> <div id="app"> <p>{{ note }}</p> <input type="text" v-model="note"> </div> </body> // js var vm = new Vue({ el: '#app', data: { note: '' } })
それに比べて、Vue のコーディング スタイルはより簡潔で理解しやすいと個人的に思います。
(2) 優雅さ
Vue は比較的軽量なフレームワークですが、シンプルで軽量で非常に使いやすく、また、非常に便利なディレクティブやプロパティも提供しています。 。
例:
1)、バインドクリックイベント
913ab33578b43051d8ce890f7743009b5db79b134e9f6b82c0b36e0489ee08ed
は次のように省略できます:
d0e70d66c1dcfd4b402c9dec35a754db5db79b134e9f6b82c0b36e0489ee08ed
3)、便利な修飾子
<!-- 阻止单击事件冒泡 --> <a @click.stop="doSomething"></a> <!-- 只在按下回车键的时候触发事件 --> <input @keyup.enter="submit">
4)、そして実用的なパラメーター機能
<!-- debounce 设置一个最小的延时 --> <input v-model="note" debounce="500"> <!-- 在 "change" 而不是 "input" 事件中更新数据 --> <input v-model="msg" lazy>、とてもエレガントな気がしませんか?
(3) コンパクト
コンパクトさについて言えば、まず Vue のソースコードのサイズに注意する必要があります。Vue の製品バージョン (つまり最小バージョン) のソースコードはわずか 72.9kb であると公式 Web サイトに記載されています。 gzip 圧縮後のサイズはわずか 25.11kb ですが、Angular の 144kb と比較すると半分に減ります。
コンパクトであることの利点の 1 つは、ユーザーが対応するソリューションをより自由に選択できるようになり、他のライブラリと連携する際により多くのスペースが得られることです。
たとえば、Vue のコアにはデフォルトではルーティングと Ajax 機能が含まれていません。ただし、プロジェクトでルーティングと AJAX が必要な場合は、公式ライブラリ Vue-router とサードパーティのプラグイン vue を直接使用できます。 -Vue が提供するリソース 同時に、jQuery、AJAX など、使用したい他のライブラリやプラグインも使用できます。
とても柔軟だと思いませんか?
(4) 優秀な職人には事欠きません
Vueは小さいながらも全ての内臓が揃っており、大規模なアプリケーションを構築する際にも便利です。
1) モジュール化
CommonJS、RequireJS、SeaJs などのサードパーティのモジュール構築ツールと組み合わせることで、コードを簡単にモジュール化できます。
ただし、ここのエディターは上記のビルド ツールの使用を推奨していません。ES6 のモジュラー機能を直接使用し、それを Webpack と組み合わせて対応するパッケージ化を行うのが現在最も一般的なソリューションです。
ES6モジュールの機能が分からない方は、http://es6.ruanyifeng.com/#docs/moduleをご覧ください
今後の記事では、Webpackの設定も含めて紹介していきます。 2) コンポーネント化 Vue の目玉の一つとも言えるコンポーネント化機能は、ページ上の特定のコンポーネントの html、CSS、js コードを .vue ファイルに入れて管理することで、コードを大幅にカスタマイズすることができます。メンテナンス性が向上しました。 例:// App.vue <template> <div class="box" v-text="note"></div> </template> <script> export default { data () { return { note: '这是一个组件的html模板!' } } } </script> <style scoped> .box { color: #000; } </style>
// App.vue <template> div(class="box" v-text="text") </template> <script> export default { data () { return { note: '这是一个组件的html模板!' } } } </script> <style> .box color: #000 </style>
もちろん、Webpack + vue-loader を使用し、ES6 構文を使用することをお勧めします。同時に、変換のために Babel をインストールする必要があります。この記事は 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 (resolve) { require(['./components/Foo.vue'], resolve) } }, '/bar': { component: function (resolve) { require(['./components/Bar.vue'], resolve) } } }) }
(1)
の使い方 .vueのコンポーネントファイルに、次のようなテンプレート、つまりHTMLコードを書きます:
<table class="table table-hover table-bordered"> <thead> <tr> <th width="10%">id</th> <th width="30%">name</th> <th width="40%">content</th> <th width="20%">remark</th> </tr> </thead> <tbody> <tr v-for="data in tableList"> <td v-text="data.num"></td> <td v-text="data.author"></td> <td v-text="data.contents"></td> <td v-text="data.remark"></td> </tr> </tbody> <tfoot> <tr> <td colspan="4"> <div class="col-sm-12 pull-right"> <boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen"></boot-page> </div> </td> </tr> </tfoot> </table>
18745e754996c235f93078c0e1ab2eaf ここで、url はサーバーのリクエスト アドレスです。param はサーバーに送信する必要があるパラメーター オブジェクトです。サーバー データの JavaScript は次のとおりです:
<script> import bootPage from './components/BootPage.vue' export default { data () { return { lenArr: [10, 50, 100], // 每页显示长度设置 pageLen: 5, // 可显示的分页数 url: '/bootpage/', // 请求路径 param: {}, // 向服务器传递参数 tableList: [] // 分页组件传回的分页后数据 } }, methods: { refresh () { this.$broadcast('refresh') // 这里提供了一个表格刷新功能 } }, components: { bootPage }, events: { // 分页组件传回的表格数据(这里即为服务器传回的数据) 'data' (data) { this.tableList = data } } } </script>注: コンポーネント テーブルに渡される配列コンテンツに加えて、サーバーには合計ページも必要です。番号のキー名は page_num と呼ばれますテーブル ページング コンポーネントに関するその他の関連記事はこちらVue.js をベースにした PHP 中国語 Web サイトにご注意ください。