English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Los cambios en el frontend son innumerables, el año pasado NG estaba en moda, este año react, vue están en moda, vi unos cuantos tutoriales de ng y siempre me mareaba con los conceptos, react es de Facebook, estoy aprendiendo constantemente, al mismo tiempo, dediqué tiempo a aprender vue, revisé el documento oficial de vue, después de verlo, me dio una sensación de entrada, siempre siento que quiero probarlo.
Justo el fin de semana, hice una pizarrón de calificaciones para divertirme. Antes también usé avalon y hice uno similar, desde el proceso, los dos marcos evitan que los desarrolladores operen con frecuencia el DOM, salen del mar de DOM, y se concentran en procesar lógica de negocios de datos. Desde los dos ejemplos, se puede aumentar la eficiencia de desarrollo varias veces.
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>ingreso de calificaciones/procesar</caption>
<tbody>
<tr>
<td width="170">número de matrícula:<input type="text" v-model="addArr.stuId"></td>
<td width="170">nombre:<input type="text" v-model="addArr.name"></td>
<td width="170">chino:<input type="text" v-model="addArr.ywScores"></td>
<td width="170">matemáticas:<input type="text" v-model="addArr.sxScores"></td>
<td colspan="2" width="120">
<a href="javascript:void(0);" v-on:click="submitStu">ingresar</a>
<a href="javascript:void(0);" v-on:click="resetStu">restablecer</a>
</td>
</tr>
<tr>
<td aling="left">
búsqueda：<input v-model="searchTxt" type="text" class="searchInput">
</td>
<td>
campo de orden:
<select v-model='sortKey'>
<option value="ywScores">chino</option>
<option value="sxScores">matemáticas</option>
</select>
</td>
<td>
tipo de ordenamiento:
<select v-model="sortClass">
<option value="1">ascendente</option>
<option value="-1">descendente</option>
</select>
</td>
<td colspan="3></td>
</tr>
</tbody>
</table>
<table class="scoreList">
<caption>lista de calificaciones</caption>
<thead>
<th width="170">número de matrícula</th>
<th width="170">nombre</th>
<th width="170">lengua</th>
<th width="170">matemáticas</th>
<th colspan="2" width="120">operación</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="iniciarEdicion($index)" v-if="$index!=nowEditCol">editar</a>
<a href="javascript:void(0);" v-on:click="cancelarEdicion" v-if="$index==nowEditCol">cancelar</a>
<a href="javascript:void(0);" v-on:click="aceptarEdicion($index)" v-if="$index==nowEditCol">confirmar</a>
</td>
<td><a href="javascript:void(0);" v-on:click="eliminarAlumno($index)">eliminar</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,//Lista de nombres de calificaciones
addArr:{'stuId':'','name':'','ywScores':'','sxScores':''},//Campos del formulario añadidos
nowEditCol:-1,//Fila actual editada
editStatus:false,//¿Está actualmente en estado de edición?
searchTxt:'',//Campo de búsqueda
sortKey:'ywScores',//Clave de clasificación
sortClass:'1',//Clasificación ascendente y descendente1Para asc,-1Para desc
},
methods:{
//Iniciar edición de datos del índice index
startEdit:function(index){
this.nowEditCol=index;
},
//Cancelar estado de edición
cancelEdit:function(){
this.nowEditCol=-1;
},
//Iniciar confirmación de modificación de datos del índice index
sureEdit:function(index){
this.studyArr.$set(index,this.editArr);
this.nowEditCol=-1;
},
//Eliminar datos del índice index
deleteStu:function(index){
this.studyArr.splice(index,1);
},
//Añadir puntuación
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();
},
//Restablecer el formulario de adición
resetStu:function(){
this.addArr={
'stuId':'',
'name':'',
'ywScores':'',
'sxScores':''
}
}
},
computed:{
//Almacenar el objeto actual de edición
editArr:function(){
var editO=this.studyArr[this.nowEditCol];
return {
'stuId':editO.stuId,
'name':editO.name,
'ywScores':editO.ywScores,
'sxScores':editO.sxScores
}
}
}
})
</script>
</body>
</html>
Dirección de prueba en línea: http://jsbin.com/kavugufuci/edit?html,output
Un objeto VUE es un view model, básicamente consta de las siguientes partes
Dentro de esto, data almacena activamente las propiedades del view actual, es decir, los datos que se pueden enlazar en la página, methods se utiliza principalmente para almacenar los métodos del view model actual, computed también se utiliza para almacenar las propiedades del view, pero es una propiedad calculada, su valor puede depender directamente de algún valor en data, es equivalente a modificar algún valor en data del view, que se modificará automáticamente, es equivalente a usar la función $watch en ng, el actual vue también sugiere la función $watch, pero usar propiedades calculadas es más rápido y eficiente.
Análisis del view model actual de este ejemplo
Estas son las propiedades del view model actual, si los datos deben enlazarse al html, todo lo que debe responder debe estar inicialmente configurado aquí, si se utilizarán posteriormente también deben estar configurados en el momento inicial, no tendrá efecto agregarlos manualmente más tarde, las funciones específicas de cada campo de este proyecto se pueden ver en los comentarios de texto.
Este es el método del view model, se puede enlazar directamente al html o llamar internamente con this., todos los this. dentro apuntan al view model actual, pueden llamar todas las propiedades y métodos del view model actual, este es también el lugar donde procesamos los datos y escribimos la lógica de negocio, las funciones específicas de cada método de este proyecto se pueden ver en los comentarios de texto.
Aquí hay una propiedad calculada, su valor está determinado por nowEditCol en data, es equivalente a escribir un método $watch para monitorear nowEditCol, pero aquí vue interna lo maneja, se recomienda su uso en proyectos.
El proyecto actual utiliza el método de modelo de vista, que se绑绑定直接 en los elementos DOM, que es también el modelo de frameworks MVVM populares.
He estado siempre informado sobre vue y avalon, ng, react en este aspecto, pero considerando la velocidad de entrada y la dificultad de inicio, primero elegí vue, avalon, pero también debido a la compatibilidad de vue, si se debe usar vue, debe renunciar
Android4.2versiones de navegadores nativos, por lo que comenzamos a usar avalon, he hecho algunos proyectos H con avalon,5proyecto, pero debido a que avalon es solo un proyecto personal de Tusi Zhengmei, siento que en estabilidad y desarrollo futuro siento
Es difícil decir, incluso cuando se ejecutan muchos casos de prueba, también se encuentran algunos BUG, por supuesto, en los proyectos que he hecho, no he caído en el agujero de avalon, pero la compatibilidad de avalon es digna de elogio, Tusi Zhengmei debe haber gastado mucho esfuerzo,
Si tu proyecto debe ser compatible con navegadores no estándar, como IE6-7-8, y también quiero experimentar la eficiencia de desarrollo de frameworks MVVM, avalon es tu opción preferida. En la situación actual en la que el entorno de compatibilidad es cada vez mejor, si en el futuro recibimos H5proyecto
Elegiré usar vue para hacer proyectos.
Para obtener más información sobre el aprendizaje de vue, consulte los documentos oficiales: http://cn.vuejs.org/guía/, esto también es el mejor lugar para comenzar con vue.
Este artículo se ha organizado en el 'Tutoriales de Componentes Frontend de Vue.js', bienvenidos a aprender y leer.
Esto es todo el contenido de este artículo, espero que ayude a su aprendizaje y también espero que todos lo apoyen en el tutorial de grito.
Declaración: El contenido de este artículo se obtiene de la red, pertenece a los propietarios originales, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio web no posee derechos de propiedad, no se ha realizado un procesamiento editorial humano y no asume ninguna responsabilidad legal relevante. Si encuentra contenido sospechoso de infracción de derechos de autor, bienvenido a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar, y proporcione evidencia relevante. Una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.