forked from Francis0Cheng/Vue-Personal-Notes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
14.品牌列表案例2.html
230 lines (202 loc) · 8.33 KB
/
14.品牌列表案例2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<link rel="stylesheet" href="./lib/boot-strap.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Add Brand </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.113="add()" >
</label>
<label>
<input type="button" value="Add" class="btn btn-primary" @click="add">
</label>
<label>
Search keywords
<!--Vue中所有指令，在调用的时候都以 v- 开头-->
<input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'blue'"> <!--注意这边传入一个字符串，blue需要单引号的-->
</label>
</div>
</div>
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!--之前，v-for中的数据都是直接从data上的list中直接渲染过来的-->
<!--现在我们自定义了一个search方法，同时把所有关键字，通过传参的形式传递给了search方法-->
<!--在search方法内部，通过执行for循环，把所有符合搜索关键词的数据保存到一个新的数组中，返回-->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<td>{{item.ctime | dateFormat()}}</td>
<td>
<a href="" @click.prevent="del(item.id)">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id='app2'>
<h3 v-fontweight='900' v-fontsize="'15px'">
{{dt | dateFormat('')}}
</h3>
</div>
<script>
//全局过滤器，进行时间的格式化
Vue.filter('dateFormat', function(dateStr, pattern='yyyy-mm-dd'){
//根据给定的时间字符串，得到特定的事件
var dt = new Date(dateStr)
// yyyy-mm-dddd
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
if(pattern && pattern.toLowerCase() == 'yyyy-mm-dd')
{
return `${y} - ${m} - ${d}`
}
else{
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y} ${m} ${d} ${hh}:${mm}:${ss}`
}
})
/*使用Vue.directiive()定义全局的指令
其中：参数1：指令的名称，之一在定义的时候，指令的名称前 面不需要加 v- 前缀， 但是在调用的时候必须加v-
参数2：是一个对象，在这个对象上，有一些指令相关函数，这些函数可以在特定阶段，执行相关的操作
*/
Vue.directive('focus', {
//注意在每个函数中，第一个参数永远是el表示被绑定了指令的哪个元素，这个el是元素的js对象
bind: function(el){//每当指令绑定到元素上的时候，会立即执行，只执行一次
//在元素绑定了指令时候，还没有插入到DOM中去，这时候调用focus方法没有作用。因为这个元素只有在插入DOM之后才能获取焦点。
},
inserted: function(el){// 元素插入到DOM中的时候，会执行inserted函数，触发一次
el.focus()
},
updated(el) {//当VNode更新的时候，会执行updated，可能会触发多次
},
})
Vue.directive('color', {
//样式只要通过指令绑定给了元素，不管这个元素有没有被插入到页面之中去，这个元素肯定有了一个内联的样式
//和样式有关的，一般可以在bind中执行
bind:function(el , binding){
el.style.color = binding.value
},
inserted: function(el){
},
updated: function(el){
}
})
//自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113
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) {
this.list.some((item, i) => {
if (item.id == id) {
this.list.splice(i, 1)
return ture;
}
})
},
search(keywords) {
var newList = this.list.filter(item => {
if (item.name.includes(keywords)) {
return item
}
})
return newList
}
}
}
);
//过滤器的定义语法
//Vue('过滤器名称', function(){})
//过滤器中的function，第一个参数已经被定死了，永远都是过滤器管道符传递过来的数据
/*
Vue.filter('过滤器的名称', function(data){
return data+'123'
})
*/
//如何定义一个字有的过滤器
var vm2 = new Vue({
el: '#app2',
data: {
dt: Date()
},
methods: {
},
filters:{
// 定义私有过滤器
dateFormat: function(dateStr, pattern)
{
var dt = new Date(dateStr) //转化
var y = dt.getFullYear()
var m = (dt.getMonth()).toString().padStart(2, '0') //用String的padStart方法补齐
var d = (dt.getDate()).toString().padStart(2,'0')
if (pattern.toLowerCase()=='yyyy-mm-dd')
{
return `${y}-${m}-${d}`
}else
{
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss} 私有`
}
}
},
directives:{
'fontweight': function(el, binding){
el.style.fontWeight=binding.value
},
//简写
'fontsize': function(el, binding){
//注意这个function相当于把这个代码写进bind和update中去
el.style.fontSize=parseInt(binding.value) + 'px'
}
}
})
//document.getElementById('search').focus()
</script>
</body>
</html>
<!--自定义指令-->