品牌列表案例
運用的知識：
v-model進行雙向綁定
@click.prevent="del(id)" 函數(shù)傳參
v-for循環(huán)
String.prototype.includes('要包含的字符串')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<link rel="stylesheet" href="../lib/bootstrap-3.3.7.css">
<script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3>添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label for="">
ID:
<input type="text" class="form-control" v-model="id">
</label>
<label for="">
Name:
<input type="text" class="form-control" v-model="name">
</label>
<label for="">
<input type="button" value="添加" class="btn btn-primary" @click="add">
</label>
<label for="">
搜索名稱關(guān)鍵字：
<input type="text" class="form-control" v-model="keywords">
</label>
</div>
</div>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Del</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.ctime }}</td>
<td><a href="" @click.prevent="del(id)">刪除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
keywords: '',
list: [
{id: 1, name: '奔馳', ctime: new Date()},
{id: 2, name: '寶馬', ctime: new Date()},
]
},
methods: {
add() {
var car = {id: this.id, name: this.name, ctime: new Date()};
this.list.push(car);
this.id = '';
this.name = ''
},
del(id) {
var index = this.list.indexOf(function (item) {
if (item.id === id) {
return true
}
});
this.list.splice(index, 1)
},
search(keywords) {
return this.list.filter(function (item) {
if (item.name.includes(keywords)) {
return item
}
})
}
}
})
</script>
</body>
</html>
<tr v-for="item in search(keywords)">之前漱挚，v-for 中的數(shù)據(jù)趾盐，都是直接從 data 上的 list 中直接渲染過來的纷跛，現(xiàn)在凌蔬，這里定義了一個 search 方法 在 search 方法內(nèi)部崭歧，通過執(zhí)行 for 循環(huán)顿仇，把所有符合搜索的關(guān)鍵字的數(shù)據(jù)角雷，保存到一個新數(shù)組中返回欣尼。
全局過濾器
定義私有過濾器 過濾器有兩個 條件 【過濾器名稱 和 處理函數(shù)】
所謂的全局過濾器爆雹，就是所有的VM實例都共享的
Vue.filter('dataFormat',function(dataStr,pattern = ''){
var dt = new Date(dataStr);
var y = dt.getFullYear();
var m = dt.getMonth()+1;
var d = dt.getDate().toString().padStart(2,'0');
var h = dt.getHours().toString().padStart(2,'0');
var mm = dt.getMinutes().toString().padStart(2,'0');
var s = dt.getSeconds().toString().padStart(2,'0');
return `${y}-${m}-$vcn8puw ${h}:${mm}:${s}`
});
使用： <td>{{ item.ctime | dateFormat() }}</td>
私有過濾器
過濾器調(diào)用的時候，采用就近原則愕鼓，如果私有過濾器和全局過濾器名稱一致钙态，這時候優(yōu)先調(diào)用私有過濾器
filters:{
timeFormat: function (dateStr, pattern='') {
var dt = new Date(dateStr);
var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDate();
var h = dt.getHours().toString().padStart(2,'0');
var mm = dt.getMinutes().toString().padStart(2,'0');
var s = dt.getSeconds().toString().padStart(2,'0');
return `${y}-${m}-$qccnyar ${h}:${mm}:${s}`
}
}
自定義全局按鍵修飾符
全部的按鍵別名：
.enter.tab-
.delete(捕獲“刪除”和“退格”鍵) .esc.space.up.down.left.right
以上可以直接使用：@click.enter = 'add'
Vue.config.keyCodes.f2 = 113
使用：@click.f2='add'
使用Vue.directive()定義全局的指令
Vue.directive('focus',{
inserted:function(el){
el.focus()
}
});
使用：<input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'green'">
inserted 表示元素 插入到DOM中的時候，會執(zhí)行 inserted 函數(shù)【觸發(fā)1次】
和樣式相關(guān)的操作菇晃，一般都可以在 bind 執(zhí)行
Vue.directive('color',{
bind:function(el,binding){
el.style.color = 'red';
console.log(binding.value)
}
});
使用：<input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'green'">
每當(dāng)指令綁定到元素上的時候册倒，會立即執(zhí)行這個 bind 函數(shù)，只執(zhí)行一次
函數(shù)中的第一個參數(shù)永遠是 el 磺送，表示被綁定了指令的那個元素驻子， 這個 el 參數(shù)， 是一個原生的 JS 對象
和 JS 行為有關(guān)的操作册着，最好在 inserted 中去執(zhí)行
參數(shù)1：指令的名稱拴孤，注意，在定義的時候甲捏，指令名稱前不需要加 v- 前綴演熟，但是，在調(diào)用的時候，必須在指令名稱前加上 v- 前綴來進行調(diào)用
參數(shù)2：是一個對象芒粹，這個對象身上兄纺，有一些指令相關(guān)的函數(shù)，這些函數(shù)可以在特定階段化漆，執(zhí)行相關(guān)的操作
自定義私有指令
directives: {
'fontweight': {
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize': {
bind: function (el, binding) {
el.style.fontSize = binding.value
}
}
}
品牌列表完整案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cysky</title>
<link rel="stylesheet" href="../lib/bootstrap-3.3.7.css">
<script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3>添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label for="">
ID:
<input type="text" class="form-control" v-model="id">
</label>
<label for="">
Name:
<input type="text" class="form-control" v-model="name">
</label>
<label for="">
<input type="button" value="添加" class="btn btn-primary" @click="add">
</label>
<label for="">
搜索名稱關(guān)鍵字：
<input type="text" class="form-control" v-model="keywords" v-focus>
</label>
</div>
</div>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Del</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.ctime | timeFormat() }}</td>
<td><a href="" @click.prevent="del(id)">刪除</a></td>
</tr>
</tbody>
</table>
<p v-fontsize="50" v-color="'blue'">這是一個P標簽估脆，用于測試私有directives</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
keywords: '',
list: [
{id: 1, name: '奔馳', ctime: new Date()},
{id: 2, name: '寶馬', ctime: new Date()},
]
},
methods: {
add() {
var car = {id: this.id, name: this.name, ctime: new Date()};
this.list.push(car);
this.id = '';
this.name = ''
},
del(id) {
var index = this.list.indexOf(function (item) {
if (item.id === id) {
return true
}
});
this.list.splice(index, 1)
},
search(keywords) {
return this.list.filter(function (item) {
if (item.name.includes(keywords)) {
return item
}
})
}
},
filters: {//私有過濾器
timeFormat: function (dateStr, pattern = '') {
var dt = new Date(dateStr);
var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDate();
var h = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var s = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-$d7jii27 ${h}:${mm}:${s}`
}
},
directives: {//自定義私有指令
'fontweight': {
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize': {
bind: function (el, binding) {
el.style.fontSize = parseInt(binding.value) + 'px'
}
},
'color': {
bind: function (el, binding) {
el.style.color = binding.value
}
},
'focus': {
inserted: function (el) {
el.focus()
}
}
}
})
</script>
</body>
</html>
生命周期
beforeCreate(){}:這是我們遇到的第一個生命周期函數(shù)，表示實例完全被創(chuàng)建出來之前座云，會執(zhí)行它
注意：在 beforeCreate(){} 執(zhí)行的時候疙赠，data 和 methods 中的數(shù)據(jù)都還沒有初始化
created(){} 這是遇到的第二個生命周期函數(shù)，在 created 中朦拖，data 和 methods 都已經(jīng)被初始化好了
注意：如果要調(diào)用 methods 中的方法圃阳，或者操作 data 中的數(shù)據(jù)，最早璧帝，只能在 created 中操作
beforeMount(){} 這是遇到的第三個生命周期函數(shù)捍岳，表示模版已經(jīng)在內(nèi)存中編輯完成了，但是尚未把模版渲染到頁面中
注意：在 beforeMount 執(zhí)行的時候睬隶，頁面中的元素锣夹，還沒有被真正替換過來，只是之前寫的模版字符串
mounted(){} 這是遇到的第四個盛名周期函數(shù)苏潜，表示银萍，內(nèi)存中的模版，已經(jīng)真實的掛載到了頁面中窖贤，用戶已經(jīng)可以看到渲染好的頁面了
注意：mounted 是實例創(chuàng)建期間最后的一個生命周期函數(shù)砖顷，當(dāng)執(zhí)行完 mounted 就表示，實例已經(jīng)被完全創(chuàng)建好了赃梧，此時滤蝠，如果沒有其他操作，這個實例就在內(nèi)存中授嘀，等候
接下來的是運行中的兩個事件
beforeUpdate() {} 這時候表示我們的界面還沒有被更新（數(shù)據(jù)已經(jīng)更新了）
結(jié)論： 當(dāng)執(zhí)行 beforeUpdate 的時候物咳，頁面中的顯示的數(shù)據(jù)，還是舊的蹄皱，此時 data 數(shù)據(jù)是最新的览闰，頁面尚未和 最新的數(shù)據(jù)保持同步
updated(){} 事件執(zhí)行的時候，頁面和 data 數(shù)據(jù)已經(jīng)保持同步了巷折，都是最新的
