品牌列表案例的基礎(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ù)傳參-->
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label>
搜索名稱關(guān)鍵字：
<!--在vue中所有的指令在調(diào)用的時候，都用v-開頭-->
<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中直接渲染過來的-->
<!--現(xiàn)在，我們自定義了一個 search 方法，同時，把所有關(guān)鍵字，通過傳參的形式，傳遞給了search 方法-->
<!--在search方法內(nèi)部通過執(zhí)行for循環(huán)，把所有符合搜索關(guān)鍵字的數(shù)據(jù)，保存在一個新數(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>
//全局過濾器，進(jìn)行時間的格式化
Vue.filter('dateFormat', function (dateStr, pattern = '') {
//根據(jù)給定的時間字符串，得到特定的時間
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;
//上面的拼接方法過于繁瑣，采用下面的模板字符串方法進(jìn)行拼接
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}`;
}
});
//自定義全局指令
//其中參數(shù)1是指令的名稱，注意，在定義的時候，指令的前面不需要加v-前綴，但是在調(diào)用的時候，必須在指令名稱前加上v-前綴
//參數(shù)2是一個對象，這個對象身上有一些指令相關(guān)的函數(shù)，這些函數(shù)可以在特定的階段執(zhí)行相關(guān)的操作
Vue.directive('focus', {
bind: function (el) {//每當(dāng)指令綁定到元素上的時候，會立即執(zhí)行這個bind函數(shù)，只執(zhí)行一次
// el.focus();
/*在元素剛綁定了指令的時候，還沒有插入到dom中的時候，調(diào)用focus方法沒有作用，因為一個元素只有插入DOM之后才能獲取焦點*/
/*注意，在每個函數(shù)中，第一個參數(shù)，永遠(yuǎn)都是el，表示被綁定了指令的元素，是一個原聲的對象*/
},
inserted: function (el) {//inserted表示元素插入到Dom中的時候，會執(zhí)行此函數(shù)，且只執(zhí)行一次
/*和js行為有關(guān)的操作，最好在inserted中去執(zhí)行，防止js行為不生效*/
el.focus();
},
updated: function (el) {//當(dāng)VNode更新的時候，會執(zhí)行 updated，可能會觸發(fā)多次
}
});
//自定義一個全局自動設(shè)置顏色的指令
Vue.directive('color', {
//樣式只要通過指令綁定給了元素，不管這個元素有沒有被插入到頁面中去，這個元素肯定有了一個內(nèi)聯(lián)的樣式
//將來元素肯定會顯示到頁面中去，這時候，瀏覽器的渲染引擎必然會解析樣式，應(yīng)用給這個元素
bind: function (el, binding) {
el.style.color = binding.value;
/*和樣式相關(guān)的操作，一般都可以在bind中執(zhí)行*/
}
});
//創(chuàng)建vue實例
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中獲取
//組織出一個對象
//把這個對象，調(diào)用數(shù)組的相關(guān)方法，添加到當(dāng)前data中的list中
//注意： 在vue中已經(jīng)實現(xiàn)了數(shù)據(jù)的雙向綁定，每當(dāng)我們修改了data中的數(shù)據(jù)，vue會默認(rèn)監(jiān)聽到數(shù)據(jù)改動，自動把最新的數(shù)據(jù)應(yīng)用到頁面上
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找到要刪除這一項的索引
//如果找到索引直接調(diào)用數(shù)組的splice方法
this.list.some((item, i) => {
if (item.id == id) {
//在數(shù)組的some方法中，如果return true 就會終止后續(xù)循環(huán)
this.list.splice(i, 1);
/*
array.splice(start,deleteCount,item1,item2...)
start: 開始操作的索引
deleteCount：要移除的數(shù)組元素的個數(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ù)組的新方法
//都會對數(shù)組中的每一項，進(jìn)行遍歷，執(zhí)行相關(guān)的操作
return this.list.filter(item => {
//注意： ES6中，為字符串提供了一個新方法，叫做 String.prototype.includes('要包含的字符串')
//如果包含，則返回true，否則返回false
return item.name.includes(keywords)
})
}
}
});
</script>
<!--過濾器的定義語法-->
<!--Vue.filter('過濾器名稱',function(){})-->
<!--過濾器中的 function ， 第一個參數(shù)已經(jīng)被規(guī)定死了，永遠(yuǎn)都是過濾器管道符前面?zhèn)鬟f過來的數(shù)據(jù)-->
<div id="app2">
<!--可以有多個過濾器，按照從左到右的順序過濾，將前面過濾的結(jié)果傳到后面的過濾器-->
<p v-cloak>{{ msg | msgFormat('瘋狂','+1') | test }}</p>
</div>
<script>
//定義一個Vue全局過濾器，名字叫做 msgFormat
//過濾器調(diào)用時候的格式 {{name | nameope}}
Vue.filter('msgFormat', function (msg, arg, arg2) {
//字符串的 replace方法，第一個參數(shù)，除了可寫一個 字符串之外，還可以定義一個正則
return msg.replace(/單純/g, arg + arg2);
});
Vue.filter('test', msg => {
return msg + '========';
});
var vm = new Vue({
el: '#app2',
data: {
msg: '我是一個單純的男孩，我曾以為我是最單純的！'
}
})
</script>
<!--如何定義一個私有（局部）的過濾器-->
<!--過濾器調(diào)用的時候，采用的是就近原則，如果私有過濾器和全局過濾器名稱一致，優(yōu)先到調(diào)用私有-->
<!--
var vm = Vue({
el: '',
data:{},
methods:{},
filters:{//定義私有過濾器，過濾器有兩個條件，【過濾器名稱 和 處理函數(shù)】
dateFormat: function(dataStr, pattern){
//過濾的條件
}
},
})
-->
<!--如何定義一個私有（局部）的指令-->
<!--
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>
