入门 Vue.js
欢迎来到Vue.js，这里，我们将一起探索Vue.js是什么，为什么它如此受欢迎，以及如何开始你的第一个Vue应用。无论你是前端开发的新手，还是从其他框架转过来的开发者，学习我们的课程，你将能够快速上手Vue.js，并构建出功能丰富、交互性强的用户界面。
Vue.js是一个用于构建用户界面的渐进式JavaScript框架。所谓“渐进式”，意味着你可以根据项目的需求，逐步采用Vue.js的功能。你可以从简单的页面交互开始，然后逐步引入组件系统、路由、状态管理等更复杂的功能。
Vue.js由尤雨溪（Evan You）在2014年创建，它的设计理念是"易学易用"。与其他框架相比，Vue.js的学习曲线相对平缓，同时又不失强大的功能。它借鉴了Angular的指令系统和React的组件化思想，但以更加简洁和直观的方式呈现。
Vue.js的核心思想是“数据驱动视图”。当数据发生变化时，视图会自动更新，我们不需要手动操作DOM元素。这种声明式的编程方式让开发变得更加简单。
为什么选择Vue.js
在众多的前端框架中，Vue.js之所以能够脱颖而出，主要有以下几个原因。首先，它的学习成本相对较低。如果你熟悉HTML、CSS和JavaScript，就可以很快上手Vue.js。其次，Vue.js提供了非常详细的官方文档和丰富的社区资源，遇到问题时很容易找到解决方案。
Vue.js的另一个优势是它的灵活性。你可以选择使用选项式API（Options API）或组合式API（Composition API），也可以将Vue.js集成到现有的项目中，而不需要重写整个应用。这种渐进式的采用方式让团队可以逐步迁移，降低风险。
性能方面，Vue 3引入了许多优化，包括更小的包体积、更快的渲染速度，以及更好的TypeScript支持。这些改进让Vue.js在性能上可以与React和Angular等框架媲美，甚至在某些场景下表现更优。
Vue 3的新特性
Vue 3是Vue.js的最新主要版本，它带来了许多令人兴奋的新特性和改进。其中最引人注目的是组合式API（Composition API），它提供了更好的逻辑复用和代码组织方式。组合式API让我们可以将相关的逻辑组织在一起，而不是按照选项（data、methods、computed等）来分散代码。
性能优化也是Vue 3的重点。新的响应式系统基于Proxy实现，提供了更好的性能和更强大的功能。同时，Vue 3支持Tree-shaking，这意味着未使用的代码会被自动移除，最终打包的文件体积更小。
TypeScript支持也得到了显著改善。Vue 3完全使用TypeScript重写，提供了更好的类型推断和开发体验。即使你不使用TypeScript，这些改进也会让JavaScript的开发体验更好。话不多说，我们直接开始。
开始你的第一个Vue应用
现在让我们开始创建你的第一个Vue应用。为了让你更好地理解Vue.js的工作原理，我们先使用最简单的方式——通过CDN引入Vue.js。这种方式不需要复杂的构建工具，可以直接在浏览器中运行。
首先，我们需要创建一个HTML文件。这个文件将包含我们的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>
</head>
<body>
<!-- 这里将放置我们的Vue应用 -->
</body>
</html>
这是一个标准的HTML文档结构。接下来，我们需要引入Vue.js库。我们使用CDN方式引入，这样就不需要安装任何构建工具。
<!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>
<!-- 引入Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></
我们在<head>标签中添加了一个<script>标签，从CDN引入了Vue 3的全局版本。这个文件包含了Vue.js的所有核心功能，可以直接在浏览器中使用。
现在，让我们在<body>中添加一个容器元素，Vue应用将挂载到这个元素上：
<body>
<!-- Vue应用的挂载点 -->
<div id="app"></div>
</body>
</html>
这个<div>元素有一个id属性，值为"app"。Vue应用会挂载到这个元素上，并控制这个元素及其内部的所有内容。
接下来，我们需要编写JavaScript代码来创建Vue应用。在Vue 3中，我们使用createApp函数来创建应用实例：
<body>
<div id="app"></div>
<script>
// 创建Vue应用实例
const { createApp } = Vue;
// 创建应用
const app = createApp({
// 应用配置将写在这里
});
// 将应用挂载到DOM元素上
app.mount('#app');
让我们逐步解释这段代码。首先，我们从Vue对象中解构出createApp函数。这个函数用于创建Vue应用实例。然后，我们调用createApp并传入一个配置对象，这个对象包含了应用的所有配置。最后，我们调用app.mount('#app')，将应用挂载到id为"app"的DOM元素上。
现在，让我们在配置对象中添加一些数据。在Vue中，我们使用data函数来定义响应式数据：
<script>
const { createApp } = Vue;
const app = createApp({
// data函数返回应用的数据
data() {
return {
message: '你好，Vue.js！'
};
}
});
app.mount('#app');
</script>
data函数返回一个对象，这个对象包含了应用的所有响应式数据。在这里，我们定义了一个message属性，它的值是'你好，Vue.js！'。这个数据可以在模板中使用。
现在，让我们在HTML模板中显示这个数据。Vue使用双大括号{{ }}来进行文本插值：
<body>
<div id="app">
<!-- 使用双大括号显示数据 -->
<h1>{{ message }}</h1>
</div>
<script>
const { createApp } = Vue;
const app = createApp({
data() {
return {
message:
在<div id="app">内部，我们添加了一个<h1>标签，并在其中使用{{ message }}来显示数据。当Vue应用挂载后，{{ message }}会被替换为data函数中message的实际值，也就是'你好，Vue.js！'。
这就是一个完整的Vue应用。当你打开这个HTML文件时，你会看到页面上显示"你好，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://unpkg.com/vue@3/dist/vue.global.js"></
理解响应式数据
刚才我们创建了一个简单的Vue应用，但你可能还没有完全理解"响应式"的含义。让我们通过一个例子来演示Vue的响应式特性。
我们可以在浏览器控制台中修改数据，看看视图是如何自动更新的。首先，让我们修改代码，让数据更容易访问：
<script>
const { createApp } = Vue;
const app = createApp({
data() {
return {
message: '你好，Vue.js！',
count: 0
};
}
});
// 将app实例保存到全局，方便在控制台访问
window.vueApp = app.mount('#app');
</
我们在data函数中添加了一个count属性，初始值为0。同时，我们将挂载后的应用实例保存到window.vueApp，这样我们就可以在浏览器控制台中访问它了。
<div id="app">
<h1>{{ message }}</h1>
<p>计数：{{ count }}</p>
</div>
现在，如果你在浏览器控制台中输入vueApp.count = 5，你会看到页面上的计数立即更新为5，而不需要任何额外的代码。这就是Vue的响应式系统在起作用。
添加交互功能
现在我们让这个应用更加有趣，添加一个按钮来增加计数。在Vue中，我们使用v-on指令（简写为@）来监听事件：
<div id="app">
<h1>{{ message }}</h1>
<p>计数：{{ count }}</p>
<!-- 使用@click监听点击事件 -->
<button @click="increment">增加</button>
</div>
我们在模板中添加了一个按钮，使用@click="increment"来监听点击事件。当按钮被点击时，Vue会调用increment方法。
现在，我们需要在Vue应用的配置中定义这个方法。在Vue中，我们使用methods选项来定义方法：
<script>
const { createApp } = Vue;
const app = createApp({
data() {
return {
message: '你好，Vue.js！',
count: 0
};
},
// methods选项定义方法
methods: {
increment() {
this.count++;
}
}
在methods对象中，我们定义了increment方法。这个方法使用this.count++来增加计数。在Vue中，this指向组件实例，我们可以通过this.count访问data中定义的count属性。
当我们点击"增加"按钮时，increment方法会被调用，count的值会增加1。由于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://unpkg.com/vue@3/dist/vue.global.js"></script>
Vue应用的基本结构
通过上面的例子，我们已经了解了Vue应用的基本结构。让我们总结一下关键概念：
Vue应用由三个主要部分组成：模板（Template）、数据（Data）和方法（Methods）。模板是HTML结构，定义了用户界面的外观。数据是应用的状态，存储在data函数返回的对象中。方法是处理用户交互和业务逻辑的函数，定义在methods对象中。
Vue的核心优势在于它自动建立了数据和视图之间的连接。当我们修改数据时，视图会自动更新。当我们与视图交互时（比如点击按钮），可以触发方法来修改数据。这种双向的、自动的同步让开发变得非常简单。
在Vue中，我们只需要关注数据的状态，而不需要手动操作DOM。Vue会负责将数据的变化反映到视图上，这大大简化了开发工作。
下一步
恭喜你完成了第一部分的学习。你已经了解了Vue.js的基本概念，并创建了你的第一个Vue应用。在下一堂课中，我们将深入学习Vue的模板语法，包括更多的指令和绑定方式。
记住，学习编程最好的方式就是多实践。尝试修改代码，看看会发生什么变化。尝试添加新的数据和方法，探索Vue的各种功能。只有通过实践，你才能真正掌握这些概念。
script
>
</head>
<body>
<!-- 这里将放置我们的Vue应用 -->
</body>
</html>
</script>
</body>
</html>
'你好，Vue.js！'
};
}
});
app.mount('#app');
</script>
</body>
</html>
script
>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
const { createApp } = Vue;
const app = createApp({
data() {
return {
message: '你好，Vue.js！'
};
}
});
app.mount('#app');
</script>
</body>
</html>
script
>
});
app.mount('#app');
</script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>计数：{{ count }}</p>
<button @click="increment">增加</button>
</div>
<script>
const { createApp } = Vue;
const app = createApp({
data() {
return {
message: '你好，Vue.js！',
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
入门 Vue.js | 自在学 });
app.mount('#app');
</script>
</body>
</html>