一沥曹、使用Vue實(shí)現(xiàn)對(duì)數(shù)組的增刪改查
在管理員的一些后臺(tái)頁面里，個(gè)人中心里的數(shù)據(jù)列表里溺蕉，都會(huì)有對(duì)這些數(shù)據(jù)進(jìn)行增刪改查的操作福压。比如在管理員后臺(tái)的用戶列表里，我們可以錄入新用戶的信息蛮放，也可以對(duì)既有的用戶信息進(jìn)行修改缩抡。在vue中，我們更應(yīng)該專注于對(duì)數(shù)據(jù)的操作和處理包颁。
比如我們有這樣的的一個(gè)頁面
樣式
<style>
table{
border-collapse: collapse;
}
th,td{
padding: 2px 15px;
border: 1px solid #ccc;
text-align: center;
}
#edit{
width: 300px;
height: 230px;
border: 1px solid #ccc;
padding: 20px;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
#edit .close{
width: 30px;
height: 30px;
border: 1px solid #ccc;
background-color: lightcoral;
color: white;
text-align: center;
line-height: 30px;
font-size: 20px;
border-radius: 50%;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
}
</style>
頁面
<div id="app">
<button @click="showEdit=true">添加</button>
<hr>
<table>
<thead>
<tr>
<th>學(xué)號(hào)</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in students" :key="index">
<td>{{item.no}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>
<button @click="getOne(item.no)">修改</button>
<button @click="delStudent(index)">刪除</button>
</td>
</tr>
</tbody>
</table>
<div id="edit" v-show="showEdit">
<!-- 在修改界面中瞻想，不能修改學(xué)號(hào) -->
<p>學(xué)號(hào)：<input type="text" v-model="student.no" :readonly="!isAdd"></p>
<p>姓名：<input type="text" v-model="student.name"></p>
<p>年齡：<input type="text" v-model="student.age"></p>
<p>性別：<input type="text" v-model="student.sex"></p>
<p>
<button v-if="isAdd" @click="addStudent">添加</button>
<button v-else @click="updateStudent">修改</button>
<button @click="clear">取消</button>
</p>
<div class="close" @click="close">X</div>
</div>
</div>
// 引入vue.js文件
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
定義一個(gè)學(xué)生數(shù)組
new Vue({
el:'#app',
data:{
//定義一個(gè)學(xué)生數(shù)組
students:[
{
no:'1001',
name:'劉德華',
age:20,
sex:'男'
},
{
no:'1002',
name:'周杰倫',
age:22,
sex:'男'
},
{
no:'1003',
name:'蔡依林',
age:24,
sex:'女'
}
],
是否顯示編輯窗口(接上)
showEdit:false,
是否是添加狀態(tài)
isAdd:true,
學(xué)生對(duì)象
student:{
no:'',
name:'',
age:0,
sex:''
}
},
methods: {
//添加方法
addStudent(){
//將表單數(shù)據(jù)展開后，返回一個(gè)新的對(duì)象
let stu = {...this.student}
//將學(xué)生對(duì)象添加到學(xué)生數(shù)組中
this.students.push(stu)
//調(diào)用清空表單數(shù)據(jù)的方法
this.clear()
},
//清空表單數(shù)據(jù)的方法
clear(){
this.student = {
no:'',
name:'',
age:0,
sex:''
}
},
//關(guān)閉編輯窗口
close(){
this.showEdit = false
this.isAdd = true
this.clear()
},
//根據(jù)學(xué)號(hào)查詢學(xué)生對(duì)象
getOne(no){
//打開編輯窗口
this.showEdit = true
//編輯窗口是修改狀態(tài)
this.isAdd = false
//根據(jù)學(xué)號(hào)查詢學(xué)生對(duì)象
let stu = this.students.find(s=>s.no===no)
this.student = {...stu}
},
//修改學(xué)生信息
updateStudent(){
//根據(jù)學(xué)號(hào)娩嚼，找到原始數(shù)組中指定的學(xué)生對(duì)象
let stu = this.students.find(s=>s.no===this.student.no)
//修改數(shù)組里面指定學(xué)生對(duì)象的屬性
stu.name = this.student.name
stu.age = this.student.age
stu.sex = this.student.sex
},
//刪除學(xué)生
delStudent(index){
if(confirm('確定刪除嗎蘑险？')){
this.students.splice(index,1)
}
}
},
})
點(diǎn)擊添加后效果如圖
總結(jié)：
里面的難點(diǎn)不太多，主要是form表單方面的操作岳悟，再一個(gè)就是練習(xí)下組件間的數(shù)據(jù)與事件傳遞佃迄。內(nèi)容比較簡(jiǎn)單，歡迎各位批評(píng)指正贵少。
二呵俏、vue的生命周期
1.簡(jiǎn)單寫個(gè)頁面
<div id="app">
<h2 id="name">{{name}}</h2>
<h2 id="age">{{age}}</h2>
<div>
<button @click="name='李四'">修改姓名</button>
<button @click="age=30">修改年齡</button>
<button @click="destroy">不過了</button>
</div>
</div>
// 引入vue文件
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script>
Vue.config.productionTip = false
let vm = new Vue({
// 指定掛載的容器
// el:'#app',
// 指定模板（如果有模板，vue會(huì)渲染整個(gè)模板滔灶；如果沒有模板普碎，vue會(huì)將el里面的所有內(nèi)容當(dāng)成模板使用）
// template:'<div><h2>{{name}}</h2><h2>{{age}}</h2></div>',
//數(shù)據(jù)
data:{
name:'張三',
age:20,
},
methods: {
destroy(){
// 調(diào)用銷毀當(dāng)前Vue實(shí)例的方法
// 注意：銷毀后，當(dāng)前Vue實(shí)例對(duì)象還在录平，只是該對(duì)象不能在重新掛載頁面了
this.$destroy()
}
},
//創(chuàng)建之前(數(shù)據(jù)初始化之前)
beforeCreate() {
console.log('-----------------beforeCreate------------------');
// 這個(gè)生命周期函數(shù)麻车，基本上不用缀皱，除非要設(shè)置Vue實(shí)例的內(nèi)容
this.__proto__.fn = function(){
alert('哈哈！')
}
//Vue實(shí)例动猬，已經(jīng)創(chuàng)建完成
console.log(this);
//Vue實(shí)例身上的數(shù)據(jù)還沒有初始化完成
console.log(this.name+' '+this.age);
},
//創(chuàng)建完成(數(shù)據(jù)初始化完成)
created() {
console.log('-----------------created------------------');
// 這個(gè)生命周期函數(shù)啤斗，通常用于初始化Vue管理的數(shù)據(jù)，比如：發(fā)生ajax請(qǐng)求會(huì)放在這里赁咙。
console.log(this);
console.log(this.name+' '+this.age);
},
//掛載之前(模板已經(jīng)成功渲染钮莲，但是還沒有將內(nèi)容掛載到頁面中)
beforeMount() {
console.log('-----------------beforeMount------------------');
// 這個(gè)生命周期函數(shù)，基本上不用
console.log(this.$el);
// document.querySelector('#name').innerHTML = "哈哈"
},
//掛載完成(模板已經(jīng)成功渲染序目，并且已經(jīng)將模板內(nèi)容掛載到了頁面)
mounted() {
console.log('-----------------mounted------------------');
// 這個(gè)生命周期函數(shù)臂痕，通常用于對(duì)DOM的重新改動(dòng)
console.log(this.$el);
// document.querySelector('#name').innerHTML = "呵呵"
},
//修改之前(數(shù)據(jù)已經(jīng)改了伯襟，只是還沒有重新掛載頁面)
beforeUpdate() {
console.log('-----------------beforeUpdate------------------');
console.log(this.name+' '+this.age);
console.log(this.$el);
},
//修改完成(數(shù)據(jù)已經(jīng)改了猿涨，頁面也已經(jīng)重新掛載)
updated() {
console.log('-----------------updated------------------');
console.log(this.name+' '+this.age);
console.log(this.$el);
},
//銷毀之前
beforeDestroy() {
console.log('-----------------beforeDestroy------------------');
// 這個(gè)生命周期函數(shù)，會(huì)用的多一些
console.log(this);
// 對(duì)數(shù)據(jù)做任何的修改姆怪，都不會(huì)重新渲染到頁面
this.name = '王五'
},
//銷毀完成
destroyed() {
console.log('-----------------destroyed------------------');
// 這個(gè)生命周期函數(shù)叛赚，幾乎不用
console.log(this);
this.name = '王五'
},
})
setTimeout(() => {
// 通過vue實(shí)例的$mount方法，手動(dòng)掛載容器
// 公共el選項(xiàng)指定掛載容器稽揭，當(dāng)模板渲染成功后俺附，會(huì)離開掛載頁面
// $mount方法的好處是，可以自行選擇掛載的時(shí)機(jī)溪掀。
vm.$mount('#app')
}, 1000);
</script>
Vue實(shí)例有一個(gè)完整的生命周期事镣，也就是說從開始創(chuàng)建、初始化數(shù)據(jù)揪胃、編譯模板璃哟、掛在DOM、渲染-更新-渲染喊递、卸載等一系列過程随闪，我們成為Vue 實(shí)例的生命周期，鉤子就是在某個(gè)階段給你一個(gè)做某些處理的機(jī)會(huì)骚勘。
beforeCreate( 創(chuàng)建前 )
在實(shí)例初始化之后铐伴，數(shù)據(jù)觀測(cè)和事件配置之前被調(diào)用，此時(shí)組件的選項(xiàng)對(duì)象還未創(chuàng)建俏讹，el 和 data 并未初始化当宴，因此無法訪問methods， data泽疆， computed等上的方法和數(shù)據(jù)户矢。
created ( 創(chuàng)建后 ）
實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用，在這一步于微，實(shí)例已完成以下配置：數(shù)據(jù)觀測(cè)逗嫡、屬性和方法的運(yùn)算青自，watch/event事件回調(diào)，完成了data 數(shù)據(jù)的初始化驱证，el沒有延窜。 然而，掛在階段還沒有開始, $el屬性目前不可見抹锄，這是一個(gè)常用的生命周期逆瑞，因?yàn)槟憧梢哉{(diào)用methods中的方法，改變data中的數(shù)據(jù)伙单，并且修改可以通過vue的響應(yīng)式綁定體現(xiàn)在頁面上获高，，獲取computed中的計(jì)算屬性等等吻育，通常我們可以在這里對(duì)實(shí)例進(jìn)行預(yù)處理念秧，也有一些童鞋喜歡在這里發(fā)ajax請(qǐng)求，值得注意的是布疼，這個(gè)周期中是沒有什么方法來對(duì)實(shí)例化過程進(jìn)行攔截的摊趾，因此假如有某些數(shù)據(jù)必須獲取才允許進(jìn)入頁面的話，并不適合在這個(gè)方法發(fā)請(qǐng)求游两，建議在組件路由鉤子beforeRouteEnter中完成
beforeMount
掛在開始之前被調(diào)用砾层，相關(guān)的render函數(shù)首次被調(diào)用（虛擬DOM），實(shí)例已完成以下的配置： 編譯模板贱案，把data里面的數(shù)據(jù)和模板生成html肛炮，完成了el和data 初始化，注意此時(shí)還沒有掛在html到頁面上宝踪。
mounted
掛在完成侨糟，也就是模板中的HTML渲染到HTML頁面中，此時(shí)一般可以做一些ajax操作肴沫，mounted只會(huì)執(zhí)行一次粟害。
beforeUpdate
在數(shù)據(jù)更新之前被調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前颤芬，可以在該鉤子中進(jìn)一步地更改狀態(tài)悲幅，不會(huì)觸發(fā)附加地重渲染過程
updated（更新后）
在由于數(shù)據(jù)更改導(dǎo)致地虛擬DOM重新渲染和打補(bǔ)丁只會(huì)調(diào)用，調(diào)用時(shí)站蝠，組件DOM已經(jīng)更新汰具，所以可以執(zhí)行依賴于DOM的操作，然后在大多是情況下菱魔，應(yīng)該避免在此期間更改狀態(tài)留荔，因?yàn)檫@可能會(huì)導(dǎo)致更新無限循環(huán)，該鉤子在服務(wù)器端渲染期間不被調(diào)用
beforeDestroy（銷毀前）
在實(shí)例銷毀之前調(diào)用，實(shí)例仍然完全可用聚蝶，
這一步還可以用this來獲取實(shí)例杰妓，
一般在這一步做一些重置的操作，比如清除掉組件中的定時(shí)器 和 監(jiān)聽的dom事件
destroyed（銷毀后）
在實(shí)例銷毀之后調(diào)用碘勉，調(diào)用后巷挥，所以的事件監(jiān)聽器會(huì)被移出，所有的子實(shí)例也會(huì)被銷毀验靡，該鉤子在服務(wù)器端渲染期間不被調(diào)用
三倍宾、輪播圖例子
樣式
<style>
#app {
position: relative;
width: 750px;
}
#app img {
width: 100%;
}
.jiantou {
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.50);
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
font-size: 30px;
text-align: center;
line-height: 50px;
color: white;
cursor: pointer;
}
.left {
left: 10px;
}
.right {
right: 10px;
}
</style>
頁面
<body>
<div id="app" @mouseenter="mouseenter" @mouseleave="mouseleave">
<img :src="imgs[showActive]">
<div class="left jiantou" @click="left">←</div>
<div class="right jiantou" @click="right">→</div>
<button @click="destroy">終止播放</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
//定義定時(shí)器
timer: null,
//顯示的下標(biāo)
showActive: 0,
//圖片數(shù)組
imgs: ["http://p1.music.126.net/7zAkp74zoKd0LuEuEP6dOg==/109951166645160829.jpg?imageView&quality=89",
"http://p1.music.126.net/pkXsmqmFQOehNkJYmehkng==/109951166646695577.jpg?imageView&quality=89",
"http://p1.music.126.net/c1olbeIgiVsj9I39fCUXkQ==/109951166644891380.jpg?imageView&quality=89",
"http://p1.music.126.net/JMYet32O1mi6-YZ1GGSYcQ==/109951166646419732.jpg?imageView&quality=89",
"http://p1.music.126.net/WCX5Cq1z17Du2z0QBEcEaA==/109951166645933077.jpg?imageView&quality=89"]
},
methods: {
left() {
this.showActive--
//如果下標(biāo)越界，重新從0開始
if (this.showActive < 0) this.showActive = 4
},
right() {
this.showActive++
//如果下標(biāo)越界胜嗓，重新從0開始
if (this.showActive >= 5) this.showActive = 0
},
mouseenter() {
clearInterval(this.timer)
},
mouseleave() {
//開啟定時(shí)器
this.run()
},
run() {
this.timer = setInterval(() => {
console.log(11);
this.showActive++
//如果下標(biāo)越界高职，重新從0開始
if (this.showActive >= 5) this.showActive = 0
}, 1000);
},
destroy(){
this.$destroy()
}
},
//生命周期函數(shù)（表示頁面掛載完成）
mounted() {
//開啟定時(shí)器
this.run()
},
// 在這個(gè)生命周期函數(shù)中，清除定時(shí)器
beforeDestroy() {
clearInterval(this.timer)
},
})
</script>
</body>
