圖書列表案例

圖書列表案例

• 靜態列表效果

• 基於數據實現模板效果

• 處理每行的操做按鈕

一、 提供的靜態數據

• 數據存放在vue 中 data 屬性中

  var vm = new Vue({
        el: '#app',
        data: {
          books: [{
            id: 1,
            name: '三國演義',
            date: ''
          },{
            id: 2,
            name: '水滸傳',
            date: ''
          },{
            id: 3,
            name: '紅樓夢',
            date: ''
          },{
            id: 4,
            name: '西遊記',
            date: ''
          }]
        }
      }); var vm = new Vue({
        el: '#app',
        data: {
          books: [{
            id: 1,
            name: '三國演義',
            date: ''
          },{
            id: 2,
            name: '水滸傳',
            date: ''
          },{
            id: 3,
            name: '紅樓夢',
            date: ''
          },{
            id: 4,
            name: '西遊記',
            date: ''
          }]
        }
      });

   

二、 把提供好的數據渲染到頁面上

• 利用 v-for循環 遍歷 books 將每一項數據渲染到對應的數據中

  <tbody>
      <tr :key='item.id' v-for='item in books'>
         <!-- 對應的id 渲染到頁面上 -->
         <td>{{item.id}}</td>
          <!-- 對應的name 渲染到頁面上 -->
         <td>{{item.name}}</td>
         <td>{{item.date}}</td>
         <td>
           <!-- 阻止 a 標籤的默認跳轉 -->
           <a href="" @click.prevent>修改</a>
           <span>|</span>
            <a href="" @click.prevent>刪除</a>
         </td>
       </tr>
  </tbody>

   

三、 添加圖書

• 經過雙向綁定獲取到輸入框中的輸入內容

• 給按鈕添加點擊事件

• 把輸入框中的數據存儲到 data 中的 books  裏面

<div>
  <h1>圖書管理</h1>
  <div class="book">
       <div>
         <label for="id">
           編號：
         </label>
          <!-- 3.一、經過雙向綁定獲取到輸入框中的輸入的 id  -->
         <input type="text" id="id" v-model='id'>
         <label for="name">
           名稱：
         </label>
           <!-- 3.二、經過雙向綁定獲取到輸入框中的輸入的 name  -->
         <input type="text" id="name" v-model='name'>
            <!-- 3.三、給按鈕添加點擊事件  -->
         <button @click='handle'>提交</button>
       </div>
  </div>
</div>
  <script type="text/javascript">
    /*
      圖書管理-添加圖書
    */
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        books: [{
          id: 1,
          name: '三國演義',
          date: ''
        },{
          id: 2,
          name: '水滸傳',
          date: ''
        },{
          id: 3,
          name: '紅樓夢',
          date: ''
        },{
          id: 4,
          name: '西遊記',
          date: ''
        }]
      },
      methods: {
        handle: function(){
          // 3.4 定義一個新的對象book 存儲 獲取到輸入框中 書 的id和名字 
          var book = {};
          book.id = this.id;
          book.name = this.name;
          book.date = '';
         // 3.5 把book  經過數組的變異方法 push 放到    books 裏面
          this.books.push(book);
          //3.6 清空輸入框
          this.id = '';
          this.name = '';
        }
      }
    });
  </script>

 

4 修改圖書-上

• 點擊修改按鈕的時候 獲取到要修改的書籍名單

  • 4.1  給修改按鈕添加點擊事件，  須要把當前的圖書的id 傳遞過去 這樣才知道須要修改的是哪一本書籍

• 把須要修改的書籍名單填充到表單裏面

  • 4.2  根據傳遞過來的id 查出books 中 對應書籍的詳細信息

  • 4.3 把獲取到的信息填充到表單

<div id="app">
    <div class="grid">
      <div>
        <h1>圖書管理</h1>
        <div class="book">
          <div>
            <label for="id">
              編號：
            </label>
            <input type="text" id="id" v-model='id' :disabled="flag">
            <label for="name">
              名稱：
            </label>
            <input type="text" id="name" v-model='name'>
            <button @click='handle'>提交</button>
          </div>
        </div>
      </div>
      <table>
        <thead>
          <tr>
            <th>編號</th>
            <th>名稱</th>
            <th>時間</th>
            <th>操做</th>
          </tr>
        </thead>
        <tbody>
          <tr :key='item.id' v-for='item in books'>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date}}</td>
            <td>
              <!--- 
                4.1  給修改按鈕添加點擊事件，  須要把當前的圖書的id 傳遞過去 
                這樣才知道須要修改的是哪一本書籍
                --->  
              <a href="" @click.prevent='toEdit(item.id)'>修改</a>
              <span>|</span>
              <a href="" @click.prevent>刪除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
 <script type="text/javascript">
    /*
      圖書管理-添加圖書
    */
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false,
        id: '',
        name: '',
        books: [{
          id: 1,
          name: '三國演義',
          date: ''
        },{
          id: 2,
          name: '水滸傳',
          date: ''
        },{
          id: 3,
          name: '紅樓夢',
          date: ''
        },{
          id: 4,
          name: '西遊記',
          date: ''
        }]
      },
      methods: {
        handle: function(){
          // 3.4 定義一個新的對象book 存儲 獲取到輸入框中 書 的id和名字 
          var book = {};
          book.id = this.id;
          book.name = this.name;
          book.date = '';
         // 3.5 把book  經過數組的變異方法 push 放到    books 裏面
          this.books.push(book);
          //3.6 清空輸入框
          this.id = '';
          this.name = '';
        },
        toEdit: function(id){
          console.log(id)
          //4.2  根據傳遞過來的id 查出books 中 對應書籍的詳細信息
          var book = this.books.filter(function(item){
            return item.id == id;
          });
          console.log(book)
          //4.3 把獲取到的信息填充到表單
          // this.id   和  this.name 經過雙向綁定 綁定到了表單中  一旦數據改變視圖自動更新
          this.id = book[0].id;
          this.name = book[0].name;
        }
      }
    });
  </script>

 

5  修改圖書-下

• 5.1  定義一個標識符， 主要是控制 編輯狀態下當前編輯書籍的id 不能被修改 即 處於編輯狀態下 當前控制書籍編號的輸入框禁用 

• 5.2  經過屬性綁定給書籍編號的 綁定 disabled 的屬性  flag 爲 true 即爲禁用

• 5.3  flag 默認值爲false   處於編輯狀態 要把 flag 改成true 即當前表單爲禁用

• 5.4  複用添加方法   用戶點擊提交的時候依然執行 handle 中的邏輯若是 flag爲true 即 表單處於不可輸入狀態 此時執行的用戶編輯數據數據

<div id="app">
    <div class="grid">
      <div>
        <h1>圖書管理</h1>
        <div class="book">
          <div>
            <label for="id">
              編號：
            </label>
              <!-- 5.2 經過屬性綁定 綁定 disabled 的屬性  flag 爲 true 即爲禁用      -->
            <input type="text" id="id" v-model='id' :disabled="flag">
            <label for="name">
              名稱：
            </label>
            <input type="text" id="name" v-model='name'>
            <button @click='handle'>提交</button>
          </div>
        </div>
      </div>
      <table>
        <thead>
          <tr>
            <th>編號</th>
            <th>名稱</th>
            <th>時間</th>
            <th>操做</th>
          </tr>
        </thead>
        <tbody>
          <tr :key='item.id' v-for='item in books'>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date}}</td>
            <td>
              <a href="" @click.prevent='toEdit(item.id)'>修改</a>
              <span>|</span>
              <a href="" @click.prevent>刪除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>   
<script type="text/javascript">
        /*圖書管理-添加圖書*/
        var vm = new Vue({
            el: '#app',
            data: {
                // 5.1  定義一個標識符， 主要是控制 編輯狀態下當前編輯書籍的id 不能被修改 
                // 即 處於編輯狀態下 當前控制書籍編號的輸入框禁用 
                flag: false,
                id: '',
                name: '',
              
            },
            methods: {
                handle: function() {
                   /*
                     5.4  複用添加方法   用戶點擊提交的時候依然執行 handle 中的邏輯
                         若是 flag爲true 即 表單處於不可輸入狀態 此時執行的用戶編輯數據數據    
                   */ 
                    if (this.flag) {
                        // 編輯圖書
                        // 5.5  根據當前的ID去更新數組中對應的數據  
                        this.books.some((item) => {
                            if (item.id == this.id) {
                                // 箭頭函數中 this 指向父級做用域的this 
                                item.name = this.name;
                                // 完成更新操做以後，須要終止循環
                                return true;
                            }
                        });
                        // 5.6 編輯完數據後表單要處以能夠輸入的狀態
                        this.flag = false;
                    //  5.7  若是 flag爲false  表單處於輸入狀態 此時執行的用戶添加數據    
                    } else { 
                        var book = {};
                        book.id = this.id;
                        book.name = this.name;
                        book.date = '';
                        this.books.push(book);
                        // 清空表單
                        this.id = '';
                        this.name = '';
                    }
                    // 清空表單
                    this.id = '';
                    this.name = '';
                },
                toEdit: function(id) {
                     /*
                     5.3  flag 默認值爲false   處於編輯狀態 要把 flag 改成true 即當前表單爲禁                      用 
                     */ 
                    this.flag = true;
                    console.log(id)
                    var book = this.books.filter(function(item) {
                        return item.id == id;
                    });
                    console.log(book)
                    this.id = book[0].id;
                    this.name = book[0].name;
                }
            }
        });
    </script>

 

6 刪除圖書

• 6.1 給刪除按鈕添加事件 把當前須要刪除的書籍id 傳遞過來

• 6.2 根據id從數組中查找元素的索引

• 6.3 根據索引刪除數組元素

  <tbody>
            <tr :key='item.id' v-for='item in books'>
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.date}}</td>
              <td>
                <a href="" @click.prevent='toEdit(item.id)'>修改</a>
                <span>|</span>
                 <!--  6.1 給刪除按鈕添加事件 把當前須要刪除的書籍id 傳遞過來  --> 
                <a href="" @click.prevent='deleteBook(item.id)'>刪除</a>
              </td>
            </tr>
  </tbody>
    <script type="text/javascript">
      /*
        圖書管理-添加圖書
      */
      var vm = new Vue({
        methods: {
          deleteBook: function(id){
            // 刪除圖書
            #// 6.2 根據id從數組中查找元素的索引
            // var index = this.books.findIndex(function(item){
            //   return item.id == id;
            // });
            #// 6.3 根據索引刪除數組元素
            // this.books.splice(index, 1);
            // -------------------------
           #// 方法二：經過filter方法進行刪除
          
            # 6.4  根據filter 方法 過濾出來id 不是要刪除書籍的id 
            # 由於 filter 是替換數組不會修改原始數據 因此須要 把 不是要刪除書籍的id  賦值給 books 
            this.books = this.books.filter(function(item){
              return item.id != id;
            });
          }
        }
      });
    </script>
   

   

經常使用特性應用場景

1 過濾器

• Vue.filter  定義一個全局過濾器

  <tr :key='item.id' v-for='item in books'>
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <!-- 1.3  調用過濾器 -->
              <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
              <td>
                <a href="" @click.prevent='toEdit(item.id)'>修改</a>
                <span>|</span>
                <a href="" @click.prevent='deleteBook(item.id)'>刪除</a>
              </td>
  </tr>
  ​
  <script>
          #1.1  Vue.filter  定義一個全局過濾器
          Vue.filter('format', function(value, arg) {
                function dateFormat(date, format) {
                  if (typeof date === "string") {
                    var mts = date.match(/(\/Date\((\d+)\)\/)/);
                    if (mts && mts.length >= 3) {
                      date = parseInt(mts[2]);
                    }
                  }
                  date = new Date(date);
                  if (!date || date.toUTCString() == "Invalid Date") {
                    return "";
                  }
                  var map = {
                    "M": date.getMonth() + 1, //月份 
                    "d": date.getDate(), //日 
                    "h": date.getHours(), //小時 
                    "m": date.getMinutes(), //分 
                    "s": date.getSeconds(), //秒 
                    "q": Math.floor((date.getMonth() + 3) / 3), //季度 
                    "S": date.getMilliseconds() //毫秒 
                  };
                  format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                    var v = map[t];
                    if (v !== undefined) {
                      if (all.length > 1) {
                        v = '0' + v;
                        v = v.substr(v.length - 2);
                      }
                      return v;
                    } else if (t === 'y') {
                      return (date.getFullYear() + '').substr(4 - all.length);
                    }
                    return all;
                  });
                  return format;
                }
                return dateFormat(value, arg);
              })
  #1.2  提供的數據 包含一個時間戳   爲毫秒數
     [{
            id: 1,
            name: '三國演義',
            date: 2525609975000
          },{
            id: 2,
            name: '水滸傳',
            date: 2525609975000
          },{
            id: 3,
            name: '紅樓夢',
            date: 2525609975000
          },{
            id: 4,
            name: '西遊記',
            date: 2525609975000
          }];
  </script>

   

2 自定義指令

• 讓表單自動獲取焦點

• 經過Vue.directive 自定義指定

<!-- 2.2  經過v-自定義屬性名 調用自定義指令 -->
<input type="text" id="id" v-model='id' :disabled="flag" v-focus>
​
<script>
    # 2.1   經過Vue.directive 自定義指定
    Vue.directive('focus', {
      inserted: function (el) {
        el.focus();
      }
    });
​
</script>

 

3 計算屬性

• 經過計算屬性計算圖書的總數

  • 圖書的總數就是計算數組的長度

<div class="total">
        <span>圖書總數：</span>
        <!-- 3.2 在頁面上 展現出來 -->
        <span>{{total}}</span>
</div>
​
  <script type="text/javascript">
    /*
      計算屬性與方法的區別:計算屬性是基於依賴進行緩存的，而方法不緩存
    */
    var vm = new Vue({
      data: {
        flag: false,
        submitFlag: false,
        id: '',
        name: '',
        books: []
      },
      computed: {
        total: function(){
          // 3.1  計算圖書的總數
          return this.books.length;
        }
      },
    });
  </script>
​