11-Vue基础-品牌列表案例
Vue 案例
使用前边的基础知识编写一个Vue小案例，完成数据的增删查功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.css" />
<script src="./js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</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 for="">
Id:
<input type="text" class="form-control" v-model="id" />
</label>
<label for="">
Name:
<input
type="text"
class="form-control"
v-model="name"
@keyup.enter="add"
/>
</label>
<!-- 在Vue中，进行事件绑定时，可以传递参数 -->
<input
type="button"
value="添加"
class="btn btn-primary"
@click="add"
/>
<label for="">
通过名称关键字搜索:
<input
type="text"
class="form-control"
v-model="keywords"
v-focus
v-color="'blue'"
/>
</label>
</div>
</div>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<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="remove(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
axios.defaults.baseURL = "http://localhost:3000";
// 全局过滤器，对时间进行过滤
Vue.filter("dateFormat", function(dateStr) {
// 根据给定的时间字符串创建时间对象
var date = new Date(dataStr);
// yyyy-mm-dd
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
if (m >= 10) {
return `${y}-${m}-${d}`;
} else {
return `${y}-0${m}-${d}`;
}
});
// 注册一个全局自定义指令 v-focus
Vue.directive("focus", {
// 当被绑定的元素插入到 DOM 中时，执行操作
inserted: function(el) {
el.focus();
}
});
var vm = new Vue({
el: "#app",
data: {
id: "",
name: "",
keywords: "",
carList: [
{ id: 1, name: "玛莎拉蒂", ctime: new Date() },
{ id: 2, name: "兰博基尼", ctime: new Date() },
{ id: 3, name: "保时捷", ctime: new Date() }
]
},
created() {
this.getAllList();
},
methods: {
getAllList() {
// 获取所有品牌的列表
/* this.$http.get("http://localhost:3000/message").then(response => {
// console.log(response);
if (response.status === 200) {
this.carList = response.data;
} else {
console.log("请求失败啦");
}
}); */
axios
.get("/message")
.then(res => {
if (res.status === 200) {
this.carList = res.data;
}
})
.catch(err => {
console.log(err);
});
},
newAdd() {
// 添加品牌数据到json-server 服务后台
axios
.post("/message", {
id: this.id,
name: this.name,
ctime: new Date()
})
.then(res => {
this.getAllList();
this.id = "";
this.name = "";
})
.catch(err => {
console.log(err);
});
},
newRemove(id) {
// 根据ID删除汽车品牌列表
axios
.delete("/message/" + id)
.then(res => {
this.getAllList();
console.log(res);
})
.catch(err => {
console.log(err);
});
},
add() {
// 提示：使用Vue的双向数据绑定，每当修改数据，表单中的数据会自动映射到data数据模型中，
// 当我们修改data数据模型，Vue也会监测数据改动，自动把最新的数据渲染到页面上
var car = { id: this.id, name: this.name, ctime: new Date() };
this.carList.push(car);
// 清空原来的数据
this.id = this.name = "";
},
// 根据id删除数据
remove(id) {
// some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
/* some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。 */
/* this.carList.some((item, index) => {
if(item.id === id) {
this.carList.splice(index, 1)
// 在数组方法some中，如果返回true, 就会立即终止数组循环
return true;
}
}); */
// findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
var index = this.carList.findIndex(item => {
if (item.id === id) {
return true;
}
});
this.carList.splice(index, 1);
},
// 根据关键字进行数据查询
search(keywords) {
/* var newCarList = [];
this.carList.forEach(item => {
// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。 indexOf() 方法区分大小写。
if (item.name.indexOf(keywords) !== -1) {
// 符合条件的对象放入数组中
newCarList.push(item);
// 注意: 空字符串包含在每一个name属性中
}
});
return newCarList; */
/*
注意: forEach some filter findIndex 这些都属于数组的新方法
都可以对数组中的每一项进行遍历，执行相关的操作
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
*/
var newCarList = this.carList.filter(item => {
/* if (item.name.indexOf(keywords) !== -1) {
return true;
} else {
return false;
} */
/*
注意：在ES6中为字符串提供了一个新的方法，叫做 String.prototype.includes()
includes() 方法用于判断字符串是否包含指定的子字符串。
如果找到匹配的字符串则返回 true，否则返回 false。
*/
if (item.name.includes(keywords)) {
return true;
} else {
return false;
}
});
return newCarList;
}
},
// 定义过滤器
filters: {
// 时间过滤器
dateFormat: function(dateStr) {
/*
padStart() 方法用另一个字符串填充当前字符串(重复，如果需要的话)，
以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。
语法:
str.padStart(targetLength [, padString])
参数:
targetLength
当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
padString
填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，
则只保留最左侧的部分，其他部分会被截断。此参数的缺省值为 " "
返回值:
在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。
*/
// 根据给定的时间字符串创建时间对象
var date = new Date(dateStr);
// yyyy-mm-dd
var year = date.getFullYear().toString();
var month = (date.getMonth() + 1).toString().padStart(2, "0");
var day = date
.getDate()
.toString()
.padStart(2, "0");
var hour = date
.getHours()
.toString()
.padStart(2, "0");
var minute = date
.getMinutes()
.toString()
.padStart(2, "0");
var seconds = date
.getSeconds()
.toString()
.padStart(2, "0");
return `${year}-${month}-${day} ${hour}:${minute}:${seconds}`;
}
},
// 注册局部指令
directives: {
color: {
bind: function(el, binding) {
el.style.color = binding.value;
}
}
}
});
</script>
</body>
</html>
图片展示
预留作业
为案例添加修改更能
浙公网安备 33010602011771号