Vue.js - Day1

ZHONGZEWEI發表於2020-10-31
Vue.js

Vue.js - Day1

課程介紹

前5天： 都在學習Vue基本的語法和概念；打包工具 Webpack , Gulp
後5天： 以專案驅動教學；

什麼是Vue.js

  • Vue.js 是目前最火的一個前端框架，React是最流行的一個前端框架（React除了開發網站，還可以開發手機App， Vue語法也是可以用於進行手機App開發的，需要藉助於Weex）

  • Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，併成為前端三大主流框架！

  • Vue.js 是一套構建使用者介面的框架，只關注檢視層，它不僅易於上手，還便於與第三方庫或既有專案整合。（Vue有配套的第三方類庫，可以整合起來做大型專案的開發）

  • 前端的主要工作？主要負責MVC中的V這一層；主要工作就是和介面打交道，來製作前端頁面效果；

為什麼要學習流行框架

  • 企業為了提高開發效率：在企業中，時間就是效率，效率就是金錢；
  • 企業中，使用框架，能夠提高開發的效率；

  • 提高開發效率的發展歷程：原生JS -> Jquery之類的類庫 -> 前端模板引擎 -> Angular.js / Vue.js（能夠幫助我們減少不必要的DOM操作；提高渲染效率；雙向資料繫結的概念【通過框架提供的指令，我們前端程式設計師只需要關心資料的業務邏輯，不再關心DOM是如何渲染的了】）

  • 在Vue中，一個核心的概念，就是讓使用者不再操作DOM元素，解放了使用者的雙手，讓程式設計師可以更多的時間去關注業務邏輯；

  • 增強自己就業時候的競爭力

  • 人無我有，人有我優
  • 你平時不忙的時候，都在幹嘛？

框架和庫的區別

  • 框架：是一套完整的解決方案；對專案的侵入性較大，專案如果需要更換框架，則需要重新架構整個專案。
  • node 中的 express；
  • 庫（外掛）：提供某一個小功能，對專案的侵入性較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫實現需求。
    1. 從Jquery 切換到 Zepto
    1. 從 EJS 切換到 art-template

Node（後端）中的 MVC 與 前端中的 MVVM 之間的區別

  • MVC 是後端的分層開發概念；

  • MVVM是前端檢視層的概念，主要關注於 檢視層分離，也就是說：MVVM把前端的檢視層，分為了 三部分 Model, View , VM ViewModel

  • 為什麼有了MVC還要有MVVM

Vue.js 基本程式碼 和 MVVM 之間的對應關係

Vue之 - 基本的程式碼結構和插值表示式、v-cloak

Vue指令之v-text和v-html

Vue指令之v-bind的三種用法

  1. 直接使用指令v-bind

  2. 使用簡化指令:

  3. 在繫結的時候，拼接繫結內容：:title="btnTitle + ', 這是追加的內容'"

Vue指令之v-on和跑馬燈效果

跑馬燈效果

  1. HTML結構：
<div id="app">

    <p>{{info}}</p>

    <input type="button" value="開啟" v-on:click="go">

    <input type="button" value="停止" v-on:click="stop">

  </div>
  1. Vue例項：
	// 建立 Vue 例項，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        info: '猥瑣發育，別浪~！',

        intervalId: null

      },

      methods: {

        go() {

          // 如果當前有定時器在執行，則直接return

          if (this.intervalId != null) {

            return;

          }

          // 開始定時器

          this.intervalId = setInterval(() => {

            this.info = this.info.substring(1) + this.info.substring(0, 1);

          }, 500);

        },

        stop() {

          clearInterval(this.intervalId);

        }

      }

    });

Vue指令之v-on的縮寫和事件修飾符

事件修飾符：

  • .stop 阻止冒泡

  • .prevent 阻止預設事件

  • .capture 新增事件偵聽器時使用事件捕獲模式

  • .self 只當事件在該元素本身（比如不是子元素）觸發時觸發回撥

  • .once 事件只觸發一次

Vue指令之v-model和雙向資料繫結

簡易計算器案例

  1. HTML 程式碼結構
  <div id="app">

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

    <select v-model="opt">

      <option value="0">+</option>

      <option value="1">-</option>

      <option value="2">*</option>

      <option value="3">÷</option>

    </select>

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

    <input type="button" value="=" v-on:click="getResult">

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

  </div>
  1. Vue例項程式碼：
	// 建立 Vue 例項，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        n1: 0,

        n2: 0,

        result: 0,

        opt: '0'

      },

      methods: {

        getResult() {

          switch (this.opt) {

            case '0':

              this.result = parseInt(this.n1) + parseInt(this.n2);

              break;

            case '1':

              this.result = parseInt(this.n1) - parseInt(this.n2);

              break;

            case '2':

              this.result = parseInt(this.n1) * parseInt(this.n2);

              break;

            case '3':

              this.result = parseInt(this.n1) / parseInt(this.n2);

              break;

          }

        }

      }

    });

在Vue中使用樣式

使用class樣式

  1. 陣列
<h1 :class="['red', 'thin']">這是一個邪惡的H1</h1>
  1. 陣列中使用三元表示式
<h1 :class="['red', 'thin', isactive?'active':'']">這是一個邪惡的H1</h1>
  1. 陣列中巢狀物件
<h1 :class="['red', 'thin', {'active': isactive}]">這是一個邪惡的H1</h1>
  1. 直接使用物件
<h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個邪惡的H1</h1>

使用內聯樣式

  1. 直接在元素上通過 :style 的形式，書寫樣式物件
<h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1>
  1. 將樣式物件，定義到 data 中，並直接引用到 :style 中
  • 在data上定義樣式：
data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
  • 在元素中，通過屬性繫結的形式，將樣式物件應用到元素中：
<h1 :style="h1StyleObj">這是一個善良的H1</h1>
  1. 在 :style 中通過陣列，引用多個 data 上的樣式物件
  • 在data上定義樣式：
data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}
  • 在元素中，通過屬性繫結的形式，將樣式物件應用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">這是一個善良的H1</h1>

Vue指令之v-for和key屬性

  1. 迭代陣列
<ul>
  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年齡：{{item.age}}</li>
</ul>
  1. 迭代物件中的屬性
	<!-- 迴圈遍歷物件身上的屬性 -->

    <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
  1. 迭代數字
<p v-for="i in 10">這是第 {{i}} 個P標籤</p>

2.2.0+ 的版本里，當在元件中使用 v-for 時，key 現在是必須的。

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它預設用 “就地複用” 策略。如果資料項的順序被改變，Vue將不是移動 DOM 元素來匹配資料項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。

Vue指令之v-if和v-show

一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在執行時條件不大可能改變 v-if 較好。

品牌管理案例

新增新品牌

刪除品牌

根據條件篩選品牌

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

filterBy - 指令

<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>
  1. 在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 - 翻牆安裝方式 - 推薦

過濾器

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

私有過濾器

  1. HTML元素：
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
  1. 私有 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中自定義鍵盤修飾符

  1. 通過Vue.config.keyCodes.名稱 = 按鍵值來自定義案件修飾符的別名：
Vue.config.keyCodes.f2 = 113;
  1. 使用自定義的按鍵修飾符：
<input type="text" v-model="name" @keyup.f2="add">

自定義指令

  1. 自定義全域性和區域性的 自定義指令：
    // 自定義全域性指令 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;

        }

      }
  1. 自定義指令的使用方式：
<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>

相關文章

  1. vue.js 1.x 文件
  2. vue.js 2.x 文件
  3. String.prototype.padStart(maxLength, fillString)
  4. js 裡面的鍵盤事件對應的鍵碼
  5. Vue.js雙向繫結的實現原理

相關文章