# Vue.js
### 什么是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
? - 2. 從 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)系
## Vue之 - `基本的代碼結(jié)構(gòu)`和`插值表達(dá)式`、`v-cloak`
## Vue指令之`v-text`和`v-html`
## Vue指令之`v-bind`的三種用法
1. 直接使用指令`v-bind`
2. 使用簡化指令`:`
3. 在綁定的時候，拼接綁定內(nèi)容：`:title="btnTitle + ', 這是追加的內(nèi)容'"`
## Vue指令之`v-on`和`跑馬燈效果`
### 跑馬燈效果
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>
```
2. Vue實例：
```
// 創(chuàng)建 Vue 實例，得到 ViewModel
? ? var vm = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ? info: '猥瑣發(fā)育，別浪~！',
? ? ? ? intervalId: null
? ? ? },
? ? ? methods: {
? ? ? ? go() {
? ? ? ? ? // 如果當(dāng)前有定時器在運行，則直接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? ? 阻止默認(rèn)事件
+ .capture? ? 添加事件偵聽器時使用事件捕獲模式
+ .self? ? ? 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時觸發(fā)回調(diào)
+ .once? ? ? 事件只觸發(fā)一次
## Vue指令之`v-model`和`雙向數(shù)據(jù)綁定`
## 簡易計算器案例
1. HTML 代碼結(jié)構(gòu)
```
? <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實例代碼：
```
// 創(chuàng)建 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. 數(shù)組
```
<h1 :class="['red', 'thin']">這是一個邪惡的H1</h1>
```
2. 數(shù)組中使用三元表達(dá)式
```
<h1 :class="['red', 'thin', isactive?'active':'']">這是一個邪惡的H1</h1>
```
3. 數(shù)組中嵌套對象
```
<h1 :class="['red', 'thin', {'active': isactive}]">這是一個邪惡的H1</h1>
```
4. 直接使用對象
```
<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>
```
2. 將樣式對象，定義到 `data` 中，并直接引用到 `:style` 中
+ 在data上定義樣式：
```
data: {
? ? ? ? h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
```
+ 在元素中，通過屬性綁定的形式，將樣式對象應(yīng)用到元素中：
```
<h1 :style="h1StyleObj">這是一個善良的H1</h1>
```
3. 在 `: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>
```
2. 迭代對象中的屬性
```
<!-- 循環(huán)遍歷對象身上的屬性 -->
? ? <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
```
3. 迭代數(shù)字
```
<p v-for="i in 10">這是第 {{i}} 個P標(biāo)簽</p>
```
> 2.2.0+ 的版本里，**當(dāng)在組件中使用** v-for 時，key 現(xiàn)在是必須的。
當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認(rèn)用 “**就地復(fù)用**” 策略。如果數(shù)據(jù)項的順序被改變，Vue將**不是移動 DOM 元素來匹配數(shù)據(jù)項的順序**， 而是**簡單復(fù)用此處每個元素**，并且確保它在特定索引下顯示已被渲染過的每個元素。
為了給 Vue 一個提示，**以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素**，你需要為每項提供一個唯一 key 屬性。
## Vue指令之`v-if`和`v-show`
> 一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好。
## 品牌管理案例
### 添加新品牌
### 刪除品牌
### 根據(jù)條件篩選品牌
1. 1.x 版本中的filterBy指令，在2.x中已經(jīng)被廢除：
[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版本中[手動實現(xiàn)篩選的方式](https://cn.vuejs.org/v2/guide/list.html#顯示過濾-排序結(jié)果)：
+ 篩選框綁定到 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 - 翻墻安裝方式 - 推薦](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN)
## 過濾器
概念：Vue.js 允許你自定義過濾器，**可被用作一些常見的文本格式化**。過濾器可以用在兩個地方：**mustache 插值和 v-bind 表達(dá)式**。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符指示；
### 私有過濾器
1. HTML元素：
```
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
```
2. 私有 `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中自定義鍵盤修飾符](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 表示被綁定元素插入父節(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;
? ? ? ? }
? ? ? }
```
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>
```
## 相關(guān)文章
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 里面的鍵盤事件對應(yīng)的鍵碼](http://www.cnblogs.com/wuhua1/p/6686237.html)
5. [Vue.js雙向綁定的實現(xiàn)原理](http://www.cnblogs.com/kidney/p/6052935.html)
