VUE.js笔记

1.介绍vue

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue 应用程序的基本结构通常围绕组件（Components）来组织。组件是 Vue 应用的构建块，它们可以包含 HTML、JavaScript 和 CSS，并且可以独立于其他组件工作。

2.框架结构

1. 根实例和根组件

每个 Vue 应用都是从一个根实例开始的。
根实例通常与一个根组件（App.vue）相关联，这个组件作为应用的入口点和顶层容器。

2. 组件结构

单文件组件：在 Vue 项目中，每个组件通常是一个 .vue 文件，它包含三个部分：<template>、<script> 和 <style>。
组件嵌套：组件可以包含其他子组件，形成嵌套结构。这允许开发者构建复杂的用户界面。

3. 组件通信

父子通信：父组件可以通过 props 向子组件传递数据，子组件可以通过事件向父组件发送消息。
子父通信：子组件可以使用 this.$emit 触发事件，父组件监听这些事件并作出响应。
事件总线：对于更复杂的应用，可以使用事件总线（Event Bus）或 Vuex 进行跨组件通信。

4. 路由（Vue Router）

视图管理：Vue Router 允许你构建单页面应用程序，通过不同的路径来切换不同的视图（组件）。
路由配置：在 router/index.js 中配置路由，定义路径与组件之间的映射关系。

5. 状态管理（Vuex）

集中式存储：Vuex 提供了一个集中式存储管理应用的所有组件的状态。
状态修改：通过提交 mutation 来修改状态，通过 action 处理异步操作。

6. 资源和插件

插件：Vue 插件可以提供额外的功能，如 vue-router 和 vuex。
资源：静态资源（如图片、样式表）通常放在 public 目录中。

7. 构建和开发工具

Vue CLI：Vue CLI 提供了项目脚手架、构建和开发服务器。
构建配置：通过 vue.config.js 文件自定义构建配置。

8. 项目目录结构

一个典型的 Vue 项目目录结构可能如下所示：

my-project/
│
├── public/             # 静态资源文件
│
├── src/                 # 源代码
│   ├── assets/          # 静态资源，如图片、样式
│   ├── components/      # 应用组件
│   ├── views/           # 视图组件
│   ├── router/          # 路由配置
│   ├── store/           # Vuex 状态管理
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
│
├── tests/               # 测试文件
│
├── .gitignore            # Git 忽略文件配置
├── package.json         # 项目依赖和脚本
├── README.md            # 项目说明文件
└── vue.config.js        # Vue CLI 构建配置

理解这些基本结构和组件组织方式有助于开发者更好地组织和管理 Vue 应用程序的代码，使其更加模块化、可维护和可扩展。

3.vue模板语法

【电脑关机重启后，vue项目需要再次使用运行命令，使之运行。】

组件化开发：

组件：由三种语法组成，html,css ,js

语法模板就是{{ }} 双层大括号。

4.生命周期钩子

在 Vue.js 中，生命周期钩子（Lifecycle Hooks）是特殊的函数，可以在 Vue 实例或组件的不同阶段被调用。这些钩子允许开发者在实例或组件的生命周期中的特定时刻执行代码。

1.beforeCreate(创建前)：

在实例初始化之后，数据观测和事件/侦听器配置之前被调用。

2.created(创建后)：

在实例创建完成后被调用，此时数据观测和事件/侦听器已经设置好，但组件尚未挂载到 DOM 上。

3.beforeMount（组件特有-渲染前）：

在首次渲染之前调用，此时虚拟 DOM 已经创建，但尚未挂载到真实 DOM 上。

4.mounted(渲染后)：

在实例或组件挂载到 DOM 上后调用，此时可以访问到 DOM 元素。

5.beforeUpdate(更新前)：

在数据变化导致虚拟 DOM 重新渲染之前调用。

6.updated(更新后)：

在虚拟 DOM 重新渲染并打补丁完成后调用，此时组件已经更新。

7.beforeDestroy(销毁前)：

在实例或组件销毁之前调用，此时实例或组件仍然完全可用。

8.destroyed(销毁后)：

在实例或组件销毁后调用，此时实例或组件已经不可用。

9.activated（组件特有，用于 keep-alive 缓存的组件）：

被 keep-alive 缓存的组件被激活时调用。

10.deactivated（组件特有，用于 keep-alive 缓存的组件）：

被 keep-alive 缓存的组件被停用时调用。

11.errorCaptured（Vue 2.5.0+）：

捕获组件内的错误时调用。

12.钩子使用

使用生命周期钩子，开发者可以在 Vue 实例或组件的不同阶段执行初始化、数据获取、清理工作等操作。这些钩子是 Vue 应用开发中不可或缺的一部分，它们提供了对组件生命周期的细粒度控制。

new Vue({
  data: {
    message: 'Hello World!'
  },
  beforeCreate: function() {
    console.log('beforeCreate - 实例创建，数据观测和事件/侦听器尚未设置。');
  },
  created: function() {
    console.log('created - 实例已创建，数据观测和事件/侦听器已设置。');
  },
  beforeMount: function() {
    console.log('beforeMount - 首次渲染之前。');
  },
  mounted: function() {
    console.log('mounted - 实例已挂载到 DOM 上。');
  },
  beforeUpdate: function() {
    console.log('beforeUpdate - 数据变化，虚拟 DOM 重新渲染之前。');
  },
  updated: function() {
    console.log('updated - 虚拟 DOM 重新渲染并打补丁完成。');
  },
  beforeDestroy: function() {
    console.log('beforeDestroy - 实例销毁之前。');
  },
  destroyed: function() {
    console.log('destroyed - 实例销毁后。');
  }
});

5.工具和库

Vue Router、Vuex 和 Vue CLI 是 Vue 生态系统中的三个重要组成部分，它们共同支持构建现代的单页面应用程序（SPA）。

Vue Router、Vuex 和 Vue CLI 一起构成了 Vue.js 的官方“三个火枪手”，它们为构建大型、复杂的单页面应用程序提供了必要的工具和模式。通过这些工具，开发者可以更高效地构建和管理现代的前端应用。

1.Vue Router

Vue Router 是 Vue.js 的官方路由管理器。它允许你构建多视图的单页面应用程序，通过不同的路径来切换组件，而不需要重新加载页面。Vue Router 与 Vue.js 核心深度集成，使得在 Vue 应用中使用路由变得简单而直观。

主要特点：

嵌套路由：支持嵌套的路由和视图。
路由参数：可以捕获 URL 中的参数并作为组件的 props 传递。
路由守卫：提供了不同的守卫钩子，如全局守卫、路由独享的守卫和组件内的守卫。
懒加载：支持路由级别的代码分割，可以提高应用的加载速度。

2.Vuex

Vuex 是 Vue.js 的官方状态管理模式。它用于在应用程序中集中管理状态（也称为状态管理模式），适用于复杂应用。Vuex 通过集中存储管理所有组件的状态，并通过相应的规则保证状态以一种可预测的方式发生变化。

主要特点：

单一状态树：整个应用的状态被集中管理在一个对象中。
状态管理：提供了响应式的状态管理。
变更跟踪：可以跟踪状态的变化，方便调试和时间旅行。
热重载：支持热重载和开发工具集成。

3.Vue CLI

Vue CLI 是 Vue.js 的官方命令行工具，用于快速搭建 Vue 项目。它提供了一个易于使用且可扩展的界面，允许开发者快速开始开发 Vue 应用，并包含现代前端开发所需的所有工具。

主要特点：

项目脚手架：快速创建新项目的模板。
插件系统：支持扩展和自定义项目配置。
构建和服务：提供了构建和本地服务的功能。
现代工具链：集成了 Babel、Webpack、PostCSS 等现代前端工具。

使用 Vue CLI 创建项目通常涉及以下步骤：

bash

# 全局安装 Vue CLI
npm install -g @vue/cli

# 创建一个新的 Vue 项目
vue create my-project

# 进入项目目录
cd my-project

# 启动开发服务器
npm run serve

6.响应式数据绑定

Vue.js 实现响应式数据绑定和双向数据流主要依赖于以下几个核心技术：

通过这种方式，Vue.js 使得数据和视图之间的同步变得简单和高效，同时保持了代码的简洁性。开发者不需要手动操作 DOM 或监听事件来更新视图，Vue 的响应式系统会自动处理这些任务。

响应式系统：
Vue 使用响应式系统来跟踪数据的变化。在 Vue 中，数据通常是通过 data 函数返回的对象来定义的。
依赖收集：
当组件的模板被渲染时，Vue 会触发数据的 getter，从而将依赖（通常是模板中的变量）收集起来。
观察者模式：
Vue 的响应式系统基于观察者模式，当数据变化时，依赖于这些数据的观察者（如组件的渲染函数）会被通知并更新。
虚拟 DOM：
Vue 通过维护一个虚拟 DOM 树来表示真实 DOM 的状态。当数据变化时，Vue 会计算出最小的 DOM 更新。
双向数据绑定：
Vue 提供了 v-model 指令来实现双向数据绑定。v-model 通常用于表单输入元素，如 <input>、<textarea> 和 <select>。

1.响应式数据绑定：

1.初始化：

当创建 Vue 实例时，Vue 会遍历 data 对象中的属性，并使用 Object.defineProperty 将它们转换为 getter/setter。

2.依赖收集：

当组件的模板被渲染时，Vue 会访问这些属性（getter），并记录下哪些组件依赖于这些属性。

3.数据变化：

当数据发生变化时，触发 setter，Vue 会通知所有依赖于这些数据的组件。

4.异步更新队列：

Vue 将所有数据变化放入一个异步队列，然后批量处理这些变化。

5.视图更新：

在下一个事件循环中，Vue 清空异步队列，并更新所有依赖的组件的视图。

2.双向数据绑定：

`1.v-model` 指令：

在模板中使用 v-model 指令可以将表单输入元素与数据属性绑定。

2.输入事件监听：

Vue 在输入元素上监听 input 事件（对于 <textarea> 可能是 change 事件），并在事件处理函数中更新数据。

3.数据同步：

当用户输入时，Vue 通过事件处理函数同步更新数据，从而实现双向绑定。

4.视图响应：

由于数据是响应式的，数据的变化会自动触发视图的更新，使得输入元素的值与数据保持一致。

7.组件系统

Vue 的组件系统是构建大型应用程序的关键。通过组件化开发，可以将界面分解为独立的、可复用的组件，每个组件负责应用程序的一部分功能。

通过这些概念和工具，Vue 的组件系统提供了强大的能力来构建和管理复杂的用户界面。开发者可以创建可复用的组件，构建模块化的代码，从而提高开发效率和应用程序的可维护性。

1.组件创建

单文件组件：在 Vue 中，通常使用 .vue 单文件组件，它将模板、脚本和样式整合在一个文件中。
组件结构：一个基本的 Vue 组件至少包含一个 <template>、一个 <script> 部分，可选的 <style> 部分。

2.组件注册

局部注册：在 Vue 组件的 <script> 部分使用 components 属性定义并注册组件。
全局注册：使用 Vue 的 Vue.component 方法在全局范围内注册组件。

3.Props

传递数据：Props 是父组件传递给子组件的数据。子组件通过声明 props 属性来接收从父组件传递的数据。
单向数据流：Props 形成了父子组件之间的单向数据流，即数据只能从父组件流向子组件。

4.事件传递

自定义事件：子组件可以通过 this.$emit 方法触发事件，并将数据传递给父组件。
监听事件：父组件使用 v-on 或 @ 语法监听子组件触发的事件，并定义相应的处理函数。

5.组件通信

父子通信：通过 props 和事件，实现父子组件之间的数据和事件传递。
兄弟通信：通常通过共同的父组件来协调兄弟组件之间的通信。
跨级通信：可以使用事件总线、Vuex 或提供/注入模式来实现。

6.插槽（Slots）

内容分发：插槽允许子组件将内容传递回父组件的模板中，实现更灵活的内容插入。
具名插槽：可以定义具名插槽来插入特定的内容。

7.动态组件

<component> 标签：使用 is 属性动态切换不同的组件。

8.混入（Mixins）

代码复用：混入允许你定义可复用的组件逻辑，然后在多个组件中使用这些逻辑。

9.组件库

第三方组件库：如 Vuetify、Element UI 等，提供了一套预制的组件，可以加速开发过程。

8.计算属性与侦听器

在 Vue.js 中，计算属性（Computed Properties）和侦听器（Watchers）是处理复杂数据逻辑的两个重要工具。它们都基于 Vue 的响应式系统，但用途和工作方式有所不同。

计算属性：适用于需要根据现有数据计算新值的场景，且计算结果会被缓存。

侦听器：适用于需要对数据变化做出响应并执行复杂逻辑的场景。

合理使用计算属性和侦听器可以帮助你构建更高效、更易于维护的 Vue 应用程序。

1.计算属性（Computed Properties）

计算属性是基于它们的响应式依赖进行缓存的。只有当计算属性依赖的数据发生变化时，计算属性才会重新计算。它们通常用于以下情况：

派生状态：当数据需要根据现有数据进行转换或计算时。
性能优化：避免在模板中进行复杂的逻辑处理，从而提高渲染效率。

new Vue({
  el: '#app',
  data: {
    firstName: 'Jane',
    lastName: 'Doe'
  },
  computed: {
    // 计算属性 fullName 依赖于 firstName 和 lastName
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

在上面的例子中，fullName 是一个计算属性，它依赖于 firstName 和 lastName。当 firstName 或 lastName 发生变化时，fullName 会自动更新。

2.侦听器（Watchers）

侦听器用于在数据变化时执行异步或开销较大的操作。它们可以用来监听数据的变化，并在变化发生时执行任何响应。

new Vue({
  el: '#app',
  data: {
    question: '',
    answer: 'I cannot answer until you ask a question!'
  },
  watch: {
    // 侦听器监听 question 的变化
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...';
      this.debouncedGetAnswer();
    }
  },
  methods: {
    debouncedGetAnswer: function () {
      setTimeout(() => {
        this.answer = 'Thinking...';
        setTimeout(() => {
          this.answer = 'The answer is: 42';
        }, 1000);
      }, 500);
    }
  }
});

在这个例子中，question 是一个被侦听的数据属性。当用户输入问题时，侦听器会触发，执行 debouncedGetAnswer 方法，该方法使用 setTimeout 来模拟异步操作。