vue.js を使用してライブラリ管理プラットフォームを構築するための技術的ソリューション-jsチュートリアル-php.cn

vue.js を使用してライブラリ管理プラットフォームを構築するための技術的ソリューション

php中世界最好的语言

リリース： 2018-04-16 11:08:47

オリジナル

1255 人が閲覧しました

今回は、vue.js を使用してライブラリ管理プラットフォームを構築するための技術的なソリューションをお届けします。vue.js を使用してライブラリ管理プラットフォームを構築するための注意事項は何ですか?実際の事例を見てみましょう。

Vue.js は、非常に人気のある

JavaScript MVVM (Model-View-ViewModel) ライブラリであり、データ駆動型およびコンポーネントベースのアイデアで構築されています。 Angular.js と比較して、Vue.js はよりシンプルで理解しやすい API を提供するため、すぐに Vue.js を使い始めて使用することができます。

前回は Vue の基本的な構文を簡単に説明しましたが、今回は小さなプロジェクトを実行して、この言語の素晴らしい使い方をより深く理解できるように、簡単なライブラリ管理プラットフォームを構築します。

1. デモスタイル

まず、簡単なデモスタイルを構築する必要があります。明確で簡潔なページを迅速に構築できるブートストラップを使用することをお勧めします。

私のコードの一部を共有しましょう。

れぇ

bootstrap のグリッドシステムといくつかのシンプルなコンポーネントを使用すると、シンプルで高速なだけでなく、自動的に応答します。

そしてその効果は醜くなく、非常にきれいです。

この CSS フレームワークを理解していなくても、スタイルを自分で書いても問題ありません。

2. vue インスタンスを作成します

次に、独自の JS ファイルをインポートして、vue インスタンスを作成します。

りー

��data には初期データが含まれており、任意に入力できます。

3. HTMLに各種命令を追加する

Vue のコアは

ビューレイヤーに焦点を当てていると述べました。そのため、手順が最も重要なステップです。それについて少しずつ説明していきます。

でも、説明書がめちゃくちゃに配布されているので、コードを全部直接貼り付けて、一つ一つ説明しています。

りー

まず、ID アプリを使用して vue インスタンスを

DOM ノードにマウントします。これらの基本的な内容が理解できない場合は、vue の基礎知識を詳しく紹介している前回のブログを参照してください。

以下の表では、tr 内で v-

for ループを使用して、vue インスタンスデータ内のすべてのデータをテーブルにロードしています。

注意深い読者は、私が v-for の前に v-cloak を書いたことに気づいたはずです。これは何のためにあるのでしょうか。

Angular や Vue などのフレームワークを使用したことがある人は、{{}} を使用してデータをバインドすると、ページが更新されると元のコードがフラッシュされることをご存知でしょう。

情報量が比較的大きい場合、このエクスペリエンスは間違いなく非常に悪いです。このとき、v-cloak 命令は、関連するインスタンスがコンパイルされるまで要素上に残ります。

などの CSS ルールと一緒に使用すると、このディレクティブは、インスタンスの準備ができるまで、コンパイルされていない Mustache タグを非表示にします。 [v-cloak] { display: none }

これにより、ページ更新時に大量の文字化けが発生する問題が解決されました。

以下の v-if と v-else は、ボタンが生成されたときに 2 つの色を順番に生成できるように、さまざまな命令を練習するためのものです~

そしてv-modelはinputに内容を入力する際に入力内容を動的に取得するものです。

同じことが言えますが、これらの基本的な手順を知らない場合は、前回のブログを参照してください。

悪くないよ〜次に各機能の説明に入っていきます。

れぇ

これは関数を追加するためのものです。上記に進み、vue インスタンスのデータのコードを確認してください。

実際、わずか数行のコードで、Vue の威力が十分に発揮されます。

入力ボックスに v-model をバインドしているので、入力した内容は動的に book オブジェクトと同期されます。

この関数の原理は、書籍オブジェクトの ID に値を割り当て、v-model を通じて入力ボックスに動的にバインドされたデータ、つまり入力データを書籍配列にプッシュすることです。

最后将book对象清空，也就是把我们的输入框清空了。

区区3行代码，信息的录入就完成了，是不是很神奇呢。

哦对了，在vue实例中，this指向的就是本身这个vue实例，对面向对象的概念没有了解的话，建议百度一下this指向问题。

下面看一下删除

delBook: function(book) {
  var blength = this.books.length;
  this.books.splice(book.id-1, 1);
  for( var i = 0; i < blength ; i++) {
  if(book.id < this.books[i].id) { 
   this.books[i].id -= 1;
  }
  } 
 }

ログイン後にコピー

删除的原理是取到当前books数组的长度，当前选中的那一条的下标是它的id-1，用splice方法将它删除。

然后通过循环，将id比被删除数据大的那些项的id都减去1，保持序号的连续。

然后是修改

updateBook: function(book) {
  $("#add-book").css("display","none");
  $("#update-book").css("display","block");
  id = book.id;
 },
 updatesBook:function(book) {
  this.book.id = id;
  this.books.splice(id-1,1,this.book);
  $("#add-book").css("display","block");
  $("#update-book").css("display","none");
  this.book = {};

ログイン後にコピー

第一个函数就是将修改框弹出来，把添加的框隐藏掉，然后把需要修改的id绑定到一个全局的变量上~

然后第一个函数才是真正的修改命令。

将刚才绑定的全局变量，赋值给当前id，然后还是用splice方法，用输入的内容把原来的内容替换掉~

然后还是同样的，将book对象也就是输入框清空。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！