超詳細解毒Vue · 前端知識備忘錄

# Vue.js - Day1 ***** [TOC] ## 課程介紹前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 - 2. 從 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> ``` 2. 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> ``` 2. 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> ``` 2. 數組中使用三元表達式 ``` <h1 :class="['red', 'thin', isactive?'active':'']">這是一個邪惡的H1</h1> ``` 3. 數組中嵌套對象 ``` <h1 :class="['red', 'thin', {'active': isactive}]">這是一個邪惡的H1</h1> ``` 4. 直接使用對象 ``` <h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個邪惡的H1</h1> ``` ### 使用內聯樣式 1. 直接在元素上通過 `:style` 的形式，書寫樣式對象 ``` <h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1> ``` 2. 將樣式對象，定義到 `data` 中，并直接引用到 `:style` 中 + 在data上定義樣式： ``` data: { h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' } } ``` + 在元素中，通過屬性綁定的形式，將樣式對象應用到元素中： ``` <h1 :style="h1StyleObj">這是一個善良的H1</h1> ``` 3. 在 `: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> ``` 2. 迭代對象中的屬性 ```  <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div> ``` 3. 迭代數字 ``` <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 - 指令](https://v1-cn.vuejs.org/api/#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> ``` 2. 在2.x版本中[手動實現篩選的方式](https://cn.vuejs.org/v2/guide/list.html#顯示過濾-排序結果)： + 篩選框綁定到 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 - 翻墻安裝方式 - 推薦](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN) ## 過濾器概念：Vue.js 允許你自定義過濾器，**可被用作一些常見的文本格式化**。過濾器可以用在兩個地方：**mustache 插值和 v-bind 表達式**。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符指示； ### 私有過濾器 1. HTML元素： ``` <td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td> ``` 2. 私有 `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中自定義鍵盤修飾符](https://cn.vuejs.org/v2/guide/events.html#鍵值修飾符) 1. 通過`Vue.config.keyCodes.名稱 = 按鍵值`來自定義案件修飾符的別名： ``` Vue.config.keyCodes.f2 = 113; ``` 2. 使用自定義的按鍵修飾符： ``` <input type="text" v-model="name" @keyup.f2="add"> ``` ## [自定義指令](https://cn.vuejs.org/v2/guide/custom-directive.html) 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; } } ``` 2. 自定義指令的使用方式： ``` <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 文檔](https://v1-cn.vuejs.org/) 2. [vue.js 2.x 文檔](https://cn.vuejs.org/) 3. [String.prototype.padStart(maxLength, fillString)](http://www.css88.com/archives/7715) 4. [js 里面的鍵盤事件對應的鍵碼](http://www.cnblogs.com/wuhua1/p/6686237.html) 5. [Vue.js雙向綁定的實現原理](http://www.cnblogs.com/kidney/p/6052935.html)