Análisis
< html >
< head >
< title >第 一个 Hello Vue 程序</ title >
</ head >
< body >
< div id = "app" >
{{message}}
</ div >
< script src = "vue. js " type =" text / javascript " > </ script >
< script type =" text / javascript " >
aplicación var = nueva Vue ({
el: '#app ' , // La abreviatura de el: element, utilizada para especificar los elementos (incluidos todos los elementos secundarios) de los que la aplicación Vue se hace cargo de los
datos: { // data: data es el
mensaje del miembro de datos en el mensaje de la aplicación de instancia de Vue : ' Hola Vue ! '
}
});
</ script >
</ body >
</ html >
Estado de implementación:
① El navegador analiza de arriba a abajo y primero encuentra el div con id = 'aplicación'. Debido a que el navegador no reconoce {{mensaje}}, mostrará este contenido como texto en la página web.
BrowserEl navegador continúa analizando y encuentra el script src = 'vue.js', que es un script de enlace externo, así que inicie la solicitud y descárguela. Después de que el entorno actual obtenga el script js, vue.js se ejecutará y la ejecución finalizará ,
Expondrá un objeto a lo global: Vue.
③ Cuando el navegador analiza el segundo script, en primer lugar, a través de un nuevo Vue, crea una instancia de un objeto Vue y lo asigna a la aplicación.
I. El objeto tiene dos atributos, el primer atributo es el y se toma el rango de ejecución del programa Vue.
II. El segundo atributo es datos, y el atributo de datos también es un objeto. El contenido del objeto es un miembro llamado mensaje, y el valor del mensaje es '¡Hola Vue! '.
④A continuación, a través del atributo el, el programa se hará cargo del div con el id de la aplicación (o más bien, esta instancia se montará en el elemento Dom con el id de la aplicación). En este punto, el navegador puede analizar {{mensaje}} (expresión de interpolación), es decir, reemplazar el contenido en {{}} con el valor del mensaje en el miembro de datos.
El sitio web oficial explica el : Proporcione un elemento Dom que ya existe en la página como destino del montaje de la instancia de Vue. Puede ser un selector de CSS o una instancia de htmlElement.
