Vue.jsとは？ 💡
Vue.js — これは、作成に役立つプログレッシブなJavaScriptフレームワークです 動的インターフェース と 1ページのアプリケーション。Vueは学びやすいですが、強力です。 🚀
Vue.jsを学ぶべき理由は何ですか？ 🎯
軽さ： CDN を介した簡単な設定。
反応性： データは自動的にインターフェースを更新します。
柔軟性： 小規模なプロジェクトでも複雑なアプリケーションでも使用できます。
大規模なエコシステム： Vueはルーティングと状態管理をサポートしています。
CDNを介してVue.jsを接続する方法は？ 💻
Vue.jsを使用する最も簡単な方法は、CDNを介して接続することです。このコードをHTMLファイルに追加します。
📄 ファイル 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>📄 ファイル app.js
const { createApp } = Vue;
const app = createApp({
data() {
return {
message: "Vue.js"
};
},
methods: {
changeMessage() {
this.message = "Hello Vue!";
}
}
});
app.mount("#app");どのように機能しますか？ 🧐
Vueは
CDNを介して接続しました。変数
messageを含むdata()を使用して Vue オブジェクトを作成しました。データを動的に表示するために
{{ message }}を使用します。クリックするとメッセージが変わるボタンを追加しました。
Vue.jsのシンプルなプロジェクト💡
1. クリックカウンター 🖱️
ボタンをクリックするとカウンターが増加するシンプルなVueアプリケーション。
📄 ファイル index.html
<div id="counter">
<p>Счетчик: {{ count }}</p>
<button @click="count++">+1</button>
<button @click="count--">-1</button>
</div>📄 ファイル app.js
const counterApp = createApp({
data() {
return {
count: 0
};
}
});
counterApp.mount("#counter");2. タスクのダイナミックリスト✅
タスクの追加と削除ができるアプリケーション。
📄 ファイル 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>📄 ファイル 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.乱数発生器🎲
乱数を生成するアプリケーション。
📄 ファイル index.html
<div id="random-number">
<p>Случайное число: {{ number }}</p>
<button @click="generateNumber">Сгенерировать</button>
</div>📄 ファイル app.js
const randomNumberApp = createApp({
data() {
return {
number: 0
};
},
methods: {
generateNumber() {
this.number = Math.floor(Math.random() * 100) + 1;
}
}
});
randomNumberApp.mount("#random-number");結論🎉
Vue.jsは、インタラクティブなインターフェースを作成するための便利なツールです。私たちはその基礎を分析しました。反応性データ、イベント、および要素の動的更新です。これで、初めてのVueアプリケーションを開発できます！ 🚀
練習すればするほど、コードは良くなります。実験し、新しいタスクに挑戦し、プログラミングを習得しましょう！Vue.jsの学習がうまくいくことを願っています！ 😊