¿Qué es Vue.js? 💡
Vue.js es un marco progresivo de JavaScript que ayuda a crear interfaces dinámicas y aplicaciones de una sola página. Vue es fácil de aprender, pero potente. 🚀
¿Por qué estudiar Vue.js? 🎯
Facilidad: configuración sencilla a través de CDN.
Reactividad: los datos actualizan automáticamente la interfaz.
Flexibilidad: se puede utilizar tanto en pequeños proyectos como en aplicaciones complejas.
Gran ecosistema: Vue admite el enrutamiento y la gestión de estados.
¿Cómo conectar Vue.js a través de CDN? 💻
La forma más fácil de usar Vue.js es conectarlo a través de CDN. Añade este código a un archivo HTML:
📄 Archivo index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой первый проект на Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script src="app.js" defer></script>
</head>
<body>
<div id="app">
<h1>Привет, {{ message }}!</h1>
<button @click="changeMessage">Сменить сообщение</button>
</div>
</body>
</html>📄 Archivo app.js
const { createApp } = Vue;
const app = createApp({
data() {
return {
message: "Vue.js"
};
},
methods: {
changeMessage() {
this.message = "Hello Vue!";
}
}
});
app.mount("#app");¿Cómo funciona? 🧐
Hemos conectado Vue a través de
CDN.Creamos un objeto Vue con
data(), que contiene la variablemessage.Usamos
{{ message }}para mostrar datos dinámicamente.Se ha añadido un botón que cambia el mensaje al hacer clic.
Proyectos sencillos en Vue.js 💡
1. Contador de clics 🖱️
Una sencilla aplicación Vue que incrementa el contador al hacer clic en el botón.
📄 Archivo index.html
<div id="counter">
<p>Счетчик: {{ count }}</p>
<button @click="count++">+1</button>
<button @click="count--">-1</button>
</div>📄 Archivo app.js
const counterApp = createApp({
data() {
return {
count: 0
};
}
});
counterApp.mount("#counter");2. Lista dinámica de tareas ✅
Una aplicación que permite añadir y eliminar tareas.
📄 Archivo index.html
<div id="todo-app">
<input v-model="newTask" placeholder="Enter a task">
<button @click="addTask">Добавить</button>
<ul>
<li v-for="(task, index) in tasks" :key="index">
{{ task }}
<button @click="removeTask(index)">Удалить</button>
</li>
</ul>
</div>📄 Archivo app.js
const todoApp = createApp({
data() {
return {
newTask: "",
tasks: []
};
},
methods: {
addTask() {
if (this.newTask.trim() !== "") {
this.tasks.push(this.newTask);
this.newTask = "";
}
},
removeTask(index) {
this.tasks.splice(index, 1);
}
}
});
todoApp.mount("#todo-app");3. Generador de números aleatorios 🎲
Una aplicación que genera un número aleatorio.
📄 Archivo index.html
<div id="random-number">
<p>Случайное число: {{ number }}</p>
<button @click="generateNumber">Сгенерировать</button>
</div>📄 Archivo app.js
const randomNumberApp = createApp({
data() {
return {
number: 0
};
},
methods: {
generateNumber() {
this.number = Math.floor(Math.random() * 100) + 1;
}
}
});
randomNumberApp.mount("#random-number");Conclusión 🎉
Vue.js es una herramienta útil para crear interfaces interactivas. Hemos analizado sus conceptos básicos: datos reactivos, eventos y actualización dinámica de elementos. ¡Ahora puedes desarrollar tus primeras aplicaciones Vue! 🚀
Cuanto más practiques, mejor será tu código. ¡Experimenta, prueba nuevas tareas y domina la programación! ¡Buena suerte aprendiendo Vue.js! 😊