introducir
Vue.js es una biblioteca utilizada para crear interfaces de aplicaciones web
Técnicamente, Vue.js se centra en la capa ViewModel del modo MVVM, que conecta los modelos de visión y enlace de datos de dos maneras. El formato real de operación y salida DOM se abstrae en instrucciones (directivas) y filtros (filtros)
En el campo de la filosofía, intente hacer que la API de enlace de datos MVVM sea lo más simple posible. La modularidad y la composibilidad también son importantes consideraciones de diseño. Vue no es un marco integral, está diseñado para ser simple y flexible. Puede usarlo para prototipos rápidamente, o mezclar y combinar con otras bibliotecas para definir la pila frontal.
Vue. La API JS se refiere a AngularJS, Knockoutjs ractive.js Rivets.js. A pesar de las similitudes, creo que Vue.js proporciona una forma valiosa de obtener su valor en algunos marcos existentes ahora
Incluso si ya está familiarizado con algunos de estos términos, se recomienda que apruebe la siguiente descripción general de los conceptos, ya que los conceptos de estos términos pueden diferir por debajo de Vue.js
Descripción general del concepto
Viewmodel
Un objeto, sincroniza modelos y vistas. En Vue.js, ViewModels es el constructor o subclase instanciado VUE
var vm = new Vue ({ / * opciones * /})Este es el objeto principal con el que interactuará como desarrollador usando Vue.js. Para más detalles, ver clase: Vue.
Vista
El HTML/DOM real visto por el usuario
vm. $ el // la vista
Cuando use Vue.js, difícilmente tocará la operación DOM, excepto sus propias instrucciones personalizadas. Cuando se actualizan los datos, la actualización de la vista se activará automáticamente. La actualización de la vista se puede alcanzar con precisión a cada nodo TestNode. También son lotes y ejecutados asíncronamente para proporcionar un mejor rendimiento.
Modelo
Este es un objeto JavaScript ligeramente modificado
vm. $ data // el modelo
En Vue.js, el modelo es solo un objeto JavaScript simple, un objeto de datos, puede manipular sus propiedades y ver modelos, observar los suyos y luego obtener notificaciones para cambiar. Vue.js usa el getter/setter de ES5 para convertir las propiedades en el objeto de datos HU, lo que permite la operación directa sin verificación sucia.
El objeto de datos tendrá mutaciones en los momentos apropiados, por lo que modificarlo es lo mismo que modificar VM. $ Datos por referencia. Esto también facilita múltiples instancias de modos de vista para observar los mismos datos.
Para obtener detalles técnicos, consulte las opciones de instanciación: datos.
Directivas
El atributo HTML privado le dice a Vue.js que haga un procesamiento sobre DOM
<div v-text = "mensaje"> </div>
El elemento div aquí tiene una instrucción de texto V, y el valor es el mensaje. Significa decirle a Vue.js que mantenga el contenido de este nodo Div sincronizado con el atributo de mensaje en ViewMode
Las instrucciones pueden encapsular cualquier operación DOM. Por ejemplo, V-ATTR opera en un elemento de atributo, V-Repeat clonando un elemento basado en una matriz, V-on adicional Event Listening, lo discutiremos más tarde.
Enlaces de bigote
También puede usar enlaces de estilo bigote, en texto y propiedades. Se traducen a la directiva V-Text V-ATTR. Por ejemplo:
<div id = "persona-{{id}}"> hola {{nombre}}! </div>Aunque es conveniente, hay algunas cosas a las que debe prestar atención:
Si se establece un atributo SRC de imagen, se enviará una solicitud HTTP, por lo que cuando la plantilla se analiza por primera vez, es mejor usar V-ATTR
Al analizar HTML, Internet Explorer eliminará el atributo de estilo interno no válido, por lo que si queremos admitir IE CSS en línea vinculante, siempre uso estilo V
Dentro de V-HTML, puede usar tres aparatos ortopédicos para manejar HTML no envuelto, pero esto causará posibles ataques XSS y puede abrir ventanas. Por lo tanto, se recomienda hacer esto solo cuando los datos son absolutamente seguros o limpian HTML no confiable a través de un filtro de tuberías personalizado
Filtros
Estos datos sin procesar se pueden procesar utilizando funciones antes de actualizar la vista. Están utilizando una directiva o vinculante de "tubería":
<Div> {{Mensaje | capitalizar}} </div>Ahora, antes de actualizar el contenido de texto del DIV, el valor de este mensaje se procesará a través de la función de capitalización. Para más detalles, consulte Filtros en profundidad.
Componentes
En Vue.js, un componente es un constructor de modelo de vista simple registrado con Vue.component (ID, constructor). Con una ID asociada, la directiva de V-Componente para la plantilla de otro modelo de vista puede anidarse. Este simple mecanismo hace que el modelo de vista declarado se reutilice y se combine de manera similar a los componentes web sin la necesidad de los últimos navegadores o poliolados pesados. Al dividir la aplicación en componentes más pequeños, el resultado es una base de código altamente desacoplada y mantenible. Para más detalles, consulte Composición ViewModels.
Un ejemplo rápido
<div id = "demo"> <h1> {{title | uppercase}} </h1> <ul> <li v-re-repeat = "Todos" v-on = "click: ded =! ded"> {{content}} </li> </ul> </div> var demo = new Vue ({el: '#Demo', Data: {Title: 'Todos', TODOS: [{Done: True, Content: 'Learn JavaScript'}, {Done: False, Content: 'Learn Vue.js'}]}})Traducción aproximada, señale cualquier error