Tabla de contenido
Introducción a Vue
Vue (pronunciado / vjuː /, similar a view) es un marco progresivo para construir interfaces de usuario.
Este tutorial se basa en la versión 2.x.
Aprender Vue requiere conocimientos de HTML, CSS y JavaScript.
Instalación de Vue
La forma más fácil de usar Vue.js es descargarlo directamente e importarlo con la etiqueta del script.
Descarga de Vue.js
Descarga de la versión del entorno de desarrollo : incluye modo completo de advertencia y depuración.
Descarga de la versión del entorno de producción : tamaño y velocidad optimizados
<script src="vue.js" type="text/javascript"></script>
CDN
Para la creación de prototipos o el aprendizaje, puede utilizar la última versión como esta:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Para entornos de producción, recomendamos vincular a un número de versión claro y un archivo de compilación para evitar daños inesperados causados por la nueva versión:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
Si utiliza módulos ES nativos, también hay un archivo de compilación compatible con los módulos ES:
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'
</script>
Puede examinar el código fuente del paquete NPM en cdn.jsdelivr.net/npm/vue.
Vue también está disponible en unpkg y cdnjs (la actualización de la versión de cdnjs puede demorarse un poco).
Asegúrese de comprender las diferentes versiones de compilación y utilice la versión del entorno de producción en su sitio publicado, reemplace vue.js con vue.min.js. Esta es una compilación más pequeña que puede brindar una experiencia de velocidad más rápida que en el entorno de desarrollo.
NPM
Se recomienda la instalación de NPM al crear aplicaciones grandes con Vue [1]. NPM funciona bien con empaquetadores de módulos como webpack o Browserify. Al mismo tiempo, Vue también proporciona herramientas de apoyo para desarrollar componentes de un solo archivo.
# 最新稳定版
$ npm install vue
Herramienta de línea de comandos (CLI)
Vue proporciona una CLI oficial para construir rápidamente andamios complejos para aplicaciones de una sola página (SPA). Proporciona configuraciones de compilación incluidas con baterías para flujos de trabajo frontales modernos. Solo se necesitan unos minutos para estar en funcionamiento con la recarga en caliente, la comprobación de pelusa al guardar y las versiones de compilación disponibles en el entorno de producción. Para obtener más detalles, consulte la documentación de la CLI de Vue.
La herramienta CLI asume que el usuario tiene un cierto nivel de comprensión de Node.js y las herramientas de compilación relacionadas. No se recomienda que los principiantes utilicen vue-cli directamente, especialmente si no está familiarizado con las herramientas de compilación basadas en Node.js.
caso helloworld
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<body>
<div id="app">
{
{ message }}
</div>
<script type="text/javascript">
var app = new Vue ({
el: '#app',
data: {
message: 'Hello Vue!',
}
})
</script>
</body>
</html>
Hello Vue!
¡Hemos creado con éxito la primera aplicación Vue! Se ve muy similar a renderizar una plantilla de cadena, pero Vue ha hecho mucho trabajo detrás de escena. Ahora que los datos y el DOM se han vinculado, todo responde.
¿Cómo lo confirmamos? Abra la consola JavaScript de su navegador (solo abra en esta página) y modifique el valor de app.message, verá el ejemplo anterior actualizado en consecuencia.
Tenga en cuenta que ya no interactuamos directamente con HTML . Una aplicación de Vue lo montará en un elemento DOM (#app para este ejemplo) y luego lo controlará por completo. Ese HTML es nuestra entrada, pero el resto sucederá dentro de la instancia de Vue recién creada.