Vue基礎(chǔ)一

Vue.js - Day1

課程介紹

前5天： 都在學(xué)習(xí)Vue基本的語法和概念；打包工具 Webpack , Gulp
后5天： 以項目驅(qū)動教學(xué)；

什么是Vue.js

  • Vue.js 是目前最火的一個前端框架，React是最流行的一個前端框架（React除了開發(fā)網(wǎng)站，還可以開發(fā)手機App， Vue語法也是可以用于進(jìn)行手機App開發(fā)的，需要借助于Weex）

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

  • Vue.js 是一套構(gòu)建用戶界面的框架，只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。（Vue有配套的第三方類庫，可以整合起來做大型項目的開發(fā)）

  • 前端的主要工作？主要負(fù)責(zé)MVC中的V這一層；主要工作就是和界面打交道，來制作前端頁面效果；

為什么要學(xué)習(xí)流行框架

  • 企業(yè)為了提高開發(fā)效率：在企業(yè)中，時間就是效率，效率就是金錢；
    • 企業(yè)中，使用框架，能夠提高開發(fā)的效率；
  • 提高開發(fā)效率的發(fā)展歷程：原生JS -> Jquery之類的類庫 -> 前端模板引擎 -> Angular.js / Vue.js（能夠幫助我們減少不必要的DOM操作；提高渲染效率；雙向數(shù)據(jù)綁定的概念【通過框架提供的指令，我們前端程序員只需要關(guān)心數(shù)據(jù)的業(yè)務(wù)邏輯，不再關(guān)心DOM是如何渲染的了】）
  • 在Vue中，一個核心的概念，就是讓用戶不再操作DOM元素，解放了用戶的雙手，讓程序員可以更多的時間去關(guān)注業(yè)務(wù)邏輯；
  • 增強自己就業(yè)時候的競爭力
    • 人無我有，人有我優(yōu)
    • 你平時不忙的時候，都在干嘛？

框架和庫的區(qū)別

  • 框架：是一套完整的解決方案；對項目的侵入性較大，項目如果需要更換框架，則需要重新架構(gòu)整個項目。

    • node 中的 express；
  • 庫（插件）：提供某一個小功能，對項目的侵入性較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫實現(xiàn)需求。
      1. 從Jquery 切換到 Zepto
      1. 從 EJS 切換到 art-template

Node（后端）中的 MVC 與 前端中的 MVVM 之間的區(qū)別

  • MVC 是后端的分層開發(fā)概念；

  • MVVM是前端視圖層的概念，主要關(guān)注于 視圖層分離，也就是說：MVVM把前端的視圖層，分為了 三部分 Model, View , VM ViewModel

  • 為什么有了MVC還要有MVVM

Vue.js 基本代碼 和 MVVM 之間的對應(yīng)關(guān)系

01.MVC和MVVM的關(guān)系圖解.png

Vue框架之基本的代碼結(jié)構(gòu)

  • 導(dǎo)入Vue的包
  • 創(chuàng)建一個Vue的實例
  • 將Vue實例與控制的容器相關(guān)聯(lián)，也就是設(shè)置vue實例屬性的el:'#app' 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 導(dǎo)入Vue的包 -->
  <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
  <!-- 將來 new 的Vue實例，會控制這個 元素中的所有內(nèi)容 -->
  <!-- Vue 實例所控制的這個元素區(qū)域，就是我們的 V  -->
  <div id="app">
    <p>{{ msg }}</p>
  </div>
  <script>
    // 2. 創(chuàng)建一個Vue的實例
    //  當(dāng)我們導(dǎo)入包之后，在瀏覽器的內(nèi)存中，就多了一個 Vue 構(gòu)造函數(shù)
    //  注意：我們 new 出來的這個 vm 對象，就是我們 MVVM中的 VM調(diào)度者
    var vm = new Vue({
      el: '#app',  // 表示，當(dāng)前我們 new 的這個 Vue 實例，要控制頁面上的哪個區(qū)域，這里的 data 就是 MVVM中的 Model，專門用來保存 每個頁面的數(shù)據(jù)的
      data: { // data 屬性中，存放的是 el 中要用到的數(shù)據(jù)
        msg: '歡迎學(xué)習(xí)Vue' // 通過 Vue 提供的指令，很方便的就能把數(shù)據(jù)渲染到頁面上，程序員不再手動操作DOM元素了【前端的Vue之類的框架，不提倡我們?nèi)ナ謩硬僮鱀OM元素了】
      }
    })
  </script>
</body>
</html>

Vue指令之插值表達(dá){{data}}加v-cloak指令

這個指令保持在元素上直到關(guān)聯(lián)實例結(jié)束編譯。和 CSS 規(guī)則如[v-cloak] { display: none }一起用時，這個指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實例準(zhǔn)備完畢。通俗的說：使用 v-cloak 能夠解決 插值表達(dá)式閃爍的問題

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

Vue指令之v-text和v-html

默認(rèn) v-text 是沒有閃爍問題的,v-text會覆蓋元素中原本的內(nèi)容，但是 插值表達(dá)式 只會替換自己的這個占位符，不會 把整個元素的內(nèi)容清空 v-html同樣也會覆蓋元素中原本的內(nèi)容，直接將html代碼輸出

<div v-text="msg">dfafda</div>
<div v-html="msg2">1212112</div>

var vm = new Vue({
  el: '#app',
  data: {
        msg: '123',
        msg2: '<h1>哈哈，我是一個大大的H1</h1>'
      }

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

v-bind是 Vue中，提供的用于綁定屬性的指令

  1. 直接使用指令v-bind

  2. 使用簡化指令:

  3. 在綁定的時候，拼接綁定內(nèi)容：:title="btnTitle + ', 這是追加的內(nèi)容'"

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

Vue 中提供了 v-on事件綁定機制

  1. 第一種用法
<input type="button" value="按鈕" v-on:click="alert('hello')">
  1. 第二種用法(縮寫）
<input type="button" value="按鈕" @click="show"> //show是methods中的事件方法

跑馬燈效果

  1. HTML結(jié)構(gòu)：

<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實例：
    // 注意：在 VM實例中，如果想要獲取 data 上的數(shù)據(jù)，或者 想要調(diào)用 methods 中的 方法，必須通過 this.數(shù)據(jù)屬性名  或  this.方法名 來進(jìn)行訪問，這里的this，就表示 我們 new 出來的  VM 實例對象
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '猥瑣發(fā)育，別浪~~！',
        intervalId: null // 在data上定義 定時器Id
      },
      methods: {
        lang() {
          // console.log(this.msg)
          // 獲取到頭的第一個字符

          if (this.intervalId != null) return;

          //使用定時器的時候，要注意this的指向問題 使用箭頭函數(shù)可以使this指向當(dāng)前上下文環(huán)境
          this.intervalId = setInterval(() => {
            var start = this.msg.substring(0, 1)
            // 獲取到 后面的所有字符
            var end = this.msg.substring(1)
            // 重新拼接得到新的字符串，并賦值給 this.msg
            this.msg = end + start
          }, 400)

          // 注意： VM實例，會監(jiān)聽自己身上 data 中所有數(shù)據(jù)的改變，只要數(shù)據(jù)一發(fā)生變化，就會自動把 最新的數(shù)據(jù)，從data 上同步到頁面中去；【好處：程序員只需要關(guān)心數(shù)據(jù)，不需要考慮如何重新渲染DOM頁面】
        },
        stop() { // 停止定時器
          clearInterval(this.intervalId)
          // 每當(dāng)清除了定時器之后，需要重新把 intervalId 置為 null
          this.intervalId = null;
        }
      }
    })

    // 分析：
    // 1. 給 【浪起來】 按鈕，綁定一個點擊事件   v-on   @
    // 2. 在按鈕的事件處理函數(shù)中，寫相關(guān)的業(yè)務(wù)邏輯代碼：拿到 msg 字符串，然后 調(diào)用 字符串的 substring 來進(jìn)行字符串的截取操作，把 第一個字符截取出來，放到最后一個位置即可；
    // 3. 為了實現(xiàn)點擊下按鈕，自動截取的功能，需要把 2 步驟中的代碼，放到一個定時器中去；

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

事件修飾符：

  • .stop 阻止冒泡

  • .prevent 阻止默認(rèn)事件

  • .capture 添加事件偵聽器時使用事件捕獲模式

  • .self 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時觸發(fā)回調(diào);只會阻止自己身上冒泡行為的觸發(fā)，并不會真正阻止 冒泡的行為

  • .once 只觸發(fā)一次事件處理函數(shù)

Vue指令之v-model和雙向數(shù)據(jù)綁定

v-bind 只能實現(xiàn)數(shù)據(jù)的單向綁定，從 M 自動綁定到 V， 無法實現(xiàn)數(shù)據(jù)的雙向綁定；使用 v-model指令，可以實現(xiàn) 表單元素和 Model 中數(shù)據(jù)的雙向數(shù)據(jù)綁定;注意： v-model 只能運用在 表單元素中

簡易計算器案例

  1. HTML 代碼結(jié)構(gòu)

  <div id="app">
    <input type="text" v-model="n1">

    <select v-model="opt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>

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

    <input type="button" value="=" @click="calc">

    <input type="text" v-model="result">
  </div>
  1. Vue實例代碼：
// 創(chuàng)建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        n1: 0,
        n2: 0,
        result: 0,
        opt: '+'
      },
      methods: {
        calc() { // 計算器算數(shù)的方法  
          // 邏輯：
          switch (this.opt) {
            case '+':
              this.result = parseInt(this.n1) + parseInt(this.n2)
              break;
            case '-':
              this.result = parseInt(this.n1) - parseInt(this.n2)
              break;
            case '*':
              this.result = parseInt(this.n1) * parseInt(this.n2)
              break;
            case '/':
              this.result = parseInt(this.n1) / parseInt(this.n2)
              break;
          } 

          // 注意：這是投機取巧的方式，正式開發(fā)中，盡量少用 使用eval()去執(zhí)行代碼
          //  var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
          //   this.result = eval(codeStr)
        }
      }
    });

在Vue中使用樣式

使用class樣式

  1. 數(shù)組
<h1 :class="['red', 'thin']">這是一個邪惡的H1</h1>
  1. 數(shù)組中使用三元表達(dá)式
<h1 :class="['red', 'thin', isactive?'active':'']">這是一個邪惡的H1</h1>
  1. 數(shù)組中嵌套對象
<h1 :class="['red', 'thin', {'active': isactive}]">這是一個邪惡的H1</h1>
  1. 直接使用對象
<h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個邪惡的H1</h1>

使用內(nèi)聯(lián)樣式

  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' }
}
  • 在元素中，通過屬性綁定的形式，將樣式對象應(yīng)用到元素中：
<h1 :style="h1StyleObj">這是一個善良的H1</h1>
  1. 在 :style 中通過數(shù)組，引用多個 data 上的樣式對象
  • 在data上定義樣式：
data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}
  • 在元素中，通過屬性綁定的形式，將樣式對象應(yīng)用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">這是一個善良的H1</h1>

Vue指令之v-for和key屬性

  1. 迭代數(shù)組
<ul>
  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年齡：{{item.age}}</li>
</ul>
  1. 迭代對象中的屬性

    <!-- 循環(huán)遍歷對象身上的屬性 -->

    <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
  1. 迭代數(shù)字

<p v-for="i in 10">這是第 {{i}} 個P標(biāo)簽</p>
  1. 綁定key屬性

2.2.0+ 的版本里，當(dāng)在組件中使用 v-for 時，key 現(xiàn)在是必須的。為了給 Vue 一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項提供一個唯一 key 屬性。

<!-- 注意： v-for 循環(huán)的時候，key 屬性只能使用 number獲取string -->
<!-- 注意： key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定 key 的值 -->
<!-- 在組件中，使用v-for循環(huán)的時候，或者在一些特殊情況中，如果 v-for 有問題，必須 在使用 v-for 的同時，指定 唯一的 字符串/數(shù)字 類型 :key 值 -->
<p v-for="item in list" :key="item.id">
 <input type="checkbox">{{item.id}} --- {{item.name}}
</p>

// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: '李斯' },
          { id: 2, name: '嬴政' },
          { id: 3, name: '趙高' },
          { id: 4, name: '韓非' },
          { id: 5, name: '荀子' }
        ]
      },
      methods: {
        add() { // 添加方法
          this.list.unshift({ id: this.id, name: this.name })
        }
      }
    });

當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認(rèn)用 “就地復(fù)用” 策略。如果數(shù)據(jù)項的順序被改變，Vue將不是移動 DOM 元素來匹配數(shù)據(jù)項的順序， 而是簡單復(fù)用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。

Vue指令之v-if和v-show

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

品牌管理案例

添加新品牌

刪除品牌

根據(jù)條件篩選品牌

  1. 1.x 版本中的filterBy指令，在2.x中已經(jīng)被廢除：

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版本中手動實現(xiàn)篩選的方式：
  • 篩選框綁定到 VM 實例中的 searchName 屬性：

<hr> 輸入篩選名稱：

<input type="text" v-model="searchName">
  • 在使用 v-for 指令循環(huán)每一行數(shù)據(jù)的時候，不再直接 item in list，而是 in 一個 過濾的methods 方法，同時，把過濾條件searchName傳遞進(jìn)去：

<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 過濾方法中，使用 數(shù)組的 filter 方法進(jìn)行過濾：

search(name) {

  return this.list.filter(x => {

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

  });

}

Vue調(diào)試工具vue-devtools的安裝步驟和使用

Vue.js devtools - 翻墻安裝方式 - 推薦

過濾器

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

私有過濾器

  1. HTML元素：

<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
  1. 私有 filters 定義方式：

filters: { // 私有局部過濾器，只能在 當(dāng)前 VM 對象所控制的 View 區(qū)域進(jìn)行使用

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

      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');



      // 如果 傳遞進(jìn)來的字符串類型，轉(zhuǎn)為小寫之后，等于 yyyy-mm-dd，那么就返回 年-月-日

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

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

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

      } 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}-$u0z1t8os ${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');



  // 如果 傳遞進(jìn)來的字符串類型，轉(zhuǎn)為小寫之后，等于 yyyy-mm-dd，那么就返回 年-月-日

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

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

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

  } 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}-$u0z1t8os ${hh}:${mm}:${ss}`;

  }

});

注意：當(dāng)有局部和全局兩個名稱相同的過濾器時候，會以就近原則進(jìn)行調(diào)用，即：局部過濾器優(yōu)先于全局過濾器被調(diào)用！

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

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 表示被綁定元素插入父節(jié)點時調(diào)用

        el.focus();

      }

    });



    // 自定義局部指令 v-color 和 v-font-weight，為綁定的元素設(shè)置指定的字體顏色 和 字體粗細(xì)：

      directives: {

        color: { // 為元素設(shè)置指定的字體顏色

          bind(el, binding) {

            el.style.color = binding.value;

          }

        },

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

          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>

相關(guān)文章

  1. vue.js 1.x 文檔
  2. vue.js 2.x 文檔
  3. String.prototype.padStart(maxLength, fillString)
  4. js 里面的鍵盤事件對應(yīng)的鍵碼
  5. Vue.js雙向綁定的實現(xiàn)原理
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容