Básicamente, ordenamos todas las pautas en el sitio web oficial: http://vuejs.org/guide/index.html Aquí tomamos una aplicación de lista de tareas como un ejemplo para unir todos los solo relevantes. Todo el código de este artículo está en GitHub https://github.com/lihongxun945/vue-todolist
Instancia de vue
Una aplicación VUE se inicia mediante un arranque de instancia de Vue root, y la instancia VUE se crea así:
var vm = new Vue ({// opciones})Una instancia es en realidad una VM en el MVVM. Todos los atributos en los datos en el objeto de configuración entrante se montarán en la instancia. Para evitar los conflictos de nombres, los métodos incorporados de Vue se montarán en la instancia con propiedades que comienzan con $.
La instancia pasará por el siguiente ciclo de vida desde la creación hasta la destrucción:
Durante la inicialización, aproximadamente tres pasos:
• Monitoreo de datos vinculante, es decir, monitoreo de datos
• Compilar plantillas
• Inserte el documento o reemplace el DOM correspondiente
# Sintaxis básica vue
Enlace de datos
Vue usa una sintaxis de mastache. Las sintaxis de unión comúnmente utilizadas se dividen en varias categorías:
• Sintaxis mastache, como {{data}} {{data | filtrar}}
• Propiedades de unión de unión a V, como V-Bind: HREF, V-Bind: Clase
• Eventos vinculantes V-On, como V-ON: Haga clic, V-ON: Enviar
Entre ellos, V-* es directiva
ejemplo:
<div v-bind: class = "[classA, ISB? ClassB: '']">
Cálculo de atributos
VUE admite una sintaxis de cálculo de atributos muy interesante. Puede especificar que otros atributos calculan un atributo, por lo que no necesita usar $ Watch para implementarlo:
var vm = new Vue ({el: '#Example', Data: {A: 1}, COMPUTADO: {// a Getter calculado B: function () {// `this` señala a la instancia VM devuelve esto.a + 1}}})## La sintaxis relacionada con el control de procesos y la lista incluyen `v-if`,` v-show`, `v-else`,` v-for`
Forma
Enlace de datos de dos vías:
<input type = "text" V-Model = "Mensaje" PlaceHolder = "Edit Me">
<input type = "checkbox" id = "jack" value = "jack" v-model = "checkedNames">
## El método de implementación de animación es el mismo que el de Angular y React, y se implementa agregando y eliminando clases. # Componente
Uso básico de componentes
La definición de componente incluye dos partes:
1 Crear clase de componentes:
var perfil = vue.extend ({plantlate: "<iv> lily </div>"});2 Registre un nombre de etiqueta:
Vue.component ("Me-Profile", perfil);
De esta manera, podemos usar este componente a través de TagName:
<Div id = "TODO"> <MyProfile> </myprofile> <formul v-on: subt = "add" v-on: subt.prevent> <input type = "text" v-model = "input"/> <input type = "subt" value = 'add'/> </form> ... </div>
Vue.component ("Me-Profile", perfil); es un registro global. Si solo se usa en una determinada página, se puede registrar localmente:
var vm = new Vue ({el: "#todo", componentes: {"my-perfil": perfil}, ...}Debido a que nuestra instancia de Vue está vinculada al elemento TODO, no es válido si My-Profile se coloca fuera de este elemento. Solo colocándolo adentro se inicializará por esta instancia de Vue.
Notas:
Los parámetros que pueden pasar el constructor VUE básicamente se pueden usar en Vue.extend, pero debe prestar atención a los dos parámetros de EL y datos. Para evitar compartir el mismo objeto entre diferentes instancias, es más confiable devolver siempre un nuevo objeto a través de la función:
var myComponent = vue.extend ({data: function () {return {a: 1}}})Debido a que los parámetros son los mismos, en realidad son lo mismo, pero uno es un componente y el otro se usa para guiar a Vue para comenzar.
Notas sobre plantillas
Debido a que Vue es un DOM nativo, algunas etiquetas personalizadas pueden no cumplir con el estándar DOM. Por ejemplo, si desea personalizar un TR en la tabla, si insertar mi componente directamente no cumple con la especificación, debe escribirlo así:
<table> <tr is = "my-component"> </tr> </table>
Props datos de aprobación
En Vue, cada componente es independiente y no puede y no debe acceder directamente a los datos de la clase principal. Entonces, ¿es muy similar al método de React para pasar datos a los subcomponentes a través de accesorios?
A diferencia de React, los subcomponentes en Vue deben declarar primero sus propios accesorios:
var perfil = vue.extend ({props: ["name"], plantate: `<h2> {{name}} 's todo list </h2> <h4> {{name}} es una buena chica </h4>`});Entonces podemos pasar parámetros como este al usar el perfil:
<my-profile name = 'lily'> </myprofile>
Esto es pasar parámetros a través de literales, por lo que el valor aprobado debe ser una cadena. Otra forma es pasar dinámicamente los parámetros y pasar los parámetros a través de V. Puede unir datos en parámetros de bidireccionales o no de sin cuerda:
<my-profile v-bind: name = 'input'> </myprofile>
Si V-Bind es una cadena, es el campo correspondiente en los datos del componente principal, por ejemplo, lo anterior es el valor de la entrada que está vinculado en ambas direcciones. Si es un número, está vinculado a un número.
Vue también puede especificar explícitamente la unión de datos unidireccional o bidireccional:
<
Verificación de accesorios
Un buen componente siempre debe verificar que los parámetros sean correctos primero, y también puede necesitar establecer los valores predeterminados de algunos parámetros:
var perfil = vue.extend ({input: {type: string}});Comunicación de componentes entre padres e hijos
Los accesorios mencionados anteriormente son en realidad una forma para que el componente principal pase mensajes al componente infantil.
En el componente infantil hay este. $ Sin embargo, ahora deberíamos evitar hacerlo. Debido a que el componente en sí es encapsular la lógica independiente, si accede directamente a los datos del componente principal, destruirá la encapsulación del componente.
Por lo tanto, aún debemos comunicarnos a través del componente principal que pasa accesorios al componente infantil.
Por supuesto, los accesorios solo pueden hacer devoluciones de llamada. Este tema ha sido discutido en React. El método de React es usar accesorios para pasar una función de devolución de llamada al componente infantil. En realidad, realmente no me gusta esta forma de aprobar funciones de devolución de llamada, prefiero la forma de los eventos. Vue Neutronics puede comunicarse con el componente principal a través de eventos. Enviar mensajes al componente principal es a través de esto. $ Dispatch, y enviar mensajes al componente infantil es a través de esto. $ Boardcast. Aquí, se envían mensajes a todos los padres e hijos, pero una vez que se ejecuta una devolución de llamada, se detendrá a menos que la función de devolución de llamada devuelva explícitamente verdadero.
Dividimos la lista de TODO anterior en diferentes componentes para implementarla, para que podamos experimentar cómo comunicarnos con componentes en dos vías. Dividimos dos componentes, a saber, lista y forma.
El formulario es responsable de procesar la entrada del usuario y enviar un mensaje Agregar al componente principal al enviar el formulario. El código es el siguiente:
var form = vue.extend ({props: {username: {type: string, default: "sinnamed"}}, data: function () {return {input: "",};}, template: `<h1> {{{username}}} 's List </h1> <formul type = "text" v-model = "input"/> <input type = "enviar" value = 'add'/> </form> `, métodos: {add: function () {this. $ shopt (" add ", this.input);La lista solo es responsable de mostrar la lista y manejar las operaciones de verificación de usuarios. Después de recibir el mensaje Agregar, agregará una entrada en sí misma:
var list = vue.extend ({Template: `<ul> <li v-For = 'toDo in list'> <etiqueta v-bind: class =" {done: toDo.Done} "> <input type =" checkbox "v-model =" toDo.done "/> {{toDo.title}}} </sel> </li> </ul>` InitList: {type: array}}, data: function () {return {list: []}}, eventos: {add: function (input) {if (! Input) return false;Luego, debido a que estos son dos componentes, por supuesto, se necesita una instancia de Vue para arrancar el inicio, nuestra instancia es la siguiente:
var vm = new Vue ({el: "#Todo", Components: {"toDo-form": form, "toDo-list": list}, events: {add: function (input) {this. $ broadcast ("add", input);}}});Tenga en cuenta que, de hecho, la forma y la lista son componentes lógicamente paralelos, por lo que no tienen una relación padre-hijo, y todos son hijos de VM. Aquí, VM lo reenviará a la lista después de recibir el mensaje del formulario.
El código HTML es más simple:
<div id = "TODO"> <TODO-FORM USERNAME = 'LILY'> </TODOFORM> <TODO-LIST> </TODO-LIST> </div>
Ranura
La ranura se puede usar para insertar HTML renderizado desde el componente principal en el componente infantil. No está claro cuándo se necesita esto, y esto es demasiado invasivo para el componente infantil.
Componentes del interruptor dinámico
Esta función se siente un poco redundante. En muchos casos, debemos cambiar a través del código lógico en lugar de a través de componentes dinámicos incorporados. Sin embargo, es muy conveniente implementar una función similar a la conmutación de pestañas.
Aquí agregamos una página Acerca de la lista de TODO. Entonces, primero necesitamos cambiar VM en un componente, que se llama TODO, que es toda la página de TODO:
var tODO = vue.extend ({Template: `<Div id =" TODO "> <TODOFORM USERNAME = 'LILY'> </TODOFORM> <TODO-LIST> </TODO-LIST> <LOT> NO SEVIS función (entrada) {this. $ Broadcast ("Agregar", entrada);De hecho, la primera línea de cambios es la primera línea.
Entonces necesitamos crear un componente Acerca de:
var acerca de = vue.extend ({Template: `<Div id =" Acerca de "> <p> Acerca de la lista de TODO v0.1.0 </p> <p> contenido aquí </p> </div>`});El siguiente es el punto clave. Queremos crear una VM de instancia, que sea responsable de cambiar estas dos páginas:
var vm = new Vue ({el: "Body", Data: {CurrentView: "TODO"}, Components: {"toDo": tODO, "Acerca de": Acerca de}});Aquí definimos un campo CurrentView, que, por supuesto, puede ser cualquier nombre, y luego usamos una etiqueta de componente especial para cambiar los componentes:
<component :is="currentView"></component> <ul> <li><label><input type="radio" name='page' value='todo' v-model='currentView'> Home</label></li> <li><label><input type="radio" name='page' value='about' v-model='currentView'> About</label></li> </ul>
Hay dos cosas a tener en cuenta en el código anterior:
• Use el componente de etiqueta especial y luego use la propiedad: IS para cambiar los componentes.
• Radio Modifique el campo CurrentView a través de la unión bidireccional, para que pueda cambiar después de hacer clic.
El principio de implementación de la unión de datos
VUE llama a reactivo de enlace bidireccional, que puede traducirse como enlace de datos receptivo. Se implementa internamente a través de los métodos Getter y Setter definidos por ES5, por lo que no admite IE8 y los siguientes navegadores. Hay dos cosas fáciles para cometer errores en esta implementación:
• Si agrega y elimina directamente los atributos en los datos, es imposible detectarlo. En general, la eliminación no será posible, pero puede agregarse dinámicamente. En este momento, debe agregarse a través de VM. $ Set ("nombre", valor).
• Los cambios dentro del objeto no se pueden detectar, es decir, solo pueden detectar cambios en la propiedad de los datos. Si Data.A es un objeto, entonces data.ab = 1 Este cambio no se puede detectar. En este caso, debe crear un nuevo objeto y asignarlo a Data.a.
Mecanismo de actualización asincrónica
¡La actualización de Vue a DOM es asíncrona! Esta asincrónica se realiza en una cola asíncrona, pero esta cola asíncrona se ejecutará en el bucle de evento actual. Por lo tanto, si modifica los datos, es incorrecto ir al DOM inmediatamente para hacer la operación de consulta. En este momento, el DOM aún no se ha actualizado. La forma correcta es hacer esto:
vm.msg = 'nuevo mensaje' // Cambiar dataVm. $ el.TextContent ==== 'nuevo mensaje' // falsevue.nextTick (function () {vm. $ el.textcontent === '' nuevo mensaje '// true})O esto:
vm. $ nextTick (function () {this. $ el.TextContent === 'nuevo mensaje' // true})Tomó mucho tiempo leer los componentes. Aquí hay otro punto: directiva
Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.