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 的响应式系统会自动处理这些任务。

  1. 响应式系统：

    Vue 使用响应式系统来跟踪数据的变化。在 Vue 中，数据通常是通过 data 函数返回的对象来定义的。

  2. 依赖收集：

    当组件的模板被渲染时，Vue 会触发数据的 getter，从而将依赖（通常是模板中的变量）收集起来。

  3. 观察者模式：

    Vue 的响应式系统基于观察者模式，当数据变化时，依赖于这些数据的观察者（如组件的渲染函数）会被通知并更新。

  4. 虚拟 DOM：

    Vue 通过维护一个虚拟 DOM 树来表示真实 DOM 的状态。当数据变化时，Vue 会计算出最小的 DOM 更新。

  5. 双向数据绑定：

    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）

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

  1. 派生状态：当数据需要根据现有数据进行转换或计算时。
  2. 性能优化：避免在模板中进行复杂的逻辑处理，从而提高渲染效率。
new Vue({el: '#app',data: {firstName: 'Jane',lastName: 'Doe'},computed: {// 计算属性 fullName 依赖于 firstName 和 lastNamefullName: 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 来模拟异步操作。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/54816.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

初识C语言(三)

初识C语言(三)

感兴趣的朋友们可以留个关注&#xff0c;我们共同交流&#xff0c;相互促进学习。 文章目录 前言 八、函数 九、数组 &#xff08;1&#xff09;数组的定义 &#xff08;2&#xff09;数组的下标和使用 十、操作符 &#xff08;1&#xff09;算数操作符 &#xff08;2&#xff…
阅读更多...
统计本周的订单数,统计最近7天的订单数

统计本周的订单数,统计最近7天的订单数

3个函数 DATE_SUB和SUBDATE在MySQL中的作用是一样的&#xff0c;它们都是用于执行日期的减法运算。具体来说&#xff0c;这两个函数都允许你从给定的日期或日期时间值中减去一个指定的时间间隔&#xff0c;然后返回一个新的日期或日期时间值。 DATE函数 DATE(time) 用于获取…
阅读更多...
多机部署,负载均衡-LoadBalance

多机部署,负载均衡-LoadBalance

文章目录 多机部署,负载均衡-LoadBalance1. 开启多个服务2. 什么是负载均衡负载均衡的实现客户端负载均衡 3. Spring Cloud LoadBalance快速上手使用Spring Cloud LoadBalance实现负载均衡修改IP,端口号为服务名称启动多个服务 负载均衡策略自定义负载均衡策略 LoadBalance原理…
阅读更多...
图像处理04

图像处理04

图像处理 问题&#xff1a;把不规则的图片按照参考图摆放 步骤&#xff1a; 1. 用ORB找关键点 2. 关键点匹配 3. 根据上一步匹配的关键点得出单应性矩阵 4. 根据单应性矩阵对不规则进行透视变换 import cv2 import numpy as np import matplotlib.pyplot as pltimgl cv2.imrea…
阅读更多...
liunxcentos7下 跟目录空间不足docker load镜像报错空间不足

liunxcentos7下 跟目录空间不足docker load镜像报错空间不足

前两天在公司&#xff0c;做jenkins流水线项目&#xff0c;然后把项目放到docker容器里面运行&#xff0c;就在我把镜像打好包的时候正准备往服务器里面导入镜像的时候报错&#xff1a;如图所示 这时发现自己的根目录空间不足。 解决办法&#xff1a;重新加一块磁盘将磁盘挂载…
阅读更多...
Java线程池和原子性

Java线程池和原子性

文章目录 前言1 线程池1.1 线程池概述1.1.1 线程池存在的意义1.1.2 Executors默认线程池 1.2 线程状态介绍1.2.1 线程状态源码1.2.2 线程状态含义1.2.3 线程状态转换图 2 原子性2.1 volatile关键字2.2 synchronized解决2.3 原子性2.4 AtomicInteger类2.5 悲观锁和乐观锁 前言 …
阅读更多...
Vue 响应式监听 Watch 最佳实践

Vue 响应式监听 Watch 最佳实践

一. 前言 上一篇文章我们学习了 watch 的基础知识&#xff0c;了解了它的基本使用方法及注意事项&#xff0c;本篇文章我们继续了解在Vue 中 响应式监听 watch 的妙用。了解 watch 的基础使用请参考上一篇文章&#xff1a; 详解 Vue 中 Watch 的使用方法及注意事项https://bl…
阅读更多...
【Docker】02-数据卷

【Docker】02-数据卷

1. 数据卷 数据卷(volume) 是一个虚拟目录&#xff0c;是容器内目录与宿主机目录之间映射的桥梁。 2. 常见命令 docker volume createdocker volume lsdocker volume rmdocker volume inspect 查看某个数据卷的详情docker volume prune 清除数据卷 **数据卷挂载&#xff1a…
阅读更多...
bench.sh：一行命令测试Linux服务器基准测试

bench.sh：一行命令测试Linux服务器基准测试

简介 bench.sh 是一个 Linux 系统性能基准测试工具。它的测试结果如下图&#xff1a;给出服务器的整体配置信息&#xff0c;IO 性能&#xff0c;网络性能。很多人使用它测试 vps 性能。 ​​ 一键运行 服务器在国外可以使用以下命令运行测试 wget -qO- bench.sh | bash复制…
阅读更多...
微信小程序配置prettier+eslint

微信小程序配置prettier+eslint

虽然微信开发者工具是基于vscode魔改的.但是由于版本过低,导致很多插件也用不上新版本.所以在微信开发者工具限制的版本下使用的prettier,eslint也是有版本要求. 本文主要就是记录一下需要的版本号 1.微信开发者工具安装插件 2.package.json中添加以下依赖及安装依赖 "de…
阅读更多...
JVM(HotSpot)：方法区(Method Area)

JVM(HotSpot)：方法区(Method Area)

文章目录 一、内存结构图二、方法区定义三、内存溢出问题四、常量池与运行时常量池 一、内存结构图 1.6 方法区详细结构图 1.8方法区详细结构图 1.8后&#xff0c;方法区是JVM内存的一个逻辑结构&#xff0c;真实内存用的本地物理内存。 且字符串常量池从常量池中移入堆中。 …
阅读更多...
云服务器连接不上是什么原因引起的？

云服务器连接不上是什么原因引起的？

云服务器连接不上是什么原因引起的&#xff1f;云服务器连接不上是一个常见的问题&#xff0c;常见的原因有网络连接、账户权限、安全组设置、服务器状态、端口占用、远程登录未开启、云服务器已关闭或到期、防护软件限制、DNS劫持、资源负载过高。以下是一些主要原因及解决方法…
阅读更多...
微信小程序 - 最新详细安装使用 Vant weapp UI 框架环境搭建详细教程

微信小程序 - 最新详细安装使用 Vant weapp UI 框架环境搭建详细教程

前言 自从 2024 年开始，小程序做了很多改变和升级， 导致网上很多搭建教程文章的教程失效了，本文来做最新的教程。 第一步 为了更贴合新手，我这里创建了一个纯净无任何业务代码的小程序项目。
阅读更多...
SpringBoot-全局处理异常，时间格式，跨域，拦截器，监听器

SpringBoot-全局处理异常，时间格式，跨域，拦截器，监听器

1.全局异常处理 使用ControllerAdvice与ExceptionHandler注解 /*** 全局异常处理程序** author * date */ ControllerAdvice ResponseBody public class GlobalExceptionHandler {ExceptionHandler(Exception.class)public JsonResult handleException(Exception e) {e.print…
阅读更多...
Wireshark学习使用记录

Wireshark学习使用记录

wireshark 是一个非常好用的抓包工具&#xff0c;使用 wireshark 工具抓包分析&#xff0c;是学习网络编程必不可少的一项技能。 原理 Wireshark使用的环境大致分为两种:一种是电脑直连互联网的单机环境&#xff0c;另外一种就是应用比较多的互联网环境&#xff0c;也就是连接…
阅读更多...
Windows下安装Neo4j流程

Windows下安装Neo4j流程

Neo4j简介 Neo4j 是一个基于图形结构的 NoSQL 数据库&#xff0c;专门用于存储和管理图数据。与传统的关系型数据库不同&#xff0c;Neo4j 使用 图&#xff08;graph&#xff09;的形式来表示数据&#xff0c;其中数据点&#xff08;称为 节点&#xff09;通过 边&#xff08;…
阅读更多...
分拆逆势上会，兴福电子部分专利来自母公司，独立性被拷问

分拆逆势上会，兴福电子部分专利来自母公司，独立性被拷问

作者&#xff1a;Cindy 来源&#xff1a;IPO魔女 公司拟募集资金12.10亿元&#xff0c;保荐机构为天风证券。兴福电子2023年5月就提交了上市申请&#xff0c;期间经历了2轮问询&#xff0c;一年多时间就开启上会。 然而值得注意的是&#xff0c;兴福电子属于分拆上市&#xff…
阅读更多...
亚马逊IP关联揭秘：发生ip关联如何处理

亚马逊IP关联揭秘：发生ip关联如何处理

在亚马逊这一全球领先的电商平台上&#xff0c;IP关联是一个不可忽视的问题&#xff0c;尤其是对于多账号运营的卖家而言。本文将深入解析亚马逊IP关联的含义、影响以及应对策略&#xff0c;帮助卖家更好地理解和应对这一问题。 什么是亚马逊IP关联&#xff1f; 亚马逊IP关联…
阅读更多...
【最新华为OD机试E卷-支持在线评测】字符串变换最小字符串(100分)多语言题解-(Python/C/JavaScript/Java/Cpp)

【最新华为OD机试E卷-支持在线评测】字符串变换最小字符串(100分)多语言题解-(Python/C/JavaScript/Java/Cpp)

🍭 大家好这里是春秋招笔试突围 ，一枚热爱算法的程序员 💻 ACM金牌🏅️团队 ｜ 大厂实习经历 ｜ 多年算法竞赛经历 ✨ 本系列打算持续跟新华为OD-E/D卷的多语言AC题解 🧩 大部分包含 Python / C / Javascript / Java / Cpp 多语言代码 👏 感谢大家的订阅➕ 和 喜欢�…
阅读更多...
MySQL练手题--日期连续类型（困难）

MySQL练手题--日期连续类型（困难）

一、准备工作 Create table If Not Exists Failed (fail_date date); Create table If Not Exists Succeeded (success_date date); Truncate table Failed; insert into Failed (fail_date) values (2018-12-28); insert into Failed (fail_date) values (2018-12-29); inser…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023