需要安装包： moment.js axios.js vue.js
- 1.把db.json数据复制到db.json数据里面，开启db.json服务器
- 2.把html代码复制到html里面
html内容
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#app {
width: 600px;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: #0094ff;
color: white;
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="add">
品牌名称:
<input type="text" v-model="name" v-focus>
<input type="button" value="添加" @click=addItem()>
</div>
<div class="add">
品牌名称:
<input type="text" placeholder="请输入搜索条件" v-model="searchVal">
</div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-for="(v,i) in list" :key="i">
<td>{{i+1}}</td>
<td>{{v.name}}</td>
<td>{{v.date | fmtDate}}</td>
<td>
<a href="#" @click.prevent="deleItem(v.id)">删除</a>
</td>
</tr>
<!-- v-if="条件表达式" -->
<tr v-if="list.length===0">
<td colspan="4">没有品牌数据</td>
</tr>
</table>
</div>
</div>
<script src="./vue.js"></script>
<script src="./moment.js"></script>
<script src="./axios.min.js"></script>
<script>
// 全局自定义指令
Vue.directive("focus", {
inserted: function (el) {
el.focus();
}
});
// 全局过滤器
Vue.filter("fmtDate", function (v) {
return moment(v).format('YYYY-MM-DD hh:mm:ss');
});
new Vue({
el: "#app",
data: {
searchVal: "",
name: "",
list: []
},
// 监测搜索框
watch: {
searchVal(newV, oldV) {
axios
.get('http://localhost:3000/brands?name_like=' + newV)
.then((res) => {
console.log(11);
// 关键字改变，请求地址发生改变，接着把结果数据赋值给list[]
this.list = res.data;
})
}
},
// 数据加载完后自动调用
computed: {
newlist() {
var temp = [];
axios.get('http://localhost:3000/brands?name_like=' + this.searchVal)
.then((res, callback) => {
temp = res.data;
})
// 在异步操作的外面获得异步操作里面函数的结果
return temp;
}
},
mounted() {
this.getData();
},
methods: {
// 获取数据
getData() {
axios
.get('http://localhost:3000/brands')
.then((res) => {
const { status, data } = res;
if (status === 200) {
this.list = data;
}
})
.cathc((err) => {
})
},
// 删除
deleItem(ID) {
if (confirm("Sure?")) {
// this.list.splice(index, 1);
axios.delete('http://localhost:3000/brands/' + ID)
.then((res) => {
console.log(res);
this.getData()
})
}
},
// 增加
addItem() {
axios
.post('http://localhost:3000/brands', {
name: this.name,
date: new Date()
})
.then((res) => {
const { status } = res;
if (status === 201) {
this.getData()
}
})
this.list.unshift({
name: this.name,
date: new Date()
});
this.name = "";
}
}
});
</script>
<!-- <script>
var arr = [1, 2, 3].filter(function (v) {
// console.log(v);
return v > 1
});
</script> -->
</body>
</html>
<!--
一, 准备代码
1. 设置容器
2. 引入vue.js
3. 实例化
4. 设置选项 el data等
二, 渲染表格
// v-for->语法->(v,i) in data中的容器
1. 提供数据list
2. 找到页面中重复出现的标签结构 ->tr
3. 确定指令 v-for
4. 在视图中使用v-for的参数 v,i
三 处理无数据时的渲染
1. 找到条件渲染的标签
2. 使用v-if和v-show v-if="布尔"
3. 确定条件是什么?
四 添加商品
1. 找到输入框 v-model="数据"
2. 找到添加按钮 绑定事件 @click="addItem()"
3. methods 增加方法
4. 向表格绑定的数据list数组添加新数据
五 删除商品
1. 找到删除按钮 @click="deleItem()"
2. methods增加方法
3. 提示框+从数组list中移除当前元素
-->