Vue3 es un marco front-end de JavaScript popular.
El acceso local es: localhost: más su número de puerto
Este es un proyecto vue3+mecanografiado implementado, acceso del navegador:
https://shdily.com
A continuación se presenta el azúcar sintáctico de vue3
1, referencias de plantilla
<template>
<div>
<input type="text" ref="myInput">
<button @click="focusInput">Focus Input</button>
</div>
</template>
<script>
import {
ref } from 'vue';
export default {
setup() {
const myInput = ref(null);
function focusInput() {
myInput.value.focus();
}
return {
myInput,
focusInput
}
}
}
</script>
Es la última versión de Vue.js. En comparación con Vue2, Vue3 tiene muchas mejoras y actualizaciones, que incluyen una velocidad de renderizado más rápida, un tamaño de paquete más pequeño, una mejor compatibilidad con TypeScript, un sistema con mejor capacidad de respuesta y una API de componentes más flexible, etc.
2, propiedades reactivas
<template>
<div>
<p>{
{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
import {
reactive } from 'vue';
export default {
setup() {
const data = reactive({
message: 'Hello World!'
});
function updateMessage() {
data.message = 'New Message';
}
return {
...data,
updateMessage
}
}
}
</script>
Una de las mejoras más notables es el uso del nuevo motor virtual DOM, que le da a Vue3 un gran aumento de rendimiento sobre Vue2. Al mismo tiempo, Vue3 también agregó muchas funciones nuevas, como la API de composición, que puede organizar y reutilizar mejor el código.
3, Propiedades calculadas
<template>
<div>
<p>{
{ fullName }}</p>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
</div>
</template>
<script>
import {
computed, reactive } from 'vue';
export default {
setup() {
const data = reactive({
firstName: '',
lastName: ''
});
const fullName = computed(() => {
return `${
data.firstName} ${
data.lastName}`;
});
return {
...data,
fullName
}
}
}
</script>
Y simplifique el proceso de desarrollo de componentes complejos. En resumen, Vue3 proporciona herramientas poderosas y flexibles para el desarrollo web moderno que pueden ayudar a los desarrolladores a crear aplicaciones escalables y mantenibles de manera más eficiente.
4, ganchos de ciclo de vida
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
import {
reactive, onMounted } from 'vue';
export default {
setup() {
const data = reactive({
message: ''
});
onMounted(() => {
data.message = 'Component Mounted';
});
return {
...data
}
}
}
</script>