English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Front-end changes are endless. Last year, NG was hot, and this year, react, vue are hot. I watched a few tutorials of NG, always confused by the concepts. React is from Facebook, and I am learning continuously. At the same time, I took the time to learn about vue, checked the official documents of vue, and felt especially eye-catching after reading it, always felt like trying it out.
Just as the weekend, let's make a small achievement card to play with. I have also made a similar one with avalon before. From the process, both frameworks are trying to avoid developers from frequently operating DOM, to get out of the DOM abyss, and to focus on data business logic. From the two examples, it can greatly improve the development efficiency.
vue示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue成绩单</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>Score Entry/Processing</caption>
<tbody>
<tr>
<td width="170">Student ID:<input type="text" v-model="addArr.stuId"></td>
<td width="170">Name:<input type="text" v-model="addArr.name"></td>
<td width="170">Chinese:<input type="text" v-model="addArr.ywScores"></td>
<td width="170">Math:<input type="text" v-model="addArr.sxScores"></td>
<td colspan="2" width="120">
<a href="javascript:void(0);" v-on:click="submitStu">Enter</a>
<a href="javascript:void(0);" v-on:click="resetStu">Reset</a>
</td>
</tr>
<tr>
<td align="left">
Search：<input v-model="searchTxt" type="text" class="searchInput">
</td>
<td>
Sorting field：
<select v-model='sortKey'>
<option value="ywScores">Chinese</option>
<option value="sxScores">Math</option>
</select>
</td>
<td>
Sorting type：
<select v-model="sortClass">
<option value="1">Ascending</option>
<option value="-1">Descending</option>
</select>
</td>
<td colspan="3></td>
</tr>
</tbody>
</table>
<table class="scoreList">
<caption>Score List</caption>
<thead>
<th width="170">Student ID</th>
<th width="170">Name</th>
<th width="170">Chinese</th>
<th width="170">Math</th>
<th colspan="2" width="120">Operation</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">Edit</a>
<a href="javascript:void(0);" v-on:click="cancelEdit" v-if="$index==nowEditCol">Cancel</a>
<a href="javascript:void(0);" v-on:click="sureEdit($index)" v-if="$index==nowEditCol">Confirm</a>
</td>
<td><a href="javascript:void(0);" v-on:click="deleteStu($index)">Delete</a></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var studyArrJson=[
{'stuId':'stu0001,'name':'Zhang San','ywScores':85,'sxScores':90},
{'stuId':'stu0002','name':'Li Si','ywScores':88,'sxScores':85},
{'stuId':'stu0003','name':'Wang Wu','ywScores':65,'sxScores':75},
{'stuId':'stu0004','name':'Liu Liu','ywScores':58,'sxScores':96}
);
var reportCardVm=new Vue({
el:'#reportCard',
data:{
studyArr:studyArrJson,//Score roll call
addArr:{'stuId':'','name':'','ywScores':'','sxScores':''},//New form field
nowEditCol:-1,//Current edited row
editStatus:false,//Current editing status
searchTxt:'',//Search field
sortKey:'ywScores',//Sort key
sortClass:'1',//Sort up and down1For ascending,-1For descending
},
methods:{
//Initiate index data editing
startEdit:function(index){
this.nowEditCol=index;
},
//Cancel editing status
cancelEdit:function(){
this.nowEditCol=-1;
},
//Initiate confirmation for index data modification
sureEdit:function(index){
this.studyArr.$set(index,this.editArr);
this.nowEditCol=-1;
},
//Delete data at index
deleteStu:function(index){
this.studyArr.splice(index,1);
},
//Add Scores
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();
},
//Reset the new form
resetStu:function(){
this.addArr={
'stuId':'',
'name':'',
'ywScores':'',
'sxScores':''
}
}
},
computed:{
//Store the current editing object
editArr:function(){
var editO=this.studyArr[this.nowEditCol];
return {
'stuId':editO.stuId,
'name':editO.name,
'ywScores':editO.ywScores,
'sxScores':editO.sxScores
}
}
}
)
</script>
</body>
</html>
Online test address: http://jsbin.com/kavugufuci/edit?html,output
A VUE object is a view model, which is basically composed of the following parts
Among them, 'data' actively stores the properties of the current view, which can be bound on the page, and 'methods' are mainly used to store the methods of the current view model. 'computed' is also used to store the properties of the current view, but it is a computed property. Its value may be directly affected by a value in 'data'. It is equivalent to changing a value in the 'data' of the view, and it will automatically change accordingly, just like the functionality of '$watch' in Angular. Vue also hints at the '$watch' function, but using computed properties is more quick and efficient.
Analysis of the current example view model
These are the current view model properties. If data needs to be bound to HTML, any data that needs to be responsive should be initially set here. If any data will be used later, it should also be set up at the initial time. Manually adding later will not take effect. The specific functions of each field in this project can be seen in the text comments.
This is the method of this view model, which can be directly bound to HTML or called internally with 'this.' at the beginning. The 'this' inside refers to the current view model, and it can call all properties and methods of the current view model. This is also the place where we handle data and write business logic. The specific functions of each method in this example project can be seen in the text comments.
This is the computed property, whose value is determined by nowEditCol under data, which is equivalent to writing a $watch method to monitor nowEditCol, but here Vue internally handles it, and it is recommended to use it in the project.
The current project uses the view model method, which is directly bound to the DOM element, which is also the mode of popular MVVM frameworks.
I have always been learning about Vue and avalon, ng, react, but considering the speed of entry and the difficulty of getting started, I first chose Vue, avalon, but again due to the compatibility of Vue, if you want to use Vue, you have to give up
Android4.2version of the native browser, so I started to use avalon, and have done some H5project, but because avalon is just a personal project of Suteng Zhengmei, I feel that there are some stability and future development issues
It is hard to say, as I have found some bugs while running many test cases. Of course, in the projects I have done, I have not fallen into the big pit of avalon, but the compatibility of avalon is worth praising. Suteng Zhengmei should have spent a lot of effort,
If your project needs to be compatible with non-standard browsers such as IE6-7-8, and I also want to experience the high efficiency of MVVM framework development at the same time, avalon is your best choice. With the increasingly good compatibility environment at present, if I receive a project that needs to be compatible with non-standard browsers such as H5project
I will choose to use Vue to do some projects.
For more information on Vue learning, please refer to the official documentation: http://cn.vuejs.org/guide/, which is also the best place to start learning Vue.
This article has been compiled into the 'Vue.js Front-end Component Learning Tutorial', welcome to learn and read.
That's all for the content of this article. I hope it will be helpful to everyone's learning, and I also hope everyone will support the Naya Education Tutorial more.
Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously, and this website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)