vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex

1.创建vue项目

使用Vue CLI创建前端工程：

1.方式一：vue create 项目名称

打开cmd执行命令：

vue create 项目名称

2.方式二：vue ui

使用图形化方式创建vue方式。首先打开cmd输入命令（快捷键win+R可打开cmd）：

vue ui

此时打开项目管理器即可创建项目。

接下来耐心等待项目创建成功即可。
vue项目重点文件/目录：

运行vue项目

使用vscode打开vue项目，在集成终端中运行：

npm run serve

什么是node.js

Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。

以下是 Node.js 的一些关键特性：

1. 事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。

2. 单线程：尽管 JavaScript 运行在一个单线程上，但 Node.js 通过事件循环和回调函数来处理并发，避免了多线程编程中的复杂性。

3. NPM（Node Package Manager）：Node.js 拥有一个庞大的第三方库生态系统，通过 npm 可以很容易地安装和管理这些库。

4. 跨平台：Node.js 可以在多个平台上运行，包括 Windows、Linux 和 macOS。

5. 适用于多种场景：Node.js 不仅适用于 Web 服务器端开发，还可以用于构建命令行工具、桌面应用程序、物联网设备等。

6. JavaScript 语言：使用 Node.js 开发，你可以使用同一种语言编写前端和后端代码，这有助于提高开发效率。

7. 模块系统：Node.js 有一个强大的模块系统，允许开发者重用代码和构建大型应用程序。

8. 性能：由于 Node.js 底层使用 C++ 编写，并且利用了 V8 引擎的优化，它在性能方面通常优于传统的服务器端语言。

node.js和vue项目的关系

Node.js 和 Vue.js 项目之间存在一种工具和生态系统的关系，而不是直接的技术依赖关系。下面是它们之间的联系：

1. 构建工具：Node.js 提供了 npm（Node Package Manager），这是 JavaScript 社区中使用最广泛的包管理器。Vue.js 项目通常会使用 npm 来安装依赖项，包括 Vue 核心库和其他第三方库。

2. 开发服务器：在开发 Vue.js 应用时，开发者经常使用 Node.js 来运行一个开发服务器。Vue CLI（命令行界面）工具就是基于 Node.js 的，它可以快速搭建 Vue 项目，并提供一个热重载的开发服务器。

3. 前端工程化：Node.js 为前端工程化提供了基础，Vue.js 项目中常见的构建步骤，如代码转译（Babel）、模块打包（Webpack 或 Rollup）、代码压缩、单元测试等，都依赖于 Node.js 运行时环境。

4. Vue CLI：Vue CLI 是 Vue.js 的官方命令行工具，它允许开发者通过图形化界面或命令行快速生成和管理 Vue 项目。Vue CLI 本质上是一个 Node.js 应用程序，它使用 Node.js 来执行构建和开发任务。

5. VueX：在 Vue.js 项目中，VueX 作为状态管理库，经常与 Vue.js 一起使用。VueX 同样可以使用 npm 来安装，并且它的开发和构建也是基于 Node.js。

6. 服务端渲染（SSR）：对于需要服务端渲染的 Vue.js 应用，Node.js 可以作为一个服务器端环境来执行 Vue.js 应用的渲染工作。

7. 生态系统：Node.js 拥有庞大的生态系统和社区，为 Vue.js 开发者提供了丰富的工具和库，帮助他们构建和优化应用程序。

总结来说，Node.js 为 Vue.js 提供了开发和构建工具，而 Vue.js 是一个用于构建用户界面的框架。两者结合使用，可以提高前端开发效率和应用性能。

2.vue基本使用方式

1.vue组件

Vue.js 使用单文件组件（Single File Components，简称 SFC）来组织组件的代码。一个单文件组件通常是一个 .vue 文件，它将模板（HTML）、脚本（JavaScript）和样式（CSS）组合在一起，使得每个组件都是自包含的。以下是 .vue 文件的基本结构：

<template>
  <!-- 组件的 HTML 模板 -->
</template>

<script>
export default {
  // 组件的逻辑
  name: 'MyComponent',
  data() {
    return {
      // 组件的数据
    };
  },
  methods: {
    // 组件的方法
  },
  // ... 其他选项
};
</script>

<style scoped>
/* 组件的 CSS 样式，scoped 属性表示这些样式只应用于当前组件 */
</style>

组成部分：

1. 模板（Template）：

   • 位于 <template> 标签内。
   • 使用 Vue 的指令和插值表达式来构建 HTML。

2. 脚本（Script）：

   • 位于 <script> 标签内。
   • 定义组件的逻辑，包括数据、方法、生命周期钩子等。
   • 使用 export default 导出组件。

3. 样式（Style）：

   • 位于 <style> 标签内。
   • 可以包含 CSS 或预处理器（如 Sass、Less）。
   • 使用 scoped 属性可以限制样式的作用域，只影响当前组件。

脚本部分的组件选项：

• name：组件的名称。
• data：返回一个对象，包含组件的响应式数据。
• props：组件的属性列表。
• methods：定义组件的方法。
• computed：计算属性，它们的值是基于组件数据的计算结果。
• watch：观察者，用于监听数据的变化。
• components：定义组件内部使用的子组件。
• directives：自定义指令。
• mixins：混入，用于共享组件逻辑。
• extends：继承另一个组件的选项。
• provide/inject：提供和注入依赖。
• el：指定组件的挂载点。
• template：如果组件定义了 <template> 标签，则此选项可以指定模板的 ID。

示例：

<template>
  <div class="my-component">
    <h1>{
  { message }}</h1>
    <button @click="reverseMessage">Reverse Message</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
};
</script>

<style scoped>
.my-component h1 {
  color: red;
}
</style>

在这个示例中，我们定义了一个名为 MyComponent 的组件，它有一个数据属性 message 和一个方法 reverseMessage，用于反转消息。组件的样式被限定在作用域内，只影响当前组件。
总结：

2.文本插值

文本插值是一种将数据绑定到模板的方法，允许你将组件的数据动态地渲染到 HTML 中。文本插值通常使用双花括号 { { }} 来实现。以下是文本插值的一些关键点：

1. 基本用法：

   • 你可以在模板的任何地方使用 { { }} 来插入数据。
   • 例如：<p>{ { message }}</p> 将显示变量 message 的值。

2. 表达式：

   • 插值表达式不仅可以包含简单的数据属性，还可以执行简单的 JavaScript 表达式。
   • 例如：<p>{ { message + '!' }}</p> 将显示 message 后面跟着一个感叹号。

3. 更新：

   • 当绑定的数据变化时，插值表达式会自动更新 DOM，以反映最新的值。

4. 避免 HTML 转义：

   • 默认情况下，Vue 会对插值表达式进行 HTML 转义，以防止 XSS 攻击。
   • 如果你希望渲染 HTML，应该使用 v-html 指令，而不是插值表达式。

5. 过滤器：

   • Vue 允许你使用过滤器来格式化插值表达式的输出。
   • 例如：<p>{ { message | capitalize }}</p>，其中 capitalize 是一个过滤器，用于将 message 转换为大写。

6. JavaScript 表达式的限制：

   • 插值表达式支持的 JavaScript 表达式有限制，不能包含语句如 var、if、for 等。

7. 使用场景：

   • 文本插值适用于简单的文本显示，当需要渲染复杂的 HTML 结构时，应该使用 v-html 或组件。

8. 与 v-text 和 v-html 的区别：

   • v-text：替换元素的文本内容，类似于使用 textContent。
   • v-html：替换元素的 HTML 内容，类似于使用 innerHTML。

9. 避免使用在 v-for 列表渲染中：

   • 在使用 v-for 指令进行列表渲染时，不应该使用文本插值，因为它们不能正确地更新每个列表项。

10. 性能考虑：

    • 对于简单的文本显示，文本插值是高效的。但是，如果表达式复杂或包含多个依赖项，可能会导致不必要的 DOM 更新。

以下是一个简单的 Vue 组件示例，演示了如何使用文本插值来显示动态数据：

<template>
  <div class="greeting">
    <h1>{
  { greeting }}, {
  { name }}!</h1>
    <p>Your count is: {
  { count }}</p>
    <button @click="increment">Click me!</button>
  </div>
</template>

<script>
export default {
  name: 'Greeting',
  data() {
    return {
      greeting: 'Hello',
      name: 'World',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count += 1;
    }
  }
};
</script>

<style scoped>
.greeting h1 {
  color: #333;
}
</style>

在这个例子中：

• 我们定义了一个名为 Greeting 的 Vue 组件。
• 在 <template> 部分，我们使用了文本插值来显示 greeting、name 和 count 的数据。
• <h1> 标签中的 { { greeting }} 和 { { name }} 将显示 greeting 和 name 数据属性的值，并且它们会随着数据的变化而更新。
• <p> 标签中的 { { count }} 显示了一个名为 count 的数据属性的值，这个值会随着按钮点击而增加。
• <button> 标签定义了一个点击事件，当按钮被点击时，increment 方法会被调用，从而增加 count 的值。

3.属性绑定

属性绑定允许你将组件的数据动态地绑定到 DOM 元素的属性上。属性绑定使用 v-bind 指令，简写形式为 :。

以下是属性绑定的一些关键用法：

1. 基本用法：

   • 使用 v-bind 或 : 将数据绑定到属性。
   • 例如：<img :src="imageUrl"> 将 imageUrl 数据属性的值绑定到 <img> 元素的 src 属性。

2. 动态属性名：

   • 使用方括号 [] 表示动态属性名。
   • 例如：<button :[key]="value">，如果 key 是 'type'，则生成 <button :type="value">。

3. 类和样式绑定：

   • Vue 提供了 class 和 style 的绑定语法，可以动态地绑定类名和内联样式。
   • 例如：<div :class="{ active: isActive, 'text-danger': hasError }">。