VueJS - 简介

你好，有抱负的网页开发者们！我很高兴能成为你们在这个激动人心的Vue.js世界中的向导。作为一个教编程超过十年的人，我可以告诉你，Vue.js是市面上最易于入门的框架之一。那么，让我们跳进去，发现一下Vue.js为什么会在全球开发者中成为宠儿！

VueJS - Introduction

Vue.js 是什么？

Vue.js 是一个渐进式的JavaScript框架，用于构建用户界面。我知道这听起来可能有点吓人，但把它想象成一个装满了方便小工具的工具箱，让创建交互式网站变得轻而易举。

当我第一次遇到Vue.js时，它让我想起了组装乐高积木。你从一些小而易于管理的部件开始，逐渐构建出一些令人惊叹的东西。这就是Vue.js的美妙之处——它平易近人、多才多艺且强大。

为什么选择Vue.js？

易于学习：如果JavaScript是一门语言，那么Vue.js就是它的友好方言，很容易上手。
灵活：它能够适应你的需求，不管你是在构建一个简单的小部件还是一个复杂的应用程序。
性能：它轻量级且快速，就像一辆跑车，但用于网页开发。
支持社区：当你遇到困难时，总有人愿意伸出援手。

现在，让我们动手写一些代码吧！

你的第一个Vue.js应用程序

示例

<!DOCTYPE html>
<html lang="zh-CN">
<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>
var app = new Vue({
el: '#app',
data: {
message: '你好，Vue!'
}
})
</script>
</body>
</html>

输出

当你在这个HTML文件中打开浏览器时，你会看到：

你好，Vue!

控制台详情

如果你打开浏览器的控制台，你不会看到任何错误。这是一个好的开始！

代码解析

让我们像在有趣的解剖课上一样来剖析这段代码：

HTML结构：我们有一个基本的HTML文档。这里没有什么可怕的东西！
Vue.js 脚本：
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
```
这一行就像是在邀请Vue.js参加我们的派对。它从内容分发网络（CDN）加载Vue.js库。
应用程序容器：
```
<div id="app">
{{ message }}
</div>
```
这个 <div> 是我们的Vue应用将要驻留的地方。双大括号 {{ }} 是Vue表示“嘿，我会在这里放一些动态内容！”的方式。
Vue 实例：
```
var app = new Vue({
el: '#app',
data: {
message: '你好，Vue!'
}
})
```
这就是魔法发生的地方！让我们进一步分解：

new Vue({...}) 创建一个新的Vue实例。
el: '#app' 告诉Vue连接到ID为 'app' 的DOM元素。
data: { message: '你好，Vue!' } 就像给Vue一个装满数据的背包。

增加交互性

现在，让我们给应用程序增加一点活力。我们将使我们的应用能够响应用户输入：

示例

<!DOCTYPE html>
<html lang="zh-CN">
<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">
<input v-model="message">
<p>消息是：{{ message }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: '你好，Vue!'
}
})
</script>
</body>
</html>

输出

你将看到一个输入字段，其中预填了“你好，Vue!”，下面是：

消息是：你好，Vue!

当你在输入字段中键入时，下面的消息将实时更新！

控制台详情

再次，你的控制台应该是没有错误的。如果你在控制台中键入 app.message，你将看到消息的当前值。

发生了什么？

v-model：这是一个Vue指令，它在表单输入上创建双向数据绑定。它就像一根神奇的绳子，将输入字段和我们的 message 数据连接起来。
实时更新：当数据发生变化时，Vue会自动更新DOM。无需手动操作DOM！

Vue中的方法

让我们给应用增加一些行为：

示例

<!DOCTYPE html>
<html lang="zh-CN">
<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">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: '你好，Vue!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>