Vue Notes 11.24 Utilice Vue para lograr los efectos de agregar, eliminar, modificar y verificar el ciclo de vida de Vue
No es fácil de explicar. directamente o mire ejemplos
Aquí hay algunas cosas a tener en cuenta:
Este es un método para agregar objetos de estudiantes a la matriz de objetos de estudiantes (se utilizan dos métodos de escritura, es decir, el orden de expansión)
Declaramos que los objetos de los estudiantes también se expanden primero y luego el otro, solo que este último es más fácil de entender. Este es solo un método diferente. De hecho, todos son iguales. método, uno primero y luego el otro. Este último es más fácil de entender)
Declaramos stu para recibir las propiedades y valores de this.student, y luego declaramos this.student para recibir las propiedades y valores del objeto this.student. estudiante, luego declaramos this.student como el primer objeto de la matriz, luego lo declaramos como el primer objeto de la matriz.
Luego, agregamos stu al final de estudiantes, aquí notamos el uso de "..." para extender stu
let stu = {.this.student}? El estudiante expandido es { no: ''xxx, nombre: 'xxx', edad: 0, sexo: 'xxx'?}?
Esto equivale a declarar un nuevo objeto let stu =?{ no :'xxx, nombre: 'xxx', edad: 0, sexo: 'xxx'?}
Si no lo expandes, entonces stu = estudiante, los dos objetos son iguales, lo que significa que ellos tienen la misma dirección de almacenamiento, por lo que si cambia el valor de estu o estudiante, ¿afectará el valor de la otra propiedad?
El método de eliminación interceptará la matriz de objetos según el subíndice del objeto (estudiantes) y eliminará el objeto con el mismo subíndice que el botón Eliminar de la matriz.
Este método pasará el índice de subíndice. Debido a que usamos una lista que representa v-for anteriormente, podemos pasar el índice directamente al vincular el método, es decir, @click=' delStudent(index)'
El primero de los dos métodos aquí La primera es asignar el valor de la lista al cuadro de edición emergente cuando se hace clic en el botón Modificar
Debido a que los datos de la lista se obtienen de la matriz de estudiantes a través de la representación de la lista v-for, usted Puede usar atributos para obtenerlo de la matriz de estudiantes. Elimine el objeto correspondiente a esta fila en la lista de la matriz.
Dado que los datos de la lista se obtienen de v-for en la matriz de objetos estudiantes, puedes usar un atributo para obtener el objeto de esta fila en la lista de estudiantes
Nosotros ¿Pasará un atributo aquí y usará el atributo no?
Declare stu para recibirlo y use la función de orden superior buscar de la matriz para encontrar objetos con el mismo valor del atributo no en estudiantes y el valor del atributo no en la lista, y asigne ellos a stu
Luego expanda stu para que this.student = {...stu}? .stu}?
Dado que las propiedades del objeto estudiante están vinculadas al formulario en En el cuadro de edición, puede agregar Asignar el valor al cuadro de edición emergente
El segundo método es hacer clic en el botón de edición en el cuadro de edición para realizar cambios en la lista
Del mismo modo, puede pasar el número no en la lista de estudiantes. Encuentra el objeto correspondiente.
La razón por la que no pasamos no como parámetro aquí es que cuando abrimos el cuadro de edición mediante el botón modificar, cada propiedad del objeto de estudiante ya tiene un valor, por lo que podemos usarlos directamente.
¿Qué pasa con el uso de stu para recibir objetos con el mismo atributo no?
Después de usar stu para recibir un objeto sin el mismo valor de atributo, redefinirá el valor de atributo del objeto que recibe stu con el valor de atributo de estudiante.
Esto afectará a uno de la matriz de objetos estudiantes El objeto correspondiente es el que encontramos sin
(1). Plantilla
el: '#app', especifique el contenedor de montaje
Especifique la plantilla (si hay una plantilla, Vue representará la plantilla completa; si no hay una plantilla, Vue utilizará todo el contenido de el como plantilla)
plantilla? Si hay una plantilla, ¿Vue la representará? Si no hay una plantilla, representará todo en el
template:'lt;divgt;lt;h2gt;{{name}}lt;/h2gt;lt;h2gt;{{age}lt; /h2gt;lt;/divgt;',
(2). Montaje manual
Monte manualmente el contenedor mediante el método $mount de la instancia de vue (aquí debe permitir vm). = new Vue ({}))
La opción pública ***el especifica el contenedor de montaje. Cuando la plantilla se procesa correctamente, montará la página inmediatamente
El beneficio de. El método $mount es que usted mismo puede elegir el tiempo de montaje.
vm.$mount('#app')
Por ejemplo, ¿podrías poner esto en un temporizador?
setTimeout(()? =gt;?{
vm.$mount('#app')
},?1000);
beforeCreate(){}: beforeCreate() {}: antes de la creación (antes de la inicialización de datos)
Se ha creado la instancia de Vue, pero aún no se ha inicializado. (Imprima esta propiedad en esta función para obtener la instancia de Vue. Pero si imprime las propiedades en datos, no estarán definidas)
Esta es una función de ciclo de vida, a menos que desee configurar el contenido de la instancia de Vue, de lo contrario, esta función básicamente no se utilizará
create(){}: después de la creación (cuando se completa la inicialización de datos)
La instancia de Vue se inicializa según beforeCreate(). En términos sencillos, esto significa propiedades que pueden imprimir datos en Vue)
Esta función de ciclo de vida se usa generalmente para inicializar datos administrados por Vue, por ejemplo: las solicitudes ajax se colocarán aquí.
beforeMount(){}: antes del montaje (la plantilla se ha renderizado correctamente, pero el contenido aún no se ha montado)
La expresión de diferencia aún no está disponible {{name} } y el contenido mostrado sigue siendo { {name}}
Función de ciclo de vida básicamente no utilizada
montada(){}: montaje completado (la plantilla se ha renderizado correctamente y el contenido de la plantilla se ha montado en la página)
{{name}} mostrará el valor en los datos
Esta función de ciclo de vida se usa generalmente para volver a modificar el DOM
beforeUpdata(){}: antes de la modificación (los datos han cambiado, pero no se han vuelto a cargar en la página)
beforeUpdata(){}: antes de la modificación (los datos han cambiado, pero no se ha recargado en la página)
beforeUpdata() {} beforeUpdata(){}: Antes del cambio (los datos han cambiado, la página no se ha recargado)
El valor de los datos en Vue ha cambiado, pero la página todavía tiene los mismos datos porque no se ha recargado.
actualizado(){}: el cambio se ha completado (los datos han cambiado y la página se ha recargado). )
Esto es fácil de entender, los datos en los datos han cambiado y la página se ha vuelto a cargar. beforeDestroy(){}： Antes de la destrucción
beforeDestroy()?{
console.log('-----------------beforeDestroy ------------------');
//Esta función de ciclo de vida se utilizará más
console log(. this);
///? Realice cualquier cambio en los datos sin volver a mostrarlos en la página
this.name?=?Wang Wu'
},
destruido(){}: destrucción completa
Esta función de ciclo de vida casi nunca se usa
// A través del método $mount de la instancia de vue para montar manualmente el contenedor
//Use la opción public***el para especificar el contenedor de montaje, que montará la página inmediatamente después de que la plantilla se represente correctamente
// ?Usar El beneficio del método $mount es que puedes elegir cuándo montar.
vm.$mount('#app')
La modificación de datos después de que se hayan destruido y antes de que se destruyan no es válida.