需要安裝包： 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中移除當前元素
-->