2. Vue系列學習筆記 - 品牌管理案例

品牌管理案例

添加新品牌

刪除品牌

根據條件篩選品牌

1.x 版本中的filterBy指令，在2.x中已經被廢除：


<tr v-for="item in list | filterBy searchName in 'name'">

  <td>{{item.id}}</td>

  <td>{{item.name}}</td>

  <td>{{item.ctime}}</td>

  <td>

    <a href="#" @click.prevent="del(item.id)">刪除</a>

  </td>

</tr>

在2.x版本中手動實現篩選的方式：

篩選框綁定到 VM 實例中的 searchName 屬性：


<hr> 輸入篩選名稱：

<input type="text" v-model="searchName">

在使用 v-for 指令循環每一行數據的時候，不再直接 item in list，而是 in 一個過濾的methods 方法，同時，把過濾條件searchName傳遞進去：


<tbody>

      <tr v-for="item in search(searchName)">

        <td>{{item.id}}</td>

        <td>{{item.name}}</td>

        <td>{{item.ctime}}</td>

        <td>

          <a href="#" @click.prevent="del(item.id)">刪除</a>

        </td>

      </tr>

    </tbody>

search 過濾方法中，使用數組的 filter 方法進行過濾：


search(name) {

  return this.list.filter(x => {

    return x.name.indexOf(name) != -1;

  });

}

Vue調試工具`vue-devtools`的安裝步驟和使用

Vue.js devtools - FQ安裝方式 - 推薦

過濾器

概念：Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符指示；

私有過濾器

HTML元素：


<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

私有 filters 定義方式：


filters: { // 私有局部過濾器，只能在 當前 VM 對象所控制的 View 區域進行使用

    dataFormat(input, pattern = "") { // 在參數列表中 通過 pattern="" 來指定形參默認值，防止報錯

      var dt = new Date(input);

      // 獲取年月日

      var y = dt.getFullYear();

      var m = (dt.getMonth() + 1).toString().padStart(2, '0');

      var d = dt.getDate().toString().padStart(2, '0');



      // 如果 傳遞進來的字符串類型，轉爲小寫之後，等於 yyyy-mm-dd，那麼就返回 年-月-日

      // 否則，就返回  年-月-日 時：分：秒

      if (pattern.toLowerCase() === 'yyyy-mm-dd') {

        return `${y}-${m}-${d}`;

      } else {

        // 獲取時分秒

        var hh = dt.getHours().toString().padStart(2, '0');

        var mm = dt.getMinutes().toString().padStart(2, '0');

        var ss = dt.getSeconds().toString().padStart(2, '0');



        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

      }

    }

  }

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')來填充字符串；

全局過濾器


// 定義一個全局過濾器

Vue.filter('dataFormat', function (input, pattern = '') {

  var dt = new Date(input);

  // 獲取年月日

  var y = dt.getFullYear();

  var m = (dt.getMonth() + 1).toString().padStart(2, '0');

  var d = dt.getDate().toString().padStart(2, '0');



  // 如果 傳遞進來的字符串類型，轉爲小寫之後，等於 yyyy-mm-dd，那麼就返回 年-月-日

  // 否則，就返回  年-月-日 時：分：秒

  if (pattern.toLowerCase() === 'yyyy-mm-dd') {

    return `${y}-${m}-${d}`;

  } else {

    // 獲取時分秒

    var hh = dt.getHours().toString().padStart(2, '0');

    var mm = dt.getMinutes().toString().padStart(2, '0');

    var ss = dt.getSeconds().toString().padStart(2, '0');



    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

  }

});

注意：當有局部和全局兩個名稱相同的過濾器時候，會以就近原則進行調用，即：局部過濾器優先於全局過濾器被調用！

鍵盤修飾符以及自定義鍵盤修飾符

1.x中自定義鍵盤修飾符【瞭解即可】


Vue.directive('on').keyCodes.f2 = 113;

2.x中自定義鍵盤修飾符

通過Vue.config.keyCodes.名稱 = 按鍵值來自定義案件修飾符的別名：


Vue.config.keyCodes.f2 = 113;

使用自定義的按鍵修飾符：


<input type="text" v-model="name" @keyup.f2="add">

自定義指令

自定義全局和局部的自定義指令：


    // 自定義全局指令 v-focus，爲綁定的元素自動獲取焦點：

    Vue.directive('focus', {

      inserted: function (el) { // inserted 表示被綁定元素插入父節點時調用

        el.focus();

      }

    });



    // 自定義局部指令 v-color 和 v-font-weight，爲綁定的元素設置指定的字體顏色 和 字體粗細：

      directives: {

        color: { // 爲元素設置指定的字體顏色

          bind(el, binding) {

            el.style.color = binding.value;

          }

        },

        'font-weight': function (el, binding2) { // 自定義指令的簡寫形式，等同於定義了 bind 和 update 兩個鉤子函數

          el.style.fontWeight = binding2.value;

        }

      }

自定義指令的使用方式：


<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">

Vue 1.x 中自定義元素指令【已廢棄,瞭解即可】

Vue.elementDirective('red-color', {
  bind: function () {
    this.el.style.color = 'red';
  }
});

使用方式：

<red-color>1232</red-color>

vue實例的生命週期

什麼是生命週期：從Vue實例創建、運行、到銷燬期間，總是伴隨着各種各樣的事件，這些事件，統稱爲生命週期！
生命週期鉤子：就是生命週期事件的別名而已；
生命週期鉤子 = 生命週期函數 = 生命週期事件
主要的生命週期函數分類：
創建期間的生命週期函數：
- beforeCreate：實例剛在內存中被創建出來，此時，還沒有初始化好 data 和 methods 屬性
- created：實例已經在內存中創建OK，此時 data 和 methods 已經創建OK，此時還沒有開始編譯模板
- beforeMount：此時已經完成了模板的編譯，但是還沒有掛載到頁面中
- mounted：此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示
運行期間的生命週期函數：
- beforeUpdate：狀態更新之前執行此函數，此時 data 中的狀態值是最新的，但是界面上顯示的數據還是舊的，因爲此時還沒有開始重新渲染DOM節點
- updated：實例更新完畢之後調用此函數，此時 data 中的狀態值和界面上顯示的數據，都已經完成了更新，界面已經被重新渲染好了！
銷燬期間的生命週期函數：
- beforeDestroy：實例銷燬之前調用。在這一步，實例仍然完全可用。
- destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷燬。

vue-resource 實現 get, post, jsonp請求

除了 vue-resource 之外，還可以使用 axios 的第三方包實現實現數據的請求

之前的學習中，如何發起數據請求？
常見的數據請求類型？ get post jsonp
測試的URL請求資源地址：

get請求地址： http://vue.studyit.io/api/getlunbo
post請求地址：http://vue.studyit.io/api/post
jsonp請求地址：http://vue.studyit.io/api/jsonp

JSONP的實現原理

由於瀏覽器的安全性限制，不允許AJAX訪問協議不同、域名不同、端口號不同的數據接口，瀏覽器認爲這種訪問不安全；
可以通過動態創建script標籤的形式，把script標籤的src屬性，指向數據接口的地址，因爲script標籤不存在跨域限制，這種數據獲取方式，稱作JSONP（注意：根據JSONP的實現原理，知曉，JSONP只支持Get請求）；
具體實現過程：
- 先在客戶端定義一個回調方法，預定義對數據的操作；
- 再把這個回調方法的名稱，通過URL傳參的形式，提交到服務器的數據接口；
- 服務器數據接口組織好要發送給客戶端的數據，再拿着客戶端傳遞過來的回調方法名稱，拼接出一個調用這個方法的字符串，發送給客戶端去解析執行；
- 客戶端拿到服務器返回的字符串之後，當作Script腳本去解析執行，這樣就能夠拿到JSONP的數據了；
帶大家通過 Node.js ，來手動實現一個JSONP的請求例子；

   const http = require('http');
   // 導入解析 URL 地址的核心模塊
   const urlModule = require('url');

   const server = http.createServer();
   // 監聽 服務器的 request 請求事件，處理每個請求
   server.on('request', (req, res) => {
     const url = req.url;

     // 解析客戶端請求的URL地址
     var info = urlModule.parse(url, true);

     // 如果請求的 URL 地址是 /getjsonp ，則表示要獲取JSONP類型的數據
     if (info.pathname === '/getjsonp') {
       // 獲取客戶端指定的回調函數的名稱
       var cbName = info.query.callback;
       // 手動拼接要返回給客戶端的數據對象
       var data = {
         name: 'zs',
         age: 22,
         gender: '男',
         hobby: ['喫飯', '睡覺', '運動']
       }
       // 拼接出一個方法的調用，在調用這個方法的時候，把要發送給客戶端的數據，序列化爲字符串，作爲參數傳遞給這個調用的方法：
       var result = `${cbName}(${JSON.stringify(data)})`;
       // 將拼接好的方法的調用，返回給客戶端去解析執行
       res.end(result);
     } else {
       res.end('404');
     }
   });

   server.listen(3000, () => {
     console.log('server running at http://127.0.0.1:3000');
   });

vue-resource 的配置步驟：

直接在頁面中，通過script標籤，引入 vue-resource 的腳本文件；
注意：引用的先後順序是：先引用 Vue 的腳本文件，再引用 vue-resource 的腳本文件；

發送get請求：

getInfo() { // get 方式獲取數據
  this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
    console.log(res.body);
  })
}

發送post請求：

postInfo() {
  var url = 'http://127.0.0.1:8899/api/post';
  // post 方法接收三個參數：
  // 參數1： 要請求的URL地址
  // 參數2： 要發送的數據對象
  // 參數3： 指定post提交的編碼類型爲 application/x-www-form-urlencoded
  this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
    console.log(res.body);
  });
}

發送JSONP請求獲取數據：

jsonpInfo() { // JSONP形式從服務器獲取數據
  var url = 'http://127.0.0.1:8899/api/jsonp';
  this.$http.jsonp(url).then(res => {
    console.log(res.body);
  });
}

配置本地數據庫和數據接口API

先解壓安裝 PHPStudy;
解壓安裝 Navicat 這個數據庫可視化工具，並激活；
打開 Navicat 工具，新建空白數據庫，名爲 dtcmsdb4;
雙擊新建的數據庫，連接上這個空白數據庫，在新建的數據庫上右鍵 -> 運行SQL文件，選擇並執行 dtcmsdb4.sql 這個數據庫腳本文件；如果執行不報錯，則數據庫導入完成；
進入文件夾 vuecms3_nodejsapi 內部，執行 npm i 安裝所有的依賴項；
先確保本機安裝了 nodemon, 沒有安裝，則運行 npm i nodemon -g 進行全局安裝，安裝完畢後，進入到 vuecms3_nodejsapi目錄 -> src目錄 -> 雙擊運行 start.bat
如果API啓動失敗，請檢查 PHPStudy 是否正常開啓，同時，檢查 app.js 中第 14行 中數據庫連接配置字符串是否正確；PHPStudy 中默認的用戶名是root，默認的密碼也是root

品牌管理改造

展示品牌列表

添加品牌數據

刪除品牌數據

Vue中的動畫

爲什麼要有動畫：動畫能夠提高用戶的體驗，幫助用戶更好的理解頁面中的功能；

使用過渡類名

HTML結構：

<div id="app">
    <input type="button" value="動起來" @click="myAnimate">
    <!-- 使用 transition 將需要過渡的元素包裹起來 -->
    <transition name="fade">
      <div v-show="isshow">動畫哦</div>
    </transition>
  </div>

VM 實例：

// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    isshow: false
  },
  methods: {
    myAnimate() {
      this.isshow = !this.isshow;
    }
  }
});

定義兩組類樣式：

/* 定義進入和離開時候的過渡狀態 */
    .fade-enter-active,
    .fade-leave-active {
      transition: all 0.2s ease;
      position: absolute;
    }

    /* 定義進入過渡的開始狀態 和 離開過渡的結束狀態 */
    .fade-enter,
    .fade-leave-to {
      opacity: 0;
      transform: translateX(100px);
    }

使用第三方 CSS 動畫庫

導入動畫類庫：

<link rel="stylesheet" type="text/css" href="./lib/animate.css">

定義 transition 及屬性：

<transition
	enter-active-class="fadeInRight"
    leave-active-class="fadeOutRight"
    :duration="{ enter: 500, leave: 800 }">
  	<div class="animated" v-show="isshow">動畫哦</div>
</transition>

使用動畫鉤子函數

定義 transition 組件以及三個鉤子函數：

<div id="app">
    <input type="button" value="切換動畫" @click="isshow = !isshow">
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
      <div v-if="isshow" class="show">OK</div>
    </transition>
  </div>

定義三個 methods 鉤子方法：

methods: {
        beforeEnter(el) { // 動畫進入之前的回調
          el.style.transform = 'translateX(500px)';
        },
        enter(el, done) { // 動畫進入完成時候的回調
          el.offsetWidth;
          el.style.transform = 'translateX(0px)';
          done();
        },
        afterEnter(el) { // 動畫進入完成之後的回調
          this.isshow = !this.isshow;
        }
      }

定義動畫過渡時長和樣式：

.show{
      transition: all 0.4s ease;
    }

v-for 的列表過渡

定義過渡樣式：

<style>
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(10px);
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 0.3s ease;
    }
</style>

定義DOM結構，其中，需要使用 transition-group 組件把v-for循環的列表包裹起來：

  <div id="app">
    <input type="text" v-model="txt" @keyup.enter="add">

    <transition-group tag="ul" name="list">
      <li v-for="(item, i) in list" :key="i">{{item}}</li>
    </transition-group>
  </div>

定義 VM中的結構：

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        txt: '',
        list: [1, 2, 3, 4]
      },
      methods: {
        add() {
          this.list.push(this.txt);
          this.txt = '';
        }
      }
    });

列表的排序過渡

<transition-group> 組件還有一個特殊之處。不僅可以進入和離開動畫，還可以改變定位。要使用這個新功能只需瞭解新增的 v-move 特性，它會在元素的改變定位的過程中應用。

v-move 和 v-leave-active 結合使用，能夠讓列表的過渡更加平緩柔和：

.v-move{
  transition: all 0.8s ease;
}
.v-leave-active{
  position: absolute;
}

2. Vue系列學習筆記 - 品牌管理案例

品牌管理案例

添加新品牌

刪除品牌

根據條件篩選品牌

Vue調試工具`vue-devtools`的安裝步驟和使用

過濾器

私有過濾器

全局過濾器

鍵盤修飾符以及自定義鍵盤修飾符

1.x中自定義鍵盤修飾符【瞭解即可】

2.x中自定義鍵盤修飾符

自定義指令

Vue 1.x 中自定義元素指令【已廢棄,瞭解即可】

vue實例的生命週期

vue-resource 實現 get, post, jsonp請求

配置本地數據庫和數據接口API

品牌管理改造

展示品牌列表

添加品牌數據

刪除品牌數據

Vue中的動畫

使用過渡類名

使用第三方 CSS 動畫庫

使用動畫鉤子函數

v-for 的列表過渡

列表的排序過渡

相關文章

Docker製作dotnet core程序鏡像

3.【RabbitMQ實戰】- 工作隊列(Work Queue)

5.【RabbitMQ實戰】- 交換機（Exchange）

2.【RabbitMQ實戰】- Hellow World

6.【RabbitMQ實戰】- 死信隊列

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

2. Vue系列學習筆記 - 品牌管理案例

品牌管理案例

添加新品牌

刪除品牌

根據條件篩選品牌

Vue調試工具vue-devtools的安裝步驟和使用

過濾器

私有過濾器

全局過濾器

鍵盤修飾符以及自定義鍵盤修飾符

1.x中自定義鍵盤修飾符【瞭解即可】

Vue 1.x 中 自定義元素指令【已廢棄,瞭解即可】

配置本地數據庫和數據接口API

品牌管理改造

展示品牌列表

添加品牌數據

刪除品牌數據

使用過渡類名

使用動畫鉤子函數

列表的排序過渡

相關文章

Vue調試工具`vue-devtools`的安裝步驟和使用

Vue 1.x 中自定義元素指令【已廢棄,瞭解即可】