Vue.js es una biblioteca para construir interfaces web basadas en datos. El objetivo de Vue.js es implementar componentes de enlace de datos receptivos y vistas combinadas a través de la API más simple posible. (¡Esta es una explicación oficial!)
El editor nunca ha usado AngularJS, ni se ha utilizado reaccionar. No puedo explicar las diferencias en los tres en detalle. Si quieres saber, hay un análisis oficial. Haga clic aquí para verlo.
El editor se ha dedicado al desarrollo frontal durante más de un año. Al principio, había demasiadas tecnologías en el desarrollo frontal. El editor era impotente y no podía tener en cuenta. Después de comprender, eligió aprender el camino de aprendizaje del aprendizaje de las fusiones básicas de JS nativas y jQuery. El editor usa Vue.js debido a las necesidades comerciales. ¿Por qué no eliges AngularJS? De hecho, no puedes abandonar JQuery al mismo tiempo. Vue.js y jQuery pueden ser perfectamente compatibles. Debido a este proyecto, el editor ha estado trabajando horas extras durante mucho tiempo y constantemente estudiando para evitar el aumento en el tiempo de desarrollo del proyecto. Sin más preámbulos, comencemos parte del resumen del aprendizaje VUE del editor. Si no escribe bien, no se acostumbra a ello. Escribir artículos siempre ha sido mi debilidad. . . .
Aquí está el ejemplo de Vue, como la cadena principal
El componente infantil se puede pasar esto. PARA su componente principal. Se puede acceder a la instancia raíz utilizando esto.root. El padre tiene una matriz. Los niños, y todos sus elementos; Por supuesto, en el proyecto, nuestros componentes no pueden tener solo uno o dos. Cuando hay demasiados componentes, es difícil para nosotros recordar la ubicación del componente en los niños. Podemos usar la Directiva V-REF para crear un gancho para nuestro componente. Este gancho es el índice cuando nuestros otros componentes acceden al componente.
// Este es uno de mis componentes <msg v-ref: msgs> </msg> // En este momento, hemos establecido un índice de msgs para este componente de msg // podemos acceder al componente var vm = new Vue ({}); VAR Children = VM. $ refs.msgs // Acceda a nuestros componentes infantiles de esta manera // v-ref es una matriz u objeto, que es una colección de componentes que creamos todos los ganchos de referencia.Aquí, le mostraré una foto y echaré un vistazo al contenido relacionado con los padres, los niños y los $ referentes (parece que la imagen es un poco borrosa y no será una imagen dinámica completa. Es vergonzoso y no puede ver con claridad. ¡Puedes crear una demostración e imprimirla!)
Aunque podemos acceder directamente a los componentes de toda la instancia de esta manera, no se recomienda hacerlo, ya que es muy malo que los niños modifiquen directamente el estado del componente principal, lo que hará que los componentes padre e hijos sean fuertemente acoplados. Idealmente, cada componente solo puede modificar su propio estado porque el alcance de cada componente es independiente;
En este caso, Vue también nos trae sus eventos personalizados
Use $ Dispatch () para enviar eventos, y los eventos burbujean a lo largo de la cadena principal;
Use $ Broadcast () para transmitir eventos, y los eventos se transmiten a todos los descendientes.
Se ve un poco abstracto, es más fácil de entender con un ejemplo.
// $ Dispatch () Bubble Case <Se ejemplo-> <div id = "app"> <!-Componente Communication 1-> <section> <viv> <etiqueta for = "" data de msg: </etiqueta> {{msg}} </div> <!-subcomponent-> <sgsg> </sg> </sect> </div> <temple Id = "msg" <viv " V-Model = "msg"> <a href = "javascript :;" @click = "add_data"> add </a> </div> </template> <script> vue.component ('msg', {// El azúcar de sintaxis se usa para registrar el componente directamente, y el sencillo y shortcut plantplate: '#msg', data: function () {return {msg: 'abc'}}, métodos: {add_data () {) Evento, el método $ Dispatch () se activará; // Este método es operar directamente el componente principal. 'add_msg': function (msg) {// add_msg es un método utilizado para escuchar el subcomponente.Después de leer este código, creo que todos conocen el uso de $ Dispatch (). De hecho, hay dos parámetros en él. El primer parámetro es que el componente principal escucha un nombre de método en el objeto de eventos del componente infantil. Los dos deben ser consistentes; El segundo parámetro son los datos actualizados por el componente infantil, que también se pasa a los datos para actualizarse sincrónicamente al componente principal. Luego, el componente principal usa este parámetro para realizar las operaciones correspondientes.
// El uso del método $ Broadcast () es el mismo que el de $ Dispatch (). La diferencia es que el objeto de evento se crea en el componente infantil, y la función activada en el componente principal está, por el contrario. Lo que queremos decir aquí es que si los datos del componente infantil dependen completamente de los datos del componente principal, entonces no hay necesidad de usar el método de entrega de eventos generales. Solo necesita obtener los datos del componente principal a través de accesorios y vincularlos al componente infantil.
< v-model = "name"> </div> </div> <div> <etiqueta for = ""> host: </label> <div> <input type = "text" v-model = "inst"> </div> </div> <div> <label for = ""> host: </etiqueta> <div> <input type = "text" v-model = "inst"> </div> <iv> <div> <div> <div> for = ""> </label> <div> <a href = "javascript :;" @click = "add_table"> add </a> </div> </div> <h3> La siguiente tabla es la información del componente infantil: </h3> <!-Atrae los datos de Table_Data del componente principal al componente infantil-> <broadcase: data = "table_data"> </scocase> </section> <Template> <template> </sptleplate> </sptleplate> </Template> id = "Broadcase"> <viv> <table> <thead> <tr> <th <th> id </th> <th> name </th> <th> hobbies </th> </tr> </tbody> <tr v-for = "list in data"> <td> {{{list.id}}}} </td> <td> {{{{{list. list.inst}} </td> </tr> </tbody> </bable> </div> </template> <script> vue.component ('Broadcase', {// Este es el azúcar de sintaxis utilizado para registrar el componente, y la plantilla simple y de Shortcut: '#Broadcase', props: ['Data'], // se usan los propios que se usan para aceptar los parámetros de los principales parámetros y también pueden aceptar los parámetros de los parámetros y también los componentes de los parámetros de la plantilla de los parámetros, y también las componentes de los parámetros de los parámetros, y también las componentes de los parámetros de la plantilla de los parámetros. Los datos. '#app', data: {table_data: [{id: 1, nombre: 'gjei', inst: 'gjweir'}, {id: 2, nombre: 'jiUyer', inst: 'oiUyt'}]}, métodos: {add_table: function () {var set = {id: this.id, name: this.name, inst: inst: inst: inst: inst: inst: inst: inst: inst: inst: inst: inst: inst: inst: inst: inst: inst: inst: inst: inst: inst: inst: this.inst}; this.table_data.push (set); // this. $ broadcast ('test', set);Puede hacer clic aquí para probar los dos ejemplos mencionados anteriormente. El archivo se ha cargado en la demostración de comunicación de componentes parentales del espacio personal VUE
Cuando terminé de escribir esto, miré hacia atrás y vi que el contenido que escribí parecía ser un poco desordenado, ¡lo cual estaba realmente avergonzado! Pensé en escribir un blog y construir mi propia biblioteca de notas hace mucho tiempo, pero cuando intenté escribirlo antes, realmente no podía hacerlo. Recientemente, he decidido insistir en escribir sin importar cómo lo escriba. ¿Qué pasa si mi estilo de escritura de repente mejora algún día!
De hecho, la aplicación no es muy difícil. En realidad proporciona el monitoreo de la interfaz API correspondiente. Cómo operar y cambiar la aplicación real del proyecto aún debe ser escrita por nosotros mismos. La clave es mejorar nuestro nivel JS. ¡Después de todo, hay más y más aplicaciones web complejas! Espero que a los estudiantes a los que les gusta el front-end se alenten mutuamente en el camino hacia JS.