vue.js建構圖書管理平台的技術解答

這次帶給大家vue.js搭建圖書管理平台的技術解答，vue.js搭建圖書管理平台的注意事項有哪些，下面就是實戰案例，一起來看一下。

Vue.js是當下很火的一個JavaScript MVVM（Model-View-ViewModel）函式庫，它是以資料驅動和元件化的想法建構的。相較於Angular.js，Vue.js提供了更簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。

上一期簡單講解了vue的基本文法，這次我們做一個小項目，搭建一個簡單的圖書管理平台，能夠讓我們更深刻的理解這門語言的妙用。

1、DEMO樣式

#   首先我們需要搭建一個簡單的demo樣式，推薦大家使用bootstrap，可以很快的搭建出一個清晰簡潔的頁面。

  給大家分享一段我的程式碼吧。  

<p>
  </p><p>
  </p><h1 id="Vue-demo">Vue demo</h1>
  <p>
   </p>

                                                   

序号	书名	作者	价格	操作

   

   

添加书籍

   

    书名         

   

    作者         

   

    价格         

   添加    查询            

   

修改书籍

   

    书名         

   

    作者         

   

    价格         

   完成            

  運用了bootstrap的柵格系統，和一些簡單的元件，不光簡單快捷，還能自動實現響應式呢。

  而且做出來的效果也不難看，挺整潔的。

  如果對這個CSS框架沒有了解的話，自己寫一下樣式也沒關係。

2、建立vue實例

    接下來，我們匯入自己的JS文件，建立一個vue實例。

new Vue({
 el: '#app',
 data: {
 book: {
  id: 0,
  author: '',
  name: '',
  price: ''
 },
 books: [{
  id: 1,
  author: '曹雪芹',
  name: '红楼梦',
  price: 32.0
 }, {
  id: 2,
  author: '施耐庵',
  name: '水浒传',
  price: 30.0
 }, {
  id: '3',
  author: '罗贯中',
  name: '三国演义',
  price: 24.0
 }, {
  id: 4,
  author: '吴承恩',
  name: '西游记',
  price: 20.0
 }]
 }
 });

  data中是一些初始的數據，可以隨意填寫。

3 、將各種指令加入HTML 

#   我們說過，vue的核心聚焦在視圖層，所以指令是最重要的一步，我們一點一點說。

  不過因為指令分佈的比較亂，所以直接附上全部程式碼，然後我一個一個的解釋。

<p>
   </p>

                                                                                                    

序号	书名	作者	价格	操作
{{book.id}}	{{book.name}}	{{book.author}}	{{book.price}}

       

   

添加书籍

   

    书名         

   

    作者         

   

    价格         

   添加    查询            

   

修改书籍

   

    书名         

   

    作者         

   

    价格         

   完成       

首先，將id為app的vue實例掛載到DOM節點上，如果對於這些基本內容還不了解的話，可以去看我的上一篇博客，詳細的介紹了關於vue的基礎知識。

  下面的表格，在tr中透過一個v-for循環，將vue實例data中的數據，全部載入到表格裡。

  細心的讀者應該發現了，我在v-for前寫了一個v-cloak，這是做什麼的呢？

  用過angular，vue這種框架的人應該都知道，當我們用{{}}綁定資料的時候，當頁面刷新的瞬間，會看到閃爍而過的原始程式碼。

  當資訊量比較大的時候，這種體驗無疑是十分惡劣的，這個時候，v-cloak這個指令保持在元素上直到關聯實例結束編譯。

  和 CSS 規則如[v-cloak] { display: none }一起用時，這個指令可以隱藏未編譯的 Mustache 標籤直到實例準備完畢。

  這樣就解決了刷新的瞬間頁面出現大量亂碼的情況。

  下面的v-if和v-else就是為了練習一下各種指令啦，讓我們的按鈕生成的時候可以輪流生成兩種顏色~

  而v-model是為了在input中輸入內容時，可以動態的取到輸入的內容。

  還是那句話，這些基本指令不認識的話，可以去我的上一篇部落格查看。

  還不錯吧~接下來我們就開始說一下各個函數。  

addBook: function() {
  //计算书的id
  this.book.id = this.books.length + 1;
  this.books.push(this.book);
  //将input中的数据重置
  this.book = {};
 }

  這個是新增函數，大家可以去上面看vue實例中data裡面的程式碼。

  其實只是這麼幾行程式碼，vue的強大就已經展現的淋漓盡致了。

  因為我們在輸入框中綁定了v-model，所以我們輸入的內容就會動態的與book這個物件同步。

  這個函數的原理就是給book那個物件的id賦值，然後將透過v-model動態綁定到輸入框上的數據，也就是我們輸入的數據，push進books那個數組。

  最后将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 <p style="text-align: left;">
	  删除的原理是取到当前books数组的长度，当前选中的那一条的下标是它的id-1，用splice方法将它删除。</p><p style="text-align: left;">
	  然后通过循环，将id比被删除数据大的那些项的id都减去1，保持序号的连续。</p><p style="text-align: left;">
	  然后是修改 </p><pre class="brush:php;toolbar:false">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中文网其它相关文章！

推荐阅读：

JS按钮禁用和启用使用详解

vue.js+todolist的代码使用

以上是vue.js建構圖書管理平台的技術解答的詳細內容。更多資訊請關注PHP中文網其他相關文章！