第一章 Vue 初步認(rèn)識(shí)
什么是Vue.js
Vue.js 是目前最火的一個(gè)前端框架囤耳，React是最流行的一個(gè)前端框架（React除了開發(fā)網(wǎng)站，還可以開發(fā)手機(jī)App偶芍， Vue語(yǔ)法也是可以用于進(jìn)行手機(jī)App開發(fā)的椎麦，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js显熏、React.js 一起仔沿，并成為前端三大主流框架碾局！
Vue.js 是一套構(gòu)建用戶界面的框架蝗碎，只關(guān)注視圖層眠菇，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合清钥。（Vue有配套的第三方類庫(kù)琼锋，可以整合起來(lái)做大型項(xiàng)目的開發(fā)）
前端的主要工作？主要負(fù)責(zé)MVC中的V這一層祟昭；主要工作就是和界面打交道缕坎，來(lái)制作前端頁(yè)面效果；
為什么要學(xué)習(xí)流行框架
- 企業(yè)為了提高開發(fā)效率：在企業(yè)中篡悟，時(shí)間就是效率谜叹，效率就是金錢；
- 企業(yè)中搬葬，使用框架荷腊，能夠提高開發(fā)的效率；
- 提高開發(fā)效率的發(fā)展歷程：原生JS -> Jquery之類的類庫(kù) -> 前端模板引擎 -> Angular.js / Vue.js（能夠幫助我們減少不必要的DOM操作急凰；提高渲染效率女仰；雙向數(shù)據(jù)綁定的概念【通過框架提供的指令，我們前端程序員只需要關(guān)心數(shù)據(jù)的業(yè)務(wù)邏輯抡锈，不再關(guān)心DOM是如何渲染的了】）
- 在Vue中疾忍，一個(gè)核心的概念，就是讓用戶不再操作DOM元素床三，解放了用戶的雙手一罩，讓程序員可以更多的時(shí)間去關(guān)注業(yè)務(wù)邏輯；
- 增強(qiáng)自己就業(yè)時(shí)候的競(jìng)爭(zhēng)力
- 人無(wú)我有撇簿，人有我優(yōu)
- 你平時(shí)不忙的時(shí)候聂渊，都在干嘛差购？
框架和庫(kù)的區(qū)別
- 框架：是一套完整的解決方案；對(duì)項(xiàng)目的侵入性較大汉嗽，項(xiàng)目如果需要更換框架欲逃，則需要重新架構(gòu)整個(gè)項(xiàng)目。
- node 中的 express诊胞；
- 庫(kù)（插件）：提供某一個(gè)小功能暖夭，對(duì)項(xiàng)目的侵入性較小，如果某個(gè)庫(kù)無(wú)法完成某些需求撵孤，可以很容易切換到其它庫(kù)實(shí)現(xiàn)需求迈着。
- 從Jquery 切換到 Zepto
- 從 EJS 切換到 art-template
Node（后端）中的 MVC 與 前端中的 MVVM 之間的區(qū)別
MVC 是后端的分層開發(fā)概念；
MVVM是前端視圖層的概念邪码，主要關(guān)注于 視圖層分離裕菠，也就是說：MVVM把前端的視圖層，分為了 三部分 Model, View , VM ViewModel
為什么有了MVC還要有MVVM
Vue.js 基本代碼 和 MVVM 之間的對(duì)應(yīng)關(guān)系
Vue之 - 基本的代碼結(jié)構(gòu)和插值表達(dá)式闭专、v-cloak
Vue指令之v-text和v-html
Vue指令之v-bind的三種用法
直接使用指令
v-bind使用簡(jiǎn)化指令
:在綁定的時(shí)候奴潘，拼接綁定內(nèi)容：
:title="btnTitle + ', 這是追加的內(nèi)容'"
好啦，Vue的簡(jiǎn)單介紹到這里了影钉，開始實(shí)戰(zhàn)Vue了画髓，還是以最基礎(chǔ)的demo來(lái)學(xué)習(xí)理解Vue相關(guān)的知識(shí)點(diǎn)吧！
Vue指令之v-on和跑馬燈效果
跑馬燈效果
- 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>
- Vue實(shí)例：
// 創(chuàng)建 Vue 實(shí)例平委，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
info: '猥瑣發(fā)育奈虾，別浪~！',
intervalId: null
},
methods: {
go() {
// 如果當(dāng)前有定時(shí)器在運(yùn)行廉赔，則直接return
if (this.intervalId != null) {
return;
}
// 開始定時(shí)器
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 添加事件偵聽器時(shí)使用事件捕獲模式
.self 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào)
.once 事件只觸發(fā)一次
Vue指令之v-model和雙向數(shù)據(jù)綁定
簡(jiǎn)易計(jì)算器案例
- 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>
- Vue實(shí)例代碼：
// 創(chuàng)建 Vue 實(shí)例肉微，得到 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樣式
- 數(shù)組
<h1 :class="['red', 'thin']">這是一個(gè)邪惡的H1</h1>
- 數(shù)組中使用三元表達(dá)式
<h1 :class="['red', 'thin', isactive?'active':'']">這是一個(gè)邪惡的H1</h1>
- 數(shù)組中嵌套對(duì)象
<h1 :class="['red', 'thin', {'active': isactive}]">這是一個(gè)邪惡的H1</h1>
- 直接使用對(duì)象
<h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個(gè)邪惡的H1</h1>
使用內(nèi)聯(lián)樣式
- 直接在元素上通過
:style的形式，書寫樣式對(duì)象
<h1 :style="{color: 'red', 'font-size': '40px'}">這是一個(gè)善良的H1</h1>
- 將樣式對(duì)象蜡塌，定義到
data中碉纳，并直接引用到:style中
- 在data上定義樣式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
- 在元素中，通過屬性綁定的形式馏艾，將樣式對(duì)象應(yīng)用到元素中：
<h1 :style="h1StyleObj">這是一個(gè)善良的H1</h1>
- 在
:style中通過數(shù)組劳曹，引用多個(gè)data上的樣式對(duì)象
- 在data上定義樣式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
- 在元素中，通過屬性綁定的形式琅摩，將樣式對(duì)象應(yīng)用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">這是一個(gè)善良的H1</h1>
Vue指令之v-for和key屬性
- 迭代數(shù)組
<ul>
<li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年齡：{{item.age}}</li>
</ul>
- 迭代對(duì)象中的屬性
<!-- 循環(huán)遍歷對(duì)象身上的屬性 -->
<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
- 迭代數(shù)字
<p v-for="i in 10">這是第 {{i}} 個(gè)P標(biāo)簽</p>
2.2.0+ 的版本里厚者，當(dāng)在組件中使用 v-for 時(shí)，key 現(xiàn)在是必須的迫吐。
當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時(shí)，它默認(rèn)用 “就地復(fù)用” 策略账忘。如果數(shù)據(jù)項(xiàng)的順序被改變志膀，Vue將不是移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序熙宇， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素溉浙。
為了給 Vue 一個(gè)提示烫止，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素戳稽，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性馆蠕。
Vue指令之v-if和v-show
一般來(lái)說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗惊奇。因此互躬，如果需要頻繁切換 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變 v-if 較好颂郎。
品牌管理案例
添加新品牌
刪除品牌
根據(jù)條件篩選品牌
- 1.x 版本中的filterBy指令吼渡，在2.x中已經(jīng)被廢除：
<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.x版本中手動(dòng)實(shí)現(xiàn)篩選的方式：
- 篩選框綁定到 VM 實(shí)例中的
searchName屬性：
<hr> 輸入篩選名稱：
<input type="text" v-model="searchName">
- 在使用
v-for指令循環(huán)每一行數(shù)據(jù)的時(shí)候，不再直接item in list乓序，而是in一個(gè) 過濾的methods 方法寺酪，同時(shí)，把過濾條件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 允許你自定義過濾器寄雀，可被用作一些常見的文本格式化。過濾器可以用在兩個(gè)地方：mustache 插值和 v-bind 表達(dá)式盒犹。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符指示湿故；
私有過濾器
- HTML元素：
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
- 私有
filters定義方式：
filters: { // 私有局部過濾器阿趁，只能在 當(dāng)前 VM 對(duì)象所控制的 View 區(qū)域進(jìn)行使用
dataFormat(input, pattern = "") { // 在參數(shù)列表中 通過 pattern="" 來(lái)指定形參默認(rèn)值，防止報(bào)錯(cuò)
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)來(lái)的字符串類型坛猪，轉(zhuǎn)為小寫之后脖阵，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否則墅茉，就返回 年-月-日 時(shí)：分：秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-$cwg6e4g`;
} else {
// 獲取時(shí)分秒
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}-$ouguyui ${hh}:${mm}:${ss}`;
}
}
}
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')來(lái)填充字符串命黔；
全局過濾器
// 定義一個(gè)全局過濾器
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)來(lái)的字符串類型，轉(zhuǎn)為小寫之后就斤，等于 yyyy-mm-dd悍募，那么就返回 年-月-日
// 否則，就返回 年-月-日 時(shí)：分：秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-$y46oqm6`;
} else {
// 獲取時(shí)分秒
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}-$siwwykk ${hh}:${mm}:${ss}`;
}
});
注意：當(dāng)有局部和全局兩個(gè)名稱相同的過濾器時(shí)候洋机，會(huì)以就近原則進(jìn)行調(diào)用坠宴，即：局部過濾器優(yōu)先于全局過濾器被調(diào)用！
鍵盤修飾符以及自定義鍵盤修飾符
1.x中自定義鍵盤修飾符【了解即可】
Vue.directive('on').keyCodes.f2 = 113;
2.x中自定義鍵盤修飾符
- 通過
Vue.config.keyCodes.名稱 = 按鍵值來(lái)自定義案件修飾符的別名：
Vue.config.keyCodes.f2 = 113;
- 使用自定義的按鍵修飾符：
<input type="text" v-model="name" @keyup.f2="add">
自定義指令
- 自定義全局和局部的 自定義指令：
// 自定義全局指令 v-focus绷旗，為綁定的元素自動(dòng)獲取焦點(diǎn)：
Vue.directive('focus', {
inserted: function (el) { // inserted 表示被綁定元素插入父節(jié)點(diǎn)時(shí)調(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) { // 自定義指令的簡(jiǎn)寫形式副砍，等同于定義了 bind 和 update 兩個(gè)鉤子函數(shù)
el.style.fontWeight = binding2.value;
}
}
- 自定義指令的使用方式：
<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>
