Vue 3: Diferenzas entre revisións
Sen resumo de edición |
|||
| Liña 11: | Liña 11: | ||
<syntaxhighlight lang="html"> |
<syntaxhighlight lang="html"> |
||
import { createApp, ref } from 'vue' |
|||
| ⚫ | |||
<div>{{saudo}}</div> |
|||
createApp({ |
|||
<span v-bind:title="message"> |
|||
setup() { |
|||
Mueva el mouse sobre mí durante unos segundos |
|||
return { |
|||
para ver mi título enlazado dinámicamente. |
|||
count: ref(0) |
|||
| ⚫ | |||
} |
|||
| ⚫ | |||
var app2 = new Vue({ |
|||
el: '#app-2', |
|||
data: { |
|||
saudo: 'Hola Mundo!', |
|||
message: 'Usted cargó esta página el ' + new Date().toLocaleString() |
|||
} |
} |
||
}).mount('#app') |
|||
}) |
|||
template |
|||
| ⚫ | |||
<button @click="count++"> |
|||
Count is: {{ count }} |
|||
| ⚫ | |||
| ⚫ | |||
</script> |
</script> |
||
</syntaxhighlight> |
</syntaxhighlight> |
||
Revisión como estaba o 15 de outubro de 2024 ás 09:41
Introdución
Vue (pronunciado /vjuː/, como view) é un framework progresivo para construír interfaces de usuario. A diferenza doutros frameworks monolíticos, Vue está deseñado dende cero para ser utilizado de maneira incremental. A biblioteca central está enfocada só na capa de visualización, e é doada de utilizar e integrar con outras bibliotecas ou proxectos existentes.
Vue dispón dun "compilador" que se encarga de transformar as plantillas de Vue en código JavaScript optimizado que utilizará o navegador para renderizar o contido. Se encarga de convertir as directrices e etiquetas Vue (como v-if, v-for) en funcións JavaScript que manipulan o DOM.
As distribucións de desenvolvemento de Vue inclúen o compilador o que permite escribir as plantillas no HTML ou en ficheiros .vue sepearados sen compilalos previamente. Unha vez rematada a aplicación se "compilan" (build) xerando a aplicación de produción.
As distribucións de produción non precisan o compilador, unicamente o "runtime", xa que a aplicación xa estará "compilada" a JavaScript.
Un exemplo de plantilla Vue sería o seguinte:
import { createApp, ref } from 'vue'
createApp({
setup() {
return {
count: ref(0)
}
}
}).mount('#app')
template
<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>
</script>
Instalación
Existen varias compilacións de Vue:
| UMD | CommonJS | ES Module | |
|---|---|---|---|
| Completa | vue.js | vue.common.js | vue.esm.js |
| Runtime | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
| Completa (producción) | vue.min.js | - | - |
| Runtime (producción) | vue.runtime.min.js | - | - |
A versión Completa fai referencia a distribucións que levan o motor de execución e o "compilador" de vue
Aquí tes unha táboa que mostra os diferentes ficheiros de Vue.js en varios formatos. A columna "UMD" contén os ficheiros do formato Universal Module Definition, mentres que as columnas "CommonJS" e "ES Module" amosan os ficheiros nos seus respectivos formatos. Para a versión de producción, só están dispoñibles algúns dos ficheiros.
Existen varios modos de instalación:
- Inclusión Direta con <script>: Simplemente se debe descargar e incluír a etiqueta script coa ruta correcta, ou utilizar un CDN. Vue será rexistrado como unha variable global. Por exemplo: <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>. Vue tamén está dispoñible nos CDN unpkg e cdnjs. A versión de produción completa é vue.min.js.