m0_51134729的博客

案例实战1. 创建项目npm create vite@latest 0410-vue3-vuex-project我们这个项目会用 vite2.8 + Vue3.2 + Router4 + Vuex4 + TypeScript4.6 + Element-Plus + axios2. 安装依赖npm install vue-router@4npm install vuex@nextnpm install axiosnpm install element-plusnpm install les

Vuex1. 什么是 VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。2. 安装在项目中执行如下命令来安装 vuexnpm install vuex@next3. 开始每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：Vuex 的状态存储是

导航守卫1. 环境准备1.1 安装Element-Plusnpm install element-plus1.2 注册Element-Plush需要在 main.ts 文件中注册import { createApp } from 'vue'import App from './App.vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'createApp(App).use(Ele

vue路由第二篇-路由传参路由1. 路由传参1.1 环境准备1.1.1 定义数据1.1.2 定义类型1.1.3 定义列表组件1.1.4 配置路由1.1.5 挂载路由1.1.6 在根组件中使用路由1.2 完整列表组件1.3 编写详情组件1.4 配置详情组件的路由1.5 query传参1.5.1 完善产品列表的点击事件1.5.2 接收参数1.6 params传参1.6.1 传递参数1.6.2 接收参数1.7 动态路由传参1.7.1 修改路由1.7.2 传递参数1.7.3 接收参数2. 嵌套路由2.1 环境准备2

vue路由笔记路由1. 安装2. 入门2.1 根组件2.2 创建组件2.3 编写路由2.4 挂载路由2.5 使用路由2.6 route 和 router 的区别3. 路由模式3.1 hash模式3.2 history模式4. 命名路由4.1 介绍4.2 使用5. 编程式导航5.1 字符串模式5.2 对象模式5.3 命名路由模式5.4 替换当前位置5.4.1 router-link5.4.2 编程式导航5.4.3 横跨历史路由1. 安装执行如下命令来安装npm install vue-router@4

动画、插件和ElementPlus的使用动画使用 animate.cssGSAP 动画使用插件编写插件挂载插件注册插件使用插件ElementPlus动画使用 animate.css在项目中安装 animate.cssnpm i animate.css在使用 animate 动画的组件中引入import 'animate.css'使用<transition class="animate__animated animate__bounceInDown"><p

递归组件在组件中调用组件自身，需要有一个出口，一般用于菜单显示等。递归组件案例这是一个导航栏的案例，通过在父组件中定义数据，这个数据可以有很多层，然后将数据传给子组件Tree.vue中利用递归组件进行展示。App.vue代码：<template> <Tree :data="menus"></Tree></template><script setup lang="ts">import Tree from './compone

关于vue中表单和组件的笔记今天内容表单文本多行文本单选框多选框下拉选择框修饰符.lazy.number.trim案例：用户注册搭建界面定义数据绑定数据绑定事件组件组件基础基本使用美化组件修改根组件组件生命周期组件通信父传子默认值子传父子组件定义事件父组件接收数据祖孙传参兄弟传参借助父组件使用 Event Bus（了解）今天内容表单组件表单文本<input type="text" v-model="message">多行文本<textarea v-model="mes

随机背景案例本文主要是展示使用自定义vue指令来实现的案例。它主要用于在网络环境差的情况下，图片可能会加载不出来，这时我们可以让原本应该显示图片的地方使用一个随机背景色来填充，在图片装载完成后使用图片来覆盖原来填充了随机色的地方。代码如下：<template> <div v-img="'src/assets/logo.png'"></div></template><script setup lang="ts">import {

toRef的用法可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。const state = reactive({ foo: 1, bar: 2})const fooRef = toRef(state, 'foo')fooRef.value++console.log(state.foo) // 2state.foo++console.log(fooRef.value) // 3当你

vue中的事件<template> <!-- 执行多个事件：需要把要处理的事件以英文逗号进行分隔 --> <button @click="one('hi', $event), two('hello')">执行多个事件</button> <!-- 对于 Vue 而言，JavaScript 中的所有事件它都支持 --> <div class="container" @mouseenter="enter" @mo

vue的自定义指令vue的自定义指令vue的自定义指令简写vue的自定义指令<template> <!-- 自定义指令可以包含以下钩子函数： - created：元素初始化的时候 - beforeMount：指令绑定到元素后调用 只调用一次 - mounted：元素插入父级dom调用 - beforeUpdate：元素被更新之前调用 - updated：这个周期方法被移除 - beforeUnmount：在元素被移除前调用

v-show\v-if\v-else-if\v-else<template> <div>在 Vue 中提供两种指令：一种是内置指令，另一种是自定义指令。所有的指令都是以 v- 开头的。</div> <div>v-show 指令是用于显示或隐藏元素，它是以 style 样式的方式来实现的。</div> <div>v-if 指令也是用于根据条件表达式来带有条件的渲染。如果条件为假，那么页面中将不会渲染当前的元素。&

vue入门vue是什么vue的安装vue的使用第一个vue小案例关于v-text和v-html指令的介绍vue是什么Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。vue的安装参考vue的安装一共有四种方式在页面上以 CD