Vue3 Sintaxis básica

Vue.js es un framework de JavaScript progresivo, principalmente utilizado para construir interfaces de usuario.

Vue.js se basa en los conceptos de componentización y datos reactivos, proporcionando una forma sencilla y eficiente de construir interfaces de usuario.

Vue Componente de archivo único

Vue Componente de archivo único (Single File Component, abreviado SFC) es el formato de archivo del framework Vue.js, que permite a los desarrolladores colocar código HTML, JavaScript y CSS en un solo archivo, generalmente usando.vuecomo sufijo de archivo.

El componente de archivo único es una forma de organización de código reutilizable que encapsula el HTML, CSS y JavaScript pertenecientes al mismo componente en archivos usando.vuecomo sufijo.

A continuación se presentan algunas sintaxis y conceptos básicos comunes de Vue.js, incluyendo sintaxis de plantilla, directivas, manejo de eventos, propiedades computadas y componentes, que se explicarán en detalle en capítulos posteriores.

1. Crear una instancia de Vue

Crear una instancia de Vue es el primer paso para empezar a usar Vue.js. Generalmente, crearás una instancia de Vue en un archivo HTML y la montarás en un elemento del DOM.

Ejemplo

<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

Pruébalo »

Explicación de la parte HTML:

<div id="hello-vue" class="demo">:

  • Este es un elemento<div>, que tiene un idhello-vuey una clasedemo。
  • En la aplicación Vue, este<div>será gestionado por la instancia de Vue y actualizará su contenido cuando los datos cambien.

{{ message }}:

  • Esta es la sintaxis de plantilla de Vue.js, que se utiliza para vincular los datosmessagede la instancia de Vue a la página.
  • Cuando los datosmessagede la instancia de Vue cambian, el contenido de la página también se actualiza en consecuencia.

Explicación de la parte JavaScript:

Definición de la instancia de Vue:

const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}
  • HelloVueAppes un objeto JavaScript común que contiene las opciones del componente Vue.
  • data()El método devuelve un objeto que contiene la propiedadmessage, cuyo valor inicial es'Hello Vue!!'。

Crear y montar la aplicación Vue:

  • Vue.createApp()El método se utiliza para crear una instancia de la aplicación Vue. El parámetro es un objeto que contiene las opciones del componente (aquí esHelloVueApp）。
  • .mount('#hello-vue')El método monta la instancia de la aplicación Vue en el elemento que tiene el identificadorid="hello-vue"del DOM de la página.

Proceso de ejecución

  • Cuando la página se carga, el navegador analiza el HTML y el JavaScript.
  • Cuando se ejecuta el script de Vue.js, se crea una instancia de la aplicación Vue y se vincula al elemento<div id="hello-vue">correspondiente.
  • La instancia de la aplicación Vue, según los datos iniciales que se encuentran endata(), renderiza el valor demessageen el lugar{{ message }}de la página.
  • CuandomessageCuando los datos cambian (por ejemplo, a través de la interacción del usuario u operaciones asíncronas), la página se actualiza automáticamente para reflejar estos cambios.

2. Sintaxis de plantilla

Interpolación

Vue.js utiliza dobles llaves{{ }}para representar la interpolación de texto:

Ejemplo

<div>{{ message }}</div>

Directivas

Las directivas son atributos especiales con el prefijov-, que se utilizan para expresar lógica en la plantilla.

v-bind: Vincula dinámicamente uno o más atributos, o una prop de componente.

<a v-bind:href="url.html">Link</a>

Abreviatura:

<a :href="url.html">Link</a>

v-if / v-else-if / v-else: Renderizado condicional.

<p v-if="visible">内容可见</p>
<p v-else>内容不可见</p>

v-for: Renderizado de listas.

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

v-model: Enlace de datos bidireccional.

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-on: Escuchador de eventos.

<button v-on:click="doSomething">Click me</button>

Abreviatura:

<button @click="doSomething">Click me</button>

3. Manejo de eventos

En Vue.js, puedes usar la directiva v-on para escuchar eventos del DOM y ejecutar código JavaScript cuando se disparen.

Ejemplo

<div id="app">
  <button @click="greet">Greet</button>
</div>

<script>
  createApp({
    methods: {
      greet() {
        alert('Hello!');
      }
    }
  }).mount('#app');
</script>

4. Propiedades computadas

Las propiedades computadas son propiedades que se almacenan en caché según sus dependencias. Solo se recalculan cuando cambian sus dependencias relacionadas.

Ejemplo

<div id="app">
  <p>{{ reversedMessage }}</p>
</div>

<script>
  createApp({
    data() {
      return {
        message: 'Hello'
      };
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  }).mount('#app');
</script>

5. Componentes

Los componentes son una de las funciones más potentes de Vue.js. Los componentes te permiten construir grandes aplicaciones utilizando componentes pequeños, independientes y generalmente reutilizables.

Ejemplo

const app = createApp({});

app.component('my-component', {
  template: '<div>A custom component!</div>'
});

Usar componentes

Ejemplo

<div id="app">
  <my-component></my-component>
</div>

<script>
  const app = createApp({});

  app.component('my-component', {
    template: '<div>A custom component!</div>'
  });

  app.mount('#app');
</script>

6. Props y eventos

Props

Las props se utilizan para transmitir datos entre componentes.

Ejemplo

<div id="app">
  <blog-post title="My journey with Vue"></blog-post>
</div>

<script>
  const app = createApp({
    data() {
      return {};
    }
  });

  app.component('blog-post', {
    props: ['title'],
    template: '<h3>{{ title }}</h3>'
  });

  app.mount('#app');
</script>

Eventos

Los componentes secundarios, a través de$emitemiten eventos, y los componentes principales pueden escuchar estos eventos.

Ejemplo

<div id="app">
  <button-counter @increment="incrementTotal"></button-counter>
  <p>Total clicks: {{ total }}</p>
</div>

<script>
  const app = createApp({
    data() {
      return {
        total: 0
      };
    },
    methods: {
      incrementTotal() {
        this.total++;
      }
    }
  });

  app.component('button-counter', {
    template: '<button @click="increment">You clicked me {{ count }} times.</button>',
    data() {
      return {
        count: 0
      };
    },
    methods: {
      increment() {
        this.count++;
        this.$emit('increment');
      }
    }
  });

  app.mount('#app');
</script>
Otras extensiones