VueJS入门教程：Vue.js快速上手

你好，有抱负的网页开发者们！我很高兴能成为你探索Vue.js世界的向导。作为一个教授计算机科学超过十年的人，我可以告诉你，Vue.js是最适合初学者的框架之一。那么，让我们一起来创造一些魔法吧！

VueJS - Home

Vue.js是什么？

Vue.js是一个用于构建用户界面的渐进式JavaScript框架。但用简单的英语来说这意味着什么呢？想象一下你正在建造一座房子。Vue.js就像是一套预制的墙壁和房间，你可以轻松地将它们组合起来，建造出你的梦想家园。它让构建复杂的网页应用变得像组装乐高积木一样简单！

为什么选择Vue.js？

容易学习
灵活且可扩展
优秀的性能
极好的社区支持

准备工作

在我们开始之前，让我们确保我们拥有所需的一切：

对HTML和CSS的基本了解
熟悉JavaScript（如果你不是专家也没关系！）
一个现代的网页浏览器（我推荐Chrome或Firefox）
一个文本编辑器（我个人喜欢VS Code）

创建你的第一个Vue.js项目

让我们从创建一个简单的“Hello, Vue!”应用程序开始。首先，我们需要在我们的项目中包含Vue.js。我们可以通过在HTML文件中添加一个script标签来实现。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个Vue应用</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
</body>
</html>

让我们分解一下：

我们使用CDN链接包含Vue.js库。
我们创建了一个id为"app"的<div>。我们的Vue应用程序将在这里运行。
在div内部，我们使用{{ message }}。这被称为插值，它是我们在Vue中显示数据的方式。
在我们的<script>标签中，我们创建了一个新的Vue实例，告诉它目标元素是id为"app"的元素。
我们定义了一个data对象，其中包含一个message属性。这是Vue将在我们的应用程序中使用的数据。

如果你保存这个文件并在浏览器中打开它，你应该会看到页面上显示“Hello, Vue!”。恭喜你！你已经创建了你的第一个Vue.js应用程序！

Vue指令：增加互动性

现在我们已经掌握了基础知识，让我们使我们的应用程序更具互动性。Vue提供了指令 - 一种特殊的属性，它给出了Vue应该如何表现的指令。让我们看看一些常见的指令：

v-model：双向数据绑定

v-model在表单输入和应用状态之间创建了一个双向绑定。让我们更新我们的应用程序，包括一个输入字段：

<div id="app">
<input v-model="message">
<p>消息是：{{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>

现在，当你在输入字段中输入时，你会看到消息实时更新。这就像魔法一样，不是吗？

v-if 和 v-else：条件渲染

有时我们希望基于条件显示或隐藏元素。这时v-if和v-else就派上用场了：

<div id="app">
<button @click="toggleVisibility">切换消息</button>
<p v-if="isVisible">现在你能看到我！</p>
<p v-else>现在你看不到我！</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible
}
}
})
</script>

在这个例子中，我们使用v-if和v-else在两条消息之间切换。@click指令是v-on:click的简写，它监听点击事件。

v-for：列表渲染

当我们需要显示一系列项目时，v-for是我们的首选指令：

<div id="app">
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: ['苹果', '香蕉', '樱桃', '榴莲']
}
})
</script>

这将渲染一个水果列表。就这么简单！

Vue中的方法

方法是我们可以用来给Vue实例添加行为的函数。让我们创建一个简单的计数器：

<div id="app">
<p>计数：{{ count }}</p>
<button @click="increment">增加</button>
<button @click="decrement">减少</button>
</div>

<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
})
</script>

在这里，我们定义了两个方法：increment和decrement。这些方法在相应的按钮被点击时调用，更新我们的count数据属性。

计算属性：智能计算

计算属性就像是超级强大的数据属性。它们可以执行复杂的计算，并且基于它们的依赖进行缓存。让我们看一个例子：

<div id="app">
<input v-model="firstName">
<input v-model="lastName">
<p>全名：{{ fullName }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
firstName: '',
lastName: ''
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>

在这里，fullName是一个计算属性，它将firstName和lastName组合起来。它会在它的依赖项发生变化时自动更新。

Vue.js方法的总结

下面是我们所涵盖的Vue.js方法的表格总结：

方法	描述	示例
data	持有Vue实例的数据	`data: { message: 'Hello' }`
methods	包含添加行为的函数	`methods: { greet() { alert('Hi!') } }`
computed	当依赖项更改时自动更新的缓存属性	`computed: { fullName() { return this.firstName + ' ' + this.lastName } }`
el	指定挂载Vue实例的元素	`el: '#app'`

结论

恭喜你！你已经迈入了Vue.js的精彩世界。我们涵盖了创建Vue实例的基础，使用指令进行交互性，以及使用方法和计算属性添加行为。

记住，学习编码就像学习一门新语言 - 它需要练习和耐心。如果一切不立即生效，请不要气馁。继续实验，继续构建，最重要的是，保持乐趣！

在我们的下一课中，我们将更深入地探讨组件，这是构建大型Vue应用程序的构建块。在此之前，祝你编码愉快！

Credits: Image by storyset

下一教程:

VueJS - 概览