VUE
vue
十友九
这个作者很懒,什么都没留下…
展开
-
vue使用Promise.allSettled频繁请求接口
【代码】vue使用Promise.allSettled频繁请求接口。原创 2024-01-24 10:53:53 · 500 阅读 · 0 评论 -
淘好物社区推广文档
本项目适用于社区之间推广使用,分为三部分,管理员端,商户端,用户端,主要功能包括:管理员端包含商户端大部分功能,还有一些系统基础数据的配置功能等。商户端可以进行店铺的维护,店铺的营业与休整,维护店铺信息,添加店铺产品,管理产品,审核受理用户下单,查看用户评价等功能。用户端可以进行物业缴费,水费缴费(功能不完善),电费缴费(功能不完善),可以下单购买商品,购买成功可以获得相应积分,可以签到领取积分,可以分享微信好友获取积分等。原创 2023-01-30 15:18:24 · 293 阅读 · 1 评论 -
uniapp(vue)中生成截图
【代码】vue中生成截图。原创 2023-01-12 13:57:35 · 1937 阅读 · 0 评论 -
VUE2技术文档
Vue技术栈(全家桶)第 1 章:Vue核心1. 1 .Vue简介1. 1. 1 .官网1. 英文官网2. 中文官网1. 1. 2 .介绍与描述动态构建用户界面的 渐进式 JavaScript框架作者:尤雨溪1. 1. 3 .Vue的特点遵循 MVVM 模式编码简洁,体积小,运行效率高,适合移动/PC端开发它本身只关注UI,也可以引入其它第三方库开发项目1. 1. 4 .与其它JS框架的关联借鉴Angular的 模板 和 数据绑定 技术借鉴Reac原创 2022-04-01 13:43:14 · 2277 阅读 · 1 评论 -
VUE----组件通信(组件自定义事件)
组件的自定义事件1.一种组件间通信的方式,适用于: 子组件 ===> 父组件2.使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)3.绑定自定义事件: 1.第一种方式,在父组件中: <Demo @atguigu="test"> 或 <Demo v-on:atguigu="test"> 2.第二种方式:在父组件中 <Demo ref="demo"> .......原创 2022-03-30 13:28:38 · 411 阅读 · 0 评论 -
VUE----插件
插件功能: 用于增强Vue本质: 包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。定义插件: 对象.install = function(Vue,options) { // 1.添加全局过滤器 Vue.filter(...) // 2.添加全局指令 Vue.directive(...) }定义插件plugins.jsexport default {原创 2022-03-30 09:47:56 · 118 阅读 · 0 评论 -
VUE----Mixin(混入)
mixin(混入)功能: 可以把多个组件共用的配置提取成一个混入对象使用方式: 第一步定义混合,例如: { data(){...}, methods:{...}, .... } 第二步使用混入,例如: 1.全局混入:Vue.mixin(xxx) 2.局部混入:mixins:['xxx']定义混入mixin.jsexport const mixin原创 2022-03-30 09:38:54 · 404 阅读 · 0 评论 -
VUE----配置代理服务器
vue.config.jsmodule.exports = { pages: { index: { // page 的入口 entry: 'src/main.js', }, }, lintOnSave:false, //关闭语法检查 // 开启代理服务器(方式一) // devServer: { // proxy: 'http://localhost:5000' // } // 开原创 2022-03-29 17:06:15 · 824 阅读 · 0 评论 -
VUE----组件通信(props)
配置项props功能: 让组件接收外部传过来的数据 1.传递数据: <demo name="xxxx"/> 2.接收数据: 第一种方式(只接收): props:['name'] 第二种方法(限制类型) props:{ name:Number } 第三种方法(限制类型、限制必要性、指定默认值)原创 2022-03-28 11:38:46 · 473 阅读 · 0 评论 -
VUE----组件通信(全局事件总线)
全局事件总线 (GlobalEventBus)1.一种组件间通信的方式,适用于任意组件间通信2.安装全局事件总线new Vue({ beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm }})3.使用事件总线: 1.接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身 methods(){ demo(原创 2022-03-29 16:55:00 · 224 阅读 · 0 评论 -
VUE----组件通信(消息订阅与发表)
消息订阅与发表1.一种组件间通信的方式,适用于任意组件间通信2.引入: import pubsub from 'pubsub-js'3.接收数据: A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身methods(){ demo(data){ ..... } ..... mounted(){ this.pid = pubsub.subscribe('xxxx',this.demo) //订阅消息 }}4.原创 2022-03-29 16:51:34 · 173 阅读 · 0 评论 -
VUE----Vuex 3.x 基础知识
Vuex1.概念 在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式管理(读/写),也是一种组件 间通信的方式,且适用于任意组件间通信2.何时使用? 多个组件需要共享数据时3.搭建vuex环境 1.创建文件:src/store/index.js // 引入vue import Vue from 'vue' // 引入Vuex import Vuex from原创 2022-03-29 16:40:15 · 340 阅读 · 0 评论 -
VUE----监视属性watch
监视属性watch:1.当被监视的属性变化时,回调函数自动调用,进行相关操作2.监视的属性必须存在,才能进行监视!!!3.监视的两种写法: 1.new Vue 时传入watch配置 2.通过vm.$watch监视<div id="root"> <h2>今天天气很{{info}}</h2> <!--@xxx = "yyy"可以写一些简单的语句--> <!-- <button @click="cha原创 2022-03-28 13:54:48 · 248 阅读 · 0 评论 -
VUE导航
声明式导航<template> <nav> <ul> <router-link to="/film" tag="li" active-class="kerwinactive"> <i class="iconfont icon-training"></i> <span>电影</span> </router-link> <r原创 2021-07-11 15:04:38 · 102 阅读 · 0 评论 -
Vue--过滤器
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>fetch</title><meta name="description" content=""><meta name="keywords" content="原创 2021-07-04 21:28:41 · 136 阅读 · 0 评论 -
v-model通信
1<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" cont原创 2021-07-04 20:56:09 · 70 阅读 · 0 评论 -
Vue-组件
1.组件父传子<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name原创 2021-07-04 17:07:11 · 42 阅读 · 0 评论 -
VUE--城市列表
vant库地址:https://vant-contrib.gitee.io/vant/v3/#/zh-CN<template> <div> <van-index-bar :index-list="computedCityList" @select="handleSelect"> <div v-for="data in cityList" :key="data.type"> <van-index-an.原创 2021-05-31 21:10:01 · 763 阅读 · 0 评论 -
VUE--Axios初步封装--请求拦截器与相应拦截器
vant库地址:https://vant-contrib.gitee.io/vant/v3/#/zh-CNimport axios from 'axios'import {Toast} from 'vant'const http = axios.create({ baseURL: 'https://m.maizuo.com', timeout: 10000, // 请求超时时间 // method: 'post', headers: { 'X-Clie.原创 2021-05-31 21:10:12 · 143 阅读 · 0 评论 -
VUE--Swiper轮播
swiper库地址:https://swiper.com.cn/父组件<template> <div> <!-- <div style="height:300px;background:yellow;">轮播</div> --> <film-swiper> <div class="swiper-slide" v-for="(data,index) in imgL.原创 2021-05-31 21:10:21 · 91 阅读 · 0 评论 -
VUE--跨域配置
1.创建文件vue.config.js(如果没有自己创建)内容如下:module.exports={ // 配置跨域一定要重新启动 devServer: { proxy: { '/ajax': { target: 'https://m.maoyan.com', ws: true, changeOrigin: true }, // '/foo':原创 2021-05-29 15:41:50 · 158 阅读 · 0 评论 -
VUE--router路由--路由守卫--路由跳转--路由懒加载--路由重定向
import Vue from 'vue'import VueRouter from 'vue-router'// import Film from '../views/Film.vue'Vue.use(VueRouter)const routes = [ // 重定向 { path: '*', redirect: '/film' }, { path: '/film', component: () =&g原创 2021-05-29 15:31:46 · 165 阅读 · 0 评论 -
VUE----filters过滤器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.原创 2021-05-29 15:09:20 · 83 阅读 · 0 评论 -
swiper轮播
1.HTML-swiper轮播<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .原创 2021-05-29 14:46:06 · 135 阅读 · 0 评论 -
VUE----自定义指令
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-05-29 14:45:09 · 63 阅读 · 0 评论 -
VUE----transition-过度
1.transition-元素过度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-05-29 14:40:10 · 154 阅读 · 0 评论 -
VUE----slot---插槽
老式写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g原创 2021-05-29 14:34:42 · 115 阅读 · 0 评论 -
VUE----ref
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-05-29 14:32:30 · 154 阅读 · 0 评论 -
VUE计算属性
computed:注重结果1.逻辑计算,防止模板过重2.监听:依赖修改 。get方法必须return<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d...原创 2021-05-16 09:21:05 · 57 阅读 · 0 评论 -
VUE全选/购物车
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.原创 2021-05-15 17:26:16 · 142 阅读 · 0 评论 -
VUE多选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.原创 2021-05-15 17:24:30 · 123 阅读 · 0 评论 -
VUE单选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.原创 2021-05-15 15:33:54 · 112 阅读 · 0 评论 -
记住用户密码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.原创 2021-05-15 15:19:09 · 120 阅读 · 0 评论 -
时钟动画
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>在线小时钟~~</title> <script src="./v...原创 2021-05-15 13:28:38 · 110 阅读 · 0 评论