Comenzando con Vue3

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

Al comenzar a aprender Vue, no recomendamos usar la herramienta de línea de comandos vue-cli para crear proyectos; una forma más sencilla es introducir directamente el archivo vue.global.js en la página para probar y aprender.

Las aplicaciones en Vue3 se crean mediante la función createApp, con la siguiente sintaxis:

const app = Vue.createApp({ /* 根组件选项 */ })

Las opciones pasadas a createApp se utilizan para configurar el componente raíz.

La instancia de la aplicación, después de llamar al.mount()método, se renderizará,.mount()El método recibe un parámetro "contenedor", que puede ser un elemento DOM real o una cadena de selector CSS:

<div id="app"></div>
app.mount('#app')

Un ejemplo simple:

Vue.createApp(HelloVueApp).mount('#hello-vue')

El parámetro de createApp es el componente raíz (HelloVueApp); al montar la aplicación, este componente es el punto de partida del renderizado.

Una aplicación necesita ser montada en un elemento DOM; el código anterior usamount('#hello-vue')para montar la aplicación Vue HelloVueApp en

.

A continuación, desdeHello Vue!!el código de ... comenzamos a aprender.

Ejemplo de Vue 3.0

<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 »

Haz clic en el botón "Pruébalo" para ver el ejemplo en línea.

En el ejemplo anterior, primero introducimos el archivo JS de Vue en la página HTML:

<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>

Hay un elemento div en la página HTML:

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

mount('#hello-vue')Monta la aplicación Vue HelloVueApp en

.

{{ }}Se utiliza para generar las propiedades de los objetos y los valores de retorno de las funciones.

{{ message }}Corresponde almessagevalor de ... en la aplicación.

Plantilla del componente raíz

La plantilla del componente raíz normalmente está incrustada en la definición del componente, pero también se puede especificar por separado definiendo la plantilla directamente dentro del contenedor del punto de montaje.

Ejemplo

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

<script>
const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    };
    return { count, increment };
  }
});

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

Pruébalo »

Cuando el componente raíz no tiene configurada la opción template, Vue usará automáticamente el innerHTML del contenedor como plantilla.

Explicación del código:

  • Uso de lasetupfunción: En Vue 3, la lógica del componente normalmente se define en lasetupfunción. Aquí usamos lasetupfunción para definir los datos reactivoscounty el métodoincrement。

  • Uso deref: ensetupla función, usamosrefpara crear datos reactivoscount。

  • Definirincrementmétodo: definir unincrementmétodo para incrementarcountel valor de ... .

  • Devolver datos reactivos y métodos: ensetupdevolver en la funcióncountyincrement, de esta manera, pueden ser accedidos y usados en la plantilla.

Opción data

Opción dataes una función. Vue llama a esta función durante el proceso de creación de una nueva instancia de componente. Debe devolver un objeto, que Vue envolverá mediante el sistema de reactividad y almacenará en la instancia del componente en forma de $data.

Ejemplo

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

document.write(vm.$data.count) // => 4
document.write("<br>")
document.write(vm.count)       // => 4
document.write("<br>")
// Modificar el valor de vm.count también actualizará $data.count
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// Y viceversa
vm.$data.count = 6
document.write(vm.count) // => 6

Pruébalo »

Las propiedades del ejemplo anterior solo se agregan cuando la instancia se crea por primera vez, por lo que debes asegurarte de que todas estén en el objeto devuelto por la función data.

Métodos

Podemos agregar métodos al componente usando lamethodsopción, que contiene un objeto con los métodos necesarios.

En el siguiente ejemplo agregamos la opción methods, que incluye elincrement()método:

Ejemplo

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` apunta a la instancia del componente
      this.count++
    }
  }
})

const vm = app.mount('#app')

document.write(vm.count) // => 4
document.write("<br>")
vm.increment()

document.write(vm.count) // => 5

Pruébalo »
Otras extensiones