爲什麼要學Vue,Vue.js是什麼,開始學Vue,Vue的基礎指令,自定義指令

Vue.js

什麼是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-textv-html

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

  1. 直接使用指令v-bind

  2. 使用簡化指令:

  3. 在綁定的時候,拼接綁定內容::title="btnTitle + ', 這是追加的內容'"

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

使用Vue實現跑馬燈效果

  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="+">+</option>

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

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

      <option value="/">÷</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: '+'
    },
    methods: {
        calc() {//計算器 算數的方法
            //邏輯 :
            switch (this.opt) {
                 case '+':
                     this.result = parseFloat(this.n1) + parseFloat(this.n2)
                     break;
                 case '-':
                     this.result = parseFloat(this.n1) * parseFloat(this.n2)
                     break;
                 case '*':
                     this.result = parseFloat(this.n1) * parseFloat(this.n2)    
                     break;
                 case '/':
                     this.result = parseFloat(this.n1) / parseFloat(this.n2)
                     break;
             }
            //投機取巧  正是開發中 儘量少用
            /*var codeStr = 'parseFloat(this.n1)' + this.opt + 'parseFloat(this.n2)'
            this.result = eval(codeStr);*/
        }
    }
});

在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-forkey屬性

  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-ifv-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">
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章