vue實(shí)現(xiàn)可增刪查改的成績(jī)單
前端變化層出不窮，去年NG火一片，今年react,vue火一片，ng硬著頭皮看了幾套教程，總被其中的概念繞暈，react是faceback出品，正在不斷學(xué)習(xí)中，同時(shí)抽時(shí)間了解了vue,查看了vue官方文擋，看完格外入眼，總覺得要拿來(lái)試一試手。
正好周未，做一個(gè)小成績(jī)單玩玩，以前有用avalon也做過(guò)一個(gè)類似的，從過(guò)程來(lái)看，二個(gè)框架都在避免開發(fā)者頻繁操作dom,脫離dom苦海，安心處理數(shù)據(jù)業(yè)務(wù)邏輯，從二個(gè)示例來(lái)看，可以成倍的提高開發(fā)效率。
vue示例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue成績(jī)單</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.report_card{
width:800px;
margin:0 auto;
font-size:12px;
}
.report_card table{
width:100%;
border-collapse: collapse;
text-align:center;
}
.report_card caption{
font-size:14px;
text-align:left;
line-height:30px;
font-weight:bold;
}
.report_card table th,.report_card table td{
border:1px solid #ccc;
}
.report_card table th{
height:36px;
background:#f8f8f8;
}
.report_card table td{
height:32px;
background:#f8f8f8;
}
.content{
width:100%;
height:32px;
line-height:32px;
position:relative;
}
.content input{
position:absolute;
top:0;
left:0;
width:100%;
color:#999;
padding-left:10px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
height:30px;
border:1px solid blue;
-webkit-animation:borderAn 2s infinite;
animation:borderAn 2s infinite;
}
.studyForm select{
width:100px;
height:28px;
}
.searchInput{
width:200px;
height:28px;
}
.searchButton{
width:100px;
height:32px;
}
@-webkit-keyframes borderAn{
0%{
border-color:transparent;
}
100%{
border-color:blue;
}
}
@keyframes borderAn{
0%{
border-color:transparent;
}
100%{
border-color:blue;
}
}
.studyForm{
margin:10px 0;
}
.studyForm input{
width:120px;
height:30px;
}
</style>
</head>
<body>
<div class="report_card" id="reportCard">
<table class="studyForm">
<caption>成績(jī)錄入/處理</caption>
<tbody>
<tr>
<td width="170">學(xué)號(hào):<input type="text" v-model="addArr.stuId"></td>
<td width="170">姓名:<input type="text" v-model="addArr.name"></td>
<td width="170">語(yǔ)文:<input type="text" v-model="addArr.ywScores"></td>
<td width="170">數(shù)學(xué):<input type="text" v-model="addArr.sxScores"></td>
<td colspan="2" width="120">
<a href="javascript:void(0);" v-on:click="submitStu">錄入</a>
<a href="javascript:void(0);" v-on:click="resetStu">重置</a>
</td>
</tr>
<tr>
<td align="left">
搜索：<input v-model="searchTxt" type="text" class="searchInput">
</td>
<td>
排序字段:
<select v-model='sortKey'>
<option value="ywScores">語(yǔ)文</option>
<option value="sxScores">數(shù)學(xué)</option>
</select>
</td>
<td>
排序類型：
<select v-model="sortClass">
<option value="1">升序</option>
<option value="-1">降序</option>
</select>
</td>
<td colspan="3"></td>
</tr>
</tbody>
</table>
<table class="scoreList">
<caption>成績(jī)列表</caption>
<thead>
<th width="170">學(xué)號(hào)</th>
<th width="170">姓名</th>
<th width="170">語(yǔ)文</th>
<th width="170">數(shù)學(xué)</th>
<th colspan="2" width="120">操作</th>
</thead>
<tbody>
<tr v-for="item in studyArr | filterBy searchTxt | orderBy sortKey sortClass">
<td><div class="content">{{item.stuId}}<input v-model="editArr.stuId" type="text" v-if="$index==nowEditCol"></div></td>
<td><div class="content">{{item.name}}<input v-model="editArr.name" type="text" v-if="$index==nowEditCol"></div></td>
<td><div class="content">{{item.ywScores}}<input v-model="editArr.ywScores" type="text" v-if="$index==nowEditCol"></div></td>
<td><div class="content">{{item.sxScores}}<input v-model="editArr.sxScores" type="text" v-if="$index==nowEditCol"></div></td>
<td>
<a href="javascript:void(0);" v-on:click="startEdit($index)" v-if="$index!=nowEditCol">編輯</a>
<a href="javascript:void(0);" v-on:click="cancelEdit" v-if="$index==nowEditCol">取消</a>
<a href="javascript:void(0);" v-on:click="sureEdit($index)" v-if="$index==nowEditCol">確認(rèn)</a>
</td>
<td><a href="javascript:void(0);" v-on:click="deleteStu($index)">刪除</a></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var studyArrJson=[
{'stuId':'stu0001','name':'張三','ywScores':85,'sxScores':90},
{'stuId':'stu0002','name':'李四','ywScores':88,'sxScores':85},
{'stuId':'stu0003','name':'王五','ywScores':65,'sxScores':75},
{'stuId':'stu0004','name':'劉六','ywScores':58,'sxScores':96}
];
var reportCardVm=new Vue({
el:'#reportCard',
data:{
studyArr:studyArrJson,//成績(jī)花名冊(cè)
addArr:{'stuId':'','name':'','ywScores':'','sxScores':''},//新增的表單字段
nowEditCol:-1,//當(dāng)前編輯的行
editStatus:false,//當(dāng)前是否在編輯狀態(tài)
searchTxt:'',//搜索字段
sortKey:'ywScores',//排序健
sortClass:'1',//升降排序1為升,-1為降
},
methods:{
//啟動(dòng)索引index數(shù)據(jù)編輯
startEdit:function(index){
this.nowEditCol=index;
},
//取消編輯狀態(tài)
cancelEdit:function(){
this.nowEditCol=-1;
},
//啟動(dòng)索引index數(shù)據(jù)修改確認(rèn)
sureEdit:function(index){
this.studyArr.$set(index,this.editArr);
this.nowEditCol=-1;
},
//刪除索引index數(shù)據(jù)
deleteStu:function(index){
this.studyArr.splice(index,1);
},
//新增成績(jī)
submitStu:function(){
var addArr={
'stuId':this.addArr.stuId,
'name':this.addArr.name,
'ywScores':this.addArr.ywScores,
'sxScores':this.addArr.sxScores
};
this.studyArr.push(addArr);
this.resetStu();
},
//復(fù)位新增表單
resetStu:function(){
this.addArr={
'stuId':'',
'name':'',
'ywScores':'',
'sxScores':''
}
}
},
computed:{
//存儲(chǔ)當(dāng)前編輯的對(duì)象
editArr:function(){
var editO=this.studyArr[this.nowEditCol];
return {
'stuId':editO.stuId,
'name':editO.name,
'ywScores':editO.ywScores,
'sxScores':editO.sxScores
}
}
}
})
</script>
</body>
</html>
在線測(cè)試地址：http://jsbin.com/kavugufuci/edit?html,output
一個(gè)VUE對(duì)象就是一個(gè)view model,基本由下面幾部分組成
其中data主動(dòng)存放當(dāng)前view的屬性也就是在頁(yè)面上能用來(lái)綁定的數(shù)據(jù)，methods主要用來(lái)存當(dāng)前view model的方法，computed也是用來(lái)存當(dāng)前view的屬性的，只是它是計(jì)算屬性，它的值可能由data里某一個(gè)值直接影響，相當(dāng)于你修改了view里的data里的某一個(gè)值 ，它會(huì)自動(dòng)跟著修改，就想當(dāng)于ng里用$watch來(lái)實(shí)現(xiàn)的功能，當(dāng)前vue也提示了$watch功能,但是用計(jì)算屬性使用起來(lái)更快捷高效。
當(dāng)前示例view model分析
這是當(dāng)前的view model屬性，如果數(shù)據(jù)要綁定到html上去，可響應(yīng)的那都要在這一塊初始定好，如果后續(xù)會(huì)用到的也要在初始的時(shí)候掛好位置，后期手動(dòng)添加是不會(huì)起作用的，此項(xiàng)目各字段功能具體看文字注釋。
這是此 view model的方法，可直接綁定到html上也可以內(nèi)部以this.開頭來(lái)調(diào)用，內(nèi)部的this都是指向當(dāng)前view model，可以調(diào)用當(dāng)前view model上的所有屬性跟方法，這里也是我們處理數(shù)據(jù)，書寫業(yè)務(wù)邏輯的地方，此示例項(xiàng)目各方法功能具體看文字注釋。
這里是計(jì)算屬性，它的值由data下的nowEditCol來(lái)決定，相當(dāng)于你寫一個(gè)$watch方法在監(jiān)聽nowEditCol,但是此處vue內(nèi)部幫你處理了，推薦在項(xiàng)目中使用。
當(dāng)前項(xiàng)目使用view model方式，都是直接綁定在DOM元素上來(lái)做的，這也是熱門的MVVM框架的模式.
我一直都有在了解vue跟avalon ,ng,react這方面的東東，但是考慮到切入速度跟入手難受，我首先選擇的是vue,avalon,但是又由于vue的兼容，如果要使用vue就得放棄
安卓4.2以下的版本的原生瀏覽器，于是就開始使用avalon，用avalon 做過(guò)一些H5項(xiàng)目，但是由于avalon只是一個(gè)司徒正美個(gè)人項(xiàng)目總覺得在一些穩(wěn)定性和未來(lái)發(fā)展上感覺
很難說(shuō)，在跑很多測(cè)試案例的時(shí)候也發(fā)現(xiàn)一些BUG，當(dāng)然在我做的那些項(xiàng)目還沒有掉進(jìn)avalon的大坑，但是avalon的兼容是值得稱贊的，司徒正美應(yīng)該是花費(fèi)了很大精力，
如果你做的項(xiàng)目要兼容到非標(biāo)準(zhǔn)的瀏覽就如IE6-7-8，又想體驗(yàn)MVVM框架開發(fā)的高效的時(shí)候，avalon是你的首選。在目前兼容環(huán)境越來(lái)越好的情況，后期如果再接到H5的項(xiàng)目，
我會(huì)選擇用vue來(lái)做做項(xiàng)目。
更多vue的學(xué)習(xí)了解，請(qǐng)查閱官方文擋：http://cn.vuejs.org/guide/，這也是你入手vue最佳地方。
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js每天必學(xué)之計(jì)算屬性computed與$watch
Vue.js每天必學(xué)之計(jì)算屬性computed與$watch，為大家詳細(xì)講解計(jì)算屬性computed與$watch，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了Vue前端后端的交互方式?axios，axios?為第三方數(shù)據(jù)請(qǐng)求庫(kù)，下文具體的內(nèi)容介紹需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-04-04
這篇文章主要介紹了vue-cli中模擬數(shù)據(jù)的兩種方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
vue前端優(yōu)雅展示后端十萬(wàn)條數(shù)據(jù)面試點(diǎn)剖析
這篇文章主要為大家介紹了vue前端優(yōu)雅展示后端十萬(wàn)條數(shù)據(jù)的考點(diǎn)剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
使用vue制作FullPage頁(yè)面滾動(dòng)效果
本篇文章主要介紹了使用vue制作FullPage頁(yè)面滾動(dòng)效果，詳細(xì)的介紹了FullPage頁(yè)面的思路和實(shí)現(xiàn)，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了Vue對(duì)象賦值視圖不更新問題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Vue.js實(shí)現(xiàn)簡(jiǎn)單動(dòng)態(tài)數(shù)據(jù)處理
本篇文章主要介紹了Vue.js實(shí)現(xiàn)簡(jiǎn)單動(dòng)態(tài)數(shù)據(jù)處理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
解決VUE mounted 鉤子函數(shù)執(zhí)行時(shí) img 未加載導(dǎo)致頁(yè)面布局的問題
這篇文章主要介紹了解決VUE mounted 鉤子函數(shù)執(zhí)行時(shí) img 未加載導(dǎo)致頁(yè)面布局的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
下面小編就為大家分享一篇vue注冊(cè)組件的幾種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了vue 虛擬dom的patch源碼分析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03