在vscode中练习vue官方文档中的代码片段以及vue原理

1.安装Node.js 和 npm

命令提示符（不行的话管理员身份运行）检查是否安装成功：输出版本号说明安装成功

2.在全局安装 Vue CLI

npm install -g @vue/cli

3.使用这两个指令到目录中使用 Vue CLI 创建一个新的 Vue.js 项目。

解释：

        d://转到d盘目录下

        cd - Change Directory，用于改变当前工作目录。

                示例：cd D:\FolderName（将当前目录切换到 D 盘下的 FolderName 目录）

在命令行中执行以下命令：

vue create my-vue-app

可以参考这个，如何创建一个vue项目（详细步骤）_创建vue项目-CSDN博客

从链接的第三个部分的方法二开始。

4.创建好项目后，打开VS Code，可以通过以下命令：

code .

这将在当前目录下打开VS Code。

可以看到文件结构如下

  App.vue 是Vue应用的根组件，是你进行练习和编码的地方。

在一个典型的 Vue CLI 创建的项目中，不需要手动在页面中直接引用App.vue 组件。Vue CLI 在创建项目时会自动配置好整个应用的入口，并在其中引用和渲染App.vue组件。

在 App.vue 中，可以编辑 <template>、<script> 和 <style> 部分，分别对应HTML模板、JavaScript逻辑和CSS样式。

入口文件 (main.js)：通常在 src/main.js 文件中，会通过 new Vue() 创建一个根 Vue 实例，并且将 App.vue 组件作为根组件进行注册和渲染。

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App)
}).$mount('#app');

模板文件 (public/index.html)：在 public/index.html 中，会有一个标记了 id="app" 的 DOM 元素，这是 Vue 实例挂载的目标元素。Vue 在运行时会将根组件 App.vue 渲染到这个挂载点上。

<div id="app"></div>

因此，只需要在 Vue CLI 项目的开发过程中编辑和修改 App.vue 组件，而不需要手动在页面的 HTML 文件中引用它。Vue CLI 会自动处理组件的引入和渲染，这样可以更加专注于组件的开发和功能实现。

5.运行项目

在终端中，确保你仍然在项目目录下。

使用以下命令来启动开发服务器：

这个命令的详解可见于我的另一篇文章：Vue CLI报错400，开发中服务器指令应用-CSDN博客

npm run serve

这将编译你的Vue代码并启动一个开发服务器。通常会在终端中显示访问项目的本地地址（例如 http://localhost:8080/），在浏览器中打开这个地址可以看到你的Vue应用的运行效果。

---

---

在vscode中练习vue官方文档中的代码片段的实现步骤都已完成，现在说明几个概念：

vue的原理：

1. 响应式数据绑定

Vue.js 的核心是其响应式数据绑定系统。当你将数据绑定到 Vue 实例上时，Vue 将追踪这些数据的变化。一旦数据发生变化，视图将会自动更新。这种响应式的实现是通过使用 Object.defineProperty 或 Proxy 来实现的，具体取决于浏览器支持的情况。

2. 组件化开发

Vue.js 支持组件化开发，允许开发者将页面拆分为独立可复用的组件。每个 Vue 组件本质上是一个拥有预定义选项的 Vue 实例。这些组件可以嵌套使用，形成复杂的应用程序。

3. 虚拟 DOM

Vue.js 使用虚拟 DOM（Virtual DOM）来优化页面渲染性能。每当数据发生变化时，Vue 会生成一个新的虚拟 DOM 树，然后通过比对新旧虚拟 DOM 树的差异（Diff算法），最终只对真实 DOM 进行必要的更新，避免了直接操作真实 DOM 带来的性能损耗。

4. 模板语法

Vue.js 提供了一套基于 HTML 的模板语法，允许开发者将 DOM 绑定到 Vue 实例中的数据。通过模板语法，你可以轻松地将数据渲染到 DOM 中，并且支持条件渲染、循环、事件处理等功能。

5. 生命周期钩子

Vue 组件具有一系列的生命周期钩子函数，允许开发者在组件生命周期的不同阶段添加自定义逻辑。例如，created、mounted、updated、destroyed 等钩子函数可以帮助开发者在合适的时机执行代码。

6. 指令

Vue.js 提供了一些内置的指令（Directives），用于增强 HTML 的功能。比如 v-bind 用于绑定属性，v-model 用于实现表单输入双向绑定，v-for 用于循环渲染列表等。

7. 插件系统

Vue.js 允许开发者通过插件（Plugin）来扩展其核心功能。许多常见的功能，如路由（vue-router）、状态管理（Vuex）、服务端通信（axios）等，都是通过插件来实现的。