品牌列表案例的基礎(chǔ)部分
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="lib/bootstrap.css">
<script src="lib/vue-2.6.10.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:
<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name" @keyup.enter="add">
<!--按鍵修飾符-->
</label>
<!--在vue中募闲，使用事件綁定機(jī)制，為元素指定處理函數(shù)的時(shí)候找岖，如果加了小括號(hào)叶洞，就可以給函數(shù)傳參-->
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label>
搜索名稱(chēng)關(guān)鍵字：
<!--在vue中所有的指令在調(diào)用的時(shí)候，都用v-開(kāi)頭-->
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!--之前寸爆，v-for 中的數(shù)據(jù)礁鲁，都是從 data 上的list中直接渲染過(guò)來(lái)的-->
<!--現(xiàn)在，我們自定義了一個(gè) search 方法赁豆，同時(shí)仅醇，把所有關(guān)鍵字，通過(guò)傳參的形式魔种，傳遞給了search 方法-->
<!--在search方法內(nèi)部通過(guò)執(zhí)行for循環(huán)析二，把所有符合搜索關(guān)鍵字的數(shù)據(jù)，保存在一個(gè)新數(shù)組中-->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | dateFormat('yyyy-mm-dd')}}</td>
<td>
<a href="" @click.prevent="del(item.id)">刪除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
//全局過(guò)濾器节预，進(jìn)行時(shí)間的格式化
Vue.filter('dateFormat', function (dateStr, pattern = '') {
//根據(jù)給定的時(shí)間字符串叶摄，得到特定的時(shí)間
var dt = new Date(dateStr);
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// return y + '-' + m + '-' + d;
//上面的拼接方法過(guò)于繁瑣漆改，采用下面的模板字符串方法進(jìn)行拼接
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-$2xw7fvx`;
} 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}-$n6fpl87 ${hh}:${mm}:${ss}`;
}
});
//自定義全局指令
//其中參數(shù)1是指令的名稱(chēng)，注意准谚，在定義的時(shí)候挫剑，指令的前面不需要加v-前綴，但是在調(diào)用的時(shí)候柱衔，必須在指令名稱(chēng)前加上v-前綴
//參數(shù)2是一個(gè)對(duì)象樊破，這個(gè)對(duì)象身上有一些指令相關(guān)的函數(shù)，這些函數(shù)可以在特定的階段執(zhí)行相關(guān)的操作
Vue.directive('focus', {
bind: function (el) {//每當(dāng)指令綁定到元素上的時(shí)候唆铐，會(huì)立即執(zhí)行這個(gè)bind函數(shù)哲戚，只執(zhí)行一次
// el.focus();
/*在元素剛綁定了指令的時(shí)候，還沒(méi)有插入到dom中的時(shí)候艾岂，調(diào)用focus方法沒(méi)有作用顺少，因?yàn)橐粋€(gè)元素只有插入DOM之后才能獲取焦點(diǎn)*/
/*注意，在每個(gè)函數(shù)中王浴，第一個(gè)參數(shù)脆炎，永遠(yuǎn)都是el，表示被綁定了指令的元素氓辣，是一個(gè)原聲的對(duì)象*/
},
inserted: function (el) {//inserted表示元素插入到Dom中的時(shí)候秒裕，會(huì)執(zhí)行此函數(shù)，且只執(zhí)行一次
/*和js行為有關(guān)的操作钞啸，最好在inserted中去執(zhí)行几蜻，防止js行為不生效*/
el.focus();
},
updated: function (el) {//當(dāng)VNode更新的時(shí)候，會(huì)執(zhí)行 updated体斩，可能會(huì)觸發(fā)多次
}
});
//自定義一個(gè)全局自動(dòng)設(shè)置顏色的指令
Vue.directive('color', {
//樣式只要通過(guò)指令綁定給了元素梭稚，不管這個(gè)元素有沒(méi)有被插入到頁(yè)面中去，這個(gè)元素肯定有了一個(gè)內(nèi)聯(lián)的樣式
//將來(lái)元素肯定會(huì)顯示到頁(yè)面中去絮吵，這時(shí)候弧烤，瀏覽器的渲染引擎必然會(huì)解析樣式，應(yīng)用給這個(gè)元素
bind: function (el, binding) {
el.style.color = binding.value;
/*和樣式相關(guān)的操作源武，一般都可以在bind中執(zhí)行*/
}
});
//創(chuàng)建vue實(shí)例
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
keywords: '',//搜索關(guān)鍵字
list: [
{id: 1, name: '奔馳', ctime: new Date()},
{id: 2, name: '寶馬', ctime: new Date()},
]
},
methods: {
add() {//添加的方法
//分析
//獲取 id 和 name 扼褪，直接從data中獲取
//組織出一個(gè)對(duì)象
//把這個(gè)對(duì)象，調(diào)用數(shù)組的相關(guān)方法粱栖，添加到當(dāng)前data中的list中
//注意： 在vue中已經(jīng)實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定，每當(dāng)我們修改了data中的數(shù)據(jù)脏毯，vue會(huì)默認(rèn)監(jiān)聽(tīng)到數(shù)據(jù)改動(dòng)闹究，自動(dòng)把最新的數(shù)據(jù)應(yīng)用到頁(yè)面上
var obj = {id: this.id, name: this.name, ctime: new Date()};
this.list.push(obj);
this.id = this.name = '';
},
del(id) {//根據(jù)id刪除數(shù)據(jù)
//分析
//如何根據(jù)id找到要?jiǎng)h除這一項(xiàng)的索引
//如果找到索引直接調(diào)用數(shù)組的splice方法
this.list.some((item, i) => {
if (item.id == id) {
//在數(shù)組的some方法中，如果return true 就會(huì)終止后續(xù)循環(huán)
this.list.splice(i, 1);
/*
array.splice(start,deleteCount,item1,item2...)
start: 開(kāi)始操作的索引
deleteCount：要移除的數(shù)組元素的個(gè)數(shù)
itemN:要添加進(jìn)數(shù)組的元素食店，如果不指定渣淤，則splice只刪除數(shù)組元素
*/
return true;
}
})
},
search(keywords) {//根據(jù)關(guān)鍵字進(jìn)行數(shù)據(jù)的搜索
// var newList = [];
// this.list.forEach(item => {
// if (item.name.indexOf(keywords) != -1) {
// newList.push(item)
// }
// });
// return newList;
// 注意： forEach some filter findIndex 這些都屬于數(shù)組的新方法
//都會(huì)對(duì)數(shù)組中的每一項(xiàng)赏寇，進(jìn)行遍歷，執(zhí)行相關(guān)的操作
return this.list.filter(item => {
//注意： ES6中价认，為字符串提供了一個(gè)新方法梆砸，叫做 String.prototype.includes('要包含的字符串')
//如果包含拿霉，則返回true，否則返回false
return item.name.includes(keywords)
})
}
}
});
</script>
<!--過(guò)濾器的定義語(yǔ)法-->
<!--Vue.filter('過(guò)濾器名稱(chēng)',function(){})-->
<!--過(guò)濾器中的 function ， 第一個(gè)參數(shù)已經(jīng)被規(guī)定死了盈魁，永遠(yuǎn)都是過(guò)濾器管道符前面?zhèn)鬟f過(guò)來(lái)的數(shù)據(jù)-->
<div id="app2">
<!--可以有多個(gè)過(guò)濾器，按照從左到右的順序過(guò)濾惋鹅，將前面過(guò)濾的結(jié)果傳到后面的過(guò)濾器-->
<p v-cloak>{{ msg | msgFormat('瘋狂','+1') | test }}</p>
</div>
<script>
//定義一個(gè)Vue全局過(guò)濾器犁河，名字叫做 msgFormat
//過(guò)濾器調(diào)用時(shí)候的格式 {{name | nameope}}
Vue.filter('msgFormat', function (msg, arg, arg2) {
//字符串的 replace方法，第一個(gè)參數(shù)惠奸，除了可寫(xiě)一個(gè) 字符串之外梅誓，還可以定義一個(gè)正則
return msg.replace(/單純/g, arg + arg2);
});
Vue.filter('test', msg => {
return msg + '========';
});
var vm = new Vue({
el: '#app2',
data: {
msg: '我是一個(gè)單純的男孩，我曾以為我是最單純的佛南！'
}
})
</script>
<!--如何定義一個(gè)私有（局部）的過(guò)濾器-->
<!--過(guò)濾器調(diào)用的時(shí)候梗掰，采用的是就近原則，如果私有過(guò)濾器和全局過(guò)濾器名稱(chēng)一致嗅回，優(yōu)先到調(diào)用私有-->
<!--
var vm = Vue({
el: '',
data:{},
methods:{},
filters:{//定義私有過(guò)濾器愧怜，過(guò)濾器有兩個(gè)條件，【過(guò)濾器名稱(chēng) 和 處理函數(shù)】
dateFormat: function(dataStr, pattern){
//過(guò)濾的條件
}
},
})
-->
<!--如何定義一個(gè)私有（局部）的指令-->
<!--
var vm = Vue({
el: '',
data:{},
methods:{},
directives:{//自定義私有指令
'fontWeight':{
bind: function(el, binding){
el.style.fontWeight = binding.value;
}
}
}
})
-->
<script>
/*自定義全局按鍵修飾符*/
Vue.config.keyCodes.f2 = 113;
</script>
</body>
</html>
