Vue.js práctico + Vue pequeños trabajos

El objetivo de Vue.js es implementar enlaces de datos responsivos y componentes de vista compuesta a través de la API más simple posible.

Vue.js es un framework MVVM, donde html es la capa de vista y js es la capa de modelo. La lógica subyacente en el medio la completa Vue.js (usando la instrucción v-model) para lograr el efecto vinculante. Cambiar cualquier capa cambiará la otra capa.

Explicación:

Demostración

Consejo

Datos representados por una instancia de Vue Propiedades en un El objeto solo se puede actualizar en consecuencia si se inicializan al mismo tiempo que se crea la instancia. Si los agrega después de crear la instancia, no se activará la actualización de la vista.

Explicación:

Explicación:

Demostración

Demostración

Explicación:

Explicación:

Demostración

Explicación:

Demostración

Este capítulo trata sobre las operaciones básicas de enlace de datos de Vue, que incluyen:

Explicación:

Explicación:

De forma predeterminada, el objeto de cálculo de la instancia de Vue solo tiene captadores. Si desea configurar datos, puede proporcionar un definidor, que es un definidor.

Explicación:

No importa qué método se utilice, el requisito previo es configurar la clase en CSS primero.

Demostración

Explicación:

Demostración

Las instrucciones V-if, v-for y v-on se presentan brevemente antes. Las tres instrucciones anteriores se presentarán en detalle en esta sección;

Explicación:

Pregunte la diferencia entre v-if y v-show

Demostración

Explicación:

Demostración

Demostración

Explicación:

Explicación:

Demostración

Explicación:

Explicación:

Contener elementos de estilo fijo como este

El uso de estos elementos restringidos en un componente personalizado hará que el renderizado fail;

La solución general es utilizar el atributo especial is:

Explicación:

Explicación:

Demostración

Explicación:

La distribución de contenido se refiere a mezclar el contenido del componente principal con la plantilla del propio componente secundario

Explicación:

; Explicación:

Convención de nomenclatura del componente de solicitud

Demostración

Consejo

Esta solicitud $http todavía es un poco diferente del ajax de jquery. En Ajax, los datos de publicación predeterminados no están en forma de datos de formulario, sino en la carga útil de la solicitud. La solución también es muy simple: agregue el campo de encabezado a la instancia de Vue:

Hola Vue.js

El pequeño trabajo de Vue anterior es el blog de habilidades de Xiaoyang que imita a SegmentFault. Le recomiendo que lo practique usted mismo con el código fuente para familiarizarse con el uso de Vue.

Materiales de referencia: