¿Qué es Vue?
Vue (pronunciado /vjuː/, como view ) es un marco de JavaScript para crear interfaces de usuario. Está construido sobre HTML, CSS y JavaScript estándar y proporciona un modelo de programación declarativo basado en componentes para ayudarle a desarrollar interfaces de usuario de manera eficiente. Ya sea una interfaz simple o compleja, Vue puede hacerlo todo.
Componente de archivo único
En la mayoría de los proyectos de Vue con herramientas de compilación habilitadas, podemos usar un archivo de formato similar a HTML para escribir componentes de Vue, que se denomina componente de archivo único (también conocido como *.vue archivo, componentes de archivo único en inglés, abreviado como SFC ). Como sugiere el nombre, el componente de archivo único de Vue encapsula la lógica (JavaScript), la plantilla (HTML) y el estilo (CSS) de un componente en el mismo archivo. A continuación, reescribiremos el ejemplo de contador anterior en un formato de componente de archivo único:
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Count is: {
{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>estilo API
Los componentes de Vue se pueden escribir en dos estilos diferentes: API de opción y API de composición .
API de opciones
Usando la API de opciones, podemos usar objetos que contienen múltiples opciones para describir la lógica del componente, como datay . Las propiedades definidas por las opciones se expondrán dentro de la función , que apuntará a la instancia del componente actual.methodsmountedthis
<script>
export default {
// data() 返回的属性将会成为响应式的状态
// 并且暴露在 `this` 上
data() {
return {
count: 0
}
},
// methods 是一些用来更改状态与触发更新的函数
// 它们可以在模板中作为事件处理器绑定
methods: {
increment() {
this.count++
}
},
// 生命周期钩子会在组件生命周期的各个不同阶段被调用
// 例如这个函数就会在组件挂载完成后被调用
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {
{ count }}</button>
</template>API de composición
A través de la API de composición, podemos utilizar funciones API importadas para describir la lógica del componente. <script setup> Las API componibles se utilizan a menudo con componentes de un solo archivo . Este setup atributo es un indicador que le indica a Vue que se debe realizar algún procesamiento en el momento de la compilación, lo que nos permite usar la API combinada de manera más concisa. Por ejemplo, <script setup> las importaciones y las variables/funciones de nivel superior se pueden utilizar directamente en las plantillas.
Aquí hay un componente que es exactamente igual a la plantilla anterior después de usar la API de composición y modificarla: <script setup>
<script setup>
import { ref, onMounted } from 'vue'
// 响应式状态
const count = ref(0)
// 用来修改状态、触发更新的函数
function increment() {
count.value++
}
// 生命周期钩子
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {
{ count }}</button>
</template>Crea tu primera aplicación VUE
npm crea vue@latest
Este comando instalará y ejecutará create-vue, que es la herramienta oficial de andamiaje de proyectos de Vue. Si no está seguro de querer habilitar una determinada función, puede presionar directamente la tecla Enter para seleccionarla No. Una vez creado el proyecto, instale las dependencias e inicie el servidor de desarrollo siguiendo estos pasos:
cd <ruta del proyecto>
//Instalar dependencias
instalación npm
//Ejecuta el programa
npm ejecutar desarrollador
// Empaquetar y lanzar, este comando creará
./distuna versión de compilación del entorno de producción de su aplicación en la carpetacompilación de ejecución npm
Si abre lo anterior directamente en el navegador index.html, encontrará que arroja un error porque el módulo ES no file:// funciona a través del protocolo, que es el protocolo que utiliza el navegador cuando abre un archivo local.
Por motivos de seguridad, los módulos ES sólo http:// funcionan a través del protocolo, que es el protocolo que utiliza el navegador al abrir una página web. Para que los módulos ES funcionen en nuestra máquina local, necesitamos usar un servidor HTTP local, http:// servido a través del protocolo index.html.
Para iniciar un servidor HTTP local, primero instale Node.js y luego ejecútelo a través de la línea de comando en la carpeta donde se encuentra el archivo HTML npx serve. También puede utilizar cualquier otro servidor HTTP que pueda servir archivos estáticos según el tipo MIME correcto.
//Iniciar servicio HTTP
servicio npx
Crear instancia de aplicación
Crear instancia de aplicación en archivo js
import { createApp } from 'vue'
//从一个单文件组件中导入根组件
import App from './App.vue'
//创建应用实例
const app = createApp(App)
//挂载到DOM元素
app.mount('#app')Definir nodos en un archivo html
<div id="app"></div>El contenido del componente raíz de la aplicación se representará dentro del elemento contenedor. El elemento contenedor en sí no se considerará parte de la aplicación.
.mount() Siempre se debe llamar a los métodos después de completar toda la configuración de la aplicación y el registro de recursos. Tenga en cuenta también que, a diferencia de otros métodos de registro de recursos, su valor de retorno es la instancia del componente raíz en lugar de la instancia de la aplicación.
interpolación de texto
La forma más básica de enlace de datos es la interpolación de texto, que utiliza la sintaxis "Bigote" (es decir, llaves dobles):
<span>Message: {
{ msg }}</span>msg También se actualiza sincrónicamente cuando cambia la propiedad.
Las llaves dobles interpretarán los datos como texto sin formato, no HTML. Para insertar HTML, necesita usar la directiva v-html :
const rawHtml = '<span style="color: red">This should be red.</span>'<p>Using text interpolation: {
{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>Enlace de atributos
Para vincular un atributo de manera responsiva, se debe usar la directiva v-bind :
<div v-bind:id="dynamicId"></div>
//v-bind:id 简写为 :id
<div :id="dynamicId"></div>v-bind La directiva le indica a Vue que alinee los id atributos del elemento con los del componente . dynamicIdSi el valor vinculado es null o undefined, entonces el atributo se eliminará del elemento representado.
Vincular dinámicamente múltiples valores
Si tiene un objeto JavaScript con múltiples atributos como este:
const objectOfAttrs = {
id: 'container',
class: 'wrapper'
}Al no tomar parámetros v-bind, puede vincularlos a un solo elemento:
<div v-bind="objectOfAttrs"></div>Resumir
1. La página vue combina js, css y html en una sola página. La instancia creada por createApp llama al método mount para montarla en el elemento de la página HTML y la página se puede representar.
2. La API combinada se desarrolla en función del tipo de opción. En comparación con el tipo de opción, el código combinado es más simplificado. La API combinada se utiliza a través de la marca <script setup>.