Vue快速入门

Vue快速入门

一.
MVVM（Model-View-ViewModel）是一种设计模式，用于将应用程序的数据模型、用户界面和业务逻辑分离。它主要用于构建用户界面的应用程序，特别是在使用数据绑定技术的框架中。

MVVM模式的主要组成部分如下：

Model（模型）：负责处理应用程序的数据和业务逻辑。它通常包含数据的获取、存储和操作的逻辑。

View（视图）：负责显示数据给用户。视图通常是由XAML或HTML等标记语言定义的用户界面元素，如按钮、文本框等。

ViewModel（视图模型）：作为Model和View之间的桥梁，负责处理用户的输入和交互，并将数据传递给视图进行展示。它还负责将视图的状态反馈给Model，以便在需要时更新数据。

MVVM模式的优点包括：

分离关注点：通过将数据、视图和业务逻辑分离，使得代码更易于维护和测试。
可重用性：ViewModel可以在不同的视图中使用，提高了代码的复用性。
灵活性：ViewModel可以适应不同的视图需求，例如在不同的平台或设备上呈现相同的数据。
MVVM模式在许多现代前端框架中得到了广泛应用，如WPF（Windows Presentation Foundation）、Angular、Vue.js等。

二.
Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页应用程序。它由尤雨溪（Evan You）创建并维护，现在由 Vue.js 基金会管理。Vue.js 的设计目标是渐进式采用，这意味着你可以根据需要逐步引入和使用它。

Vue.js 的核心库专注于视图层，易于与其他库或现有项目集成。它提供了一套声明式的模板语法，使得开发者能够轻松地创建交互式的 UI。此外，Vue.js 还支持组件化开发，允许你将复杂的 UI 拆分成可重用的组件，从而提高代码的可维护性和可扩展性。

Vue.js 还具有一些强大的功能，如响应式数据绑定、条件渲染、列表渲染、事件处理等。它还提供了一套完整的工具链，包括编译器、调试器和热重载等功能，以帮助开发者更高效地构建和管理应用程序。

Vue.js 广泛应用于各种类型的项目中，包括企业级应用、移动应用、桌面应用和静态网站等。它的生态系统也非常丰富，有许多插件和库可以与 Vue.js 一起使用，例如 Vuex 用于状态管理、Vue Router 用于路由管理、Vue CLI 用于项目脚手架等。

总之，Vue.js 是一个功能强大且易于使用的前端框架，适用于构建现代化的 Web 应用程序。

Vue入门程序

el属性：表示要控制那个视图区域，它的值#app就相当于css当中的选择器，井号大头所以视图就有id=“app”，也就表明我们所创建的Vue对象他所接管的视图区域。
data属性：就是数据模型Model，他是一个对象里面有一个key是Message，在视图当中有一个Vue指令是v-model来绑定数据模型（Message），所以Message定义的数据模型就会在视图中展示出来实现双向绑定。

Vue的生命周期

生命周期方法

Vue.js 的生命周期方法是指在组件实例化、更新和销毁的过程中，可以执行的一系列钩子函数。这些钩子函数允许你在特定的时间点执行自定义逻辑。以下是 Vue.js 的一些主要生命周期方法：

beforeCreate: 在实例初始化之后，数据观测 (data observer) 和事件配置之前被调用。此时，还没有开始挂载模板。

created: 在实例创建完成后被立即调用。此时，已经完成了数据观测和属性和方法的运算，但尚未挂载到 DOM。

beforeMount: 在挂载开始之前被调用，相关的 render 函数首次被调用。

mounted: 在挂载完成后被调用，此时，el 已经被新创建的 vm.$el 替换，并已添加到文档流中。

beforeUpdate: 在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进一步地更改数据。

updated: 在数据更新后调用，所有的组件视图都已重新渲染完成。

beforeDestroy: 在实例销毁之前调用。此时，实例仍然完全可用。

destroyed: 在实例销毁后调用。所有的子实例也都被销毁。

activated: 在 keep-alive 组件激活时调用。

deactivated: 在 keep-alive 组件停用时调用。

这些生命周期方法提供了一种方式来插入自己的代码，以便在特定时刻执行一些操作。例如，你可以在 created 钩子中发起网络请求获取数据，然后在 mounted 钩子中将数据绑定到视图上。

Ajax

异步与同步交互

异步交互和同步交互是两种不同的数据交互方式。

同步交互：在同步交互中，客户端发送请求后会等待服务器响应。只有当服务器返回响应时，客户端才会继续执行后续操作。这种方式简单直观，但可能会导致用户体验不佳，因为用户需要等待服务器处理请求并返回结果。

异步交互：在异步交互中，客户端发送请求后不会立即等待服务器响应。相反，它会立即继续执行后续操作，而服务器会在后台处理请求并将结果发送回客户端。客户端可以通过回调函数、事件监听器或其他机制来接收服务器的响应。这种方式可以提高用户体验，因为用户可以继续与应用程序互动，而不必等待服务器响应。

异步交互通常用于处理耗时较长的操作，例如网络请求、文件读写等。这样可以确保应用程序在等待这些操作完成时仍然保持响应。然而，异步编程也带来了一些挑战，如错误处理、状态管理等问题。因此，在使用异步交互时，开发者需要仔细考虑如何设计代码以处理这些问题。

原生Ajax请求（比较繁琐不推荐）

Axios

https://www.axios-http.cn/

推荐

视频案例讲解

https://www.bilibili.com/video/BV1m84y1w7Tb?p=35&spm_id_from=pageDriver&vd_source=a8c4f24be1fb19879768a82e194944ae

在Vue3项目中使用Axios

1.从js文件中引入axios
第一种方法是，先在js文件中对axios做一些处理再引入到vue文件中，比如请求拦截、响应拦截、封装统一的get、post方法，甚至是定义接口请求。
具体做法：

1.安装

npm i --save axios

2.对axios做处理
requests/index.js

import axios from 'axios'

axios.defaults.timeout = 50000

axios.interceptors.request.use(config => {
  // ...
  return config
}, error => {
  return Promise.error(error)
})

function getName(params) {
    return axios.get(`xx/xx/${params}`)
}

export {
    getName
}

3.在vue文件中请求接口
test.vue

<script lang="ts" setup>
import {getName} from '~@/requests/index'
onMounted(() => {
  getName('xxxx');
});
</script>

2.将axios挂载在全局变量上
这种方法，可以从全局变量中获取axios

1.安装

npm i --save axios

2.挂载

import axios from 'axios'

app.config.globalProperties.axios = axios
3.使用axios
import { getCurrentInstance } from 'vue'
const { appContext } = getCurrentInstance();
onMounted(() => {
  console.log(appContext.config.globalProperties.axios)
})

3.使用vue-axios
这种方法可以用vue.use()安装axios，然后通过provide-inject使用。

1.安装

npm install --save axios vue-axios

2.挂载

import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App).use(store)
app.use(VueAxios, axios)
app.provide('axios', app.config.globalProperties.axios)
3.使用
import { inject } from 'vue'
const axios = inject('axios')
console.log(axios)

前端工程化

原因

接口文档的书写

Api接口管理平台

postman，Apipost，YApi

Vue脚手架

我们每一次开发一个功能呢，都是从零开始多个页面当中的组件或者
是功能复用性并不好，并且呢我们的js文件我们的图片资源文件没
有规范化的存储目录我们想怎么定义就怎么定义那在团队协作开发时
呢？每一个开发人员都有自己的开发习惯，那这样做呢，并不便于项
目的维护和项目的管理所以呢，在现在的简单开发当中啊都讲究前端
开发的模块化组件化规范化和自动化，那模块化呢指的就是我们可以
将jscss制作成一个一个可以复用的模块，那组件化呢指的就是我
们可以将ui组件css样式以及js的行为封装成一个一个的组件并于管
理第3个规范,那这个呢指的就是我们可以提供一套标准规范

Vue项目目录结构讲解

Vue的启动形式

Vue项目中修改端口

Vue项目开发流程

入口文件表示需将Vue实例挂载到井号appDOM元素上

Vue组件库 Element UI

https://element.eleme.cn/#/zh-CNListener基于Vue2
https://element-plus.org/zh-CN/#/zh-CN基于Vue3

在Vue项目里全局引入element-Ui

在项目里安装
选择一个你喜欢的包管理器

 NPM
$ npm install element-plus --save

 Yarn
$ yarn add element-plus

 pnpm
$ pnpm install element-plus

// main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

全屏报错解决方法

axios请求错误处理Uncaught runtime errors:handleError@webpack-internal:///./node_modules/webpack-dev-server

在vue.config.js中把devServer设置client: {overlay: false}就可以不显示全屏报错了

const defineConfig }require('dvue/cli-service')
module.exports defineConfig(
config
transpileDependencies:true,
configureWebpack{:
**devserver{:
client:{overlay:false}
}**
}