vue
关注
分享
扫一扫
*初级小白*~
这个作者很懒，什么都没留下…
展开
-
vu3 antdeisgn的下拉框既可以输入也可以下拉选择
【代码】vu3 antdeisgn的下拉框既可以输入也可以下拉选择。原创 2023-03-14 18:50:35 · 155 阅读 · 0 评论 -
vue3 返回顶部组件
【代码】vue3 返回顶部组件。原创 2022-08-26 13:30:26 · 281 阅读 · 0 评论 -
vue3 解决双击与单击事件的冲突
vue3 解决双击与单击事件的冲突。原创 2022-08-06 13:58:50 · 2997 阅读 · 0 评论 -
vue3：自定义可编辑表格
<template> <div> <table class="table"> <thead> <tr> <th>序号</th> <th>商品名称</th> <th>商品分类</th> <th>销售数量</th> &.原创 2022-05-17 18:00:45 · 2998 阅读 · 0 评论 -
vue3+ts小案例：代办事项
<template> <div class="home"> <h1>待办事项</h1> <div> <input type="text" v-model="inpVal"> <button @click="add">增加</button> </div> <div v-for="(item,index) in todoList">原创 2022-05-11 14:22:55 · 534 阅读 · 0 评论 -
vue3：上划第一行导航栏不固定，第二行导航栏变成第一行固定住
<template> <div class="home"> <div class="header"> <div class="logo">logo</div> <div class="nav-list"> <ul> <li>首页</li> <li>首页</li> &l原创 2022-05-10 14:50:29 · 500 阅读 · 0 评论 -
vue3+ts，自定义下拉框与时间
效果图下拉框未点击展开下拉框点击展开时间下拉框代码：<template> <div class="user-menu d-flex align-items-center flex-wrap" :class="open ? 'show' : 'hide'" @click="dianji" > <div class="option ps-1"> <div c原创 2022-05-10 14:19:29 · 595 阅读 · 0 评论 -
vue3点击哪个路由，就获取哪个路由的名称
router上要定义meta{ path: '/home', name: 'Home', component: () => import('@/views/filmprocess/home/Index.vue'), meta: { title: '用户管理', requiresAuth: true } }, { path: '/login',原创 2022-04-26 14:05:27 · 3055 阅读 · 0 评论 -
Vue3的传值：父向子，子向父
父组件向子组件传递值父组件通过:冒号向子组件传递menuOpen<template> <Process :menuOpen="menuOpen" /></template><script setup lang="ts">const menuOpen = ref<boolean>(false);</script>子组件通过defineProps接收父组件传来的值<template><span v-i原创 2022-04-26 10:30:43 · 2718 阅读 · 0 评论 -
vue2自定义下拉导航栏与从vue3自定义下拉导航栏
` `原创 2022-04-25 15:22:02 · 2269 阅读 · 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>Document&.原创 2022-04-09 10:55:38 · 223 阅读 · 0 评论 -
将一个对象转为数组
后端传来的数据现在需要的数据完整代码<template> <div> </div></template><script> export default { data() { return { webSetting:{ startTime: "2022-03-20T12:46:43.253+0000", endTime: "2022-03-20T转载 2022-04-07 18:28:41 · 244 阅读 · 0 评论 -
vue鼠标上下滚动放大与缩小
<template> <div id="body" class="body"> <div class="content" id="content">缩放的元素</div> </div></template><script> export default { data() { return { scale: 1 } }, methods:转载 2022-04-02 14:53:41 · 1313 阅读 · 0 评论 -
vue文字上下滚动
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>vue文字滚动</title> <style>div, ul, li, span, img { margin: 0; paddi原创 2022-04-02 10:54:16 · 1808 阅读 · 0 评论 -
自定义图片上下轮播滚动
<!DOCTYPE html><html lang="en"><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>Document&l原创 2022-04-01 18:34:47 · 284 阅读 · 0 评论 -
vue中的$ref用法
ref有三种用法：1、ref加在普通的元素上，用this.ref.name获取到的是dom元素2、ref加在子组件上，用this.ref.name获取到的是组件实例，可以使用组件的所有方法注意：ref本身是作为渲染结果被创建的，在初始渲染的时候不能访问它，它们还不存在，refs也不是响应式的，因此不应该试图用它在模板中做数据绑定ref需要在DOM元素渲染完成之后才有，在使用的时候确保DOM已经渲染完成，比如在生命周期的mounted()钩子函数调用，或者在this.refs也不是响应式的，因此不应该试转载 2022-03-21 16:09:36 · 5547 阅读 · 0 评论 -
vue：vuex的简单使用
<template> <div> <p>{{this.$store.state.counter}}</p> <p>{{this.$store.state.info.name}}</p> <p>{{this.$store.getters.over}}</p> <p>{{this.$store.getters.overAge(28)}}</p> &l转载 2022-03-07 18:26:24 · 116 阅读 · 0 评论 -
vue：兄弟传参，使用eventBus
使用场景如：兄弟组件间的通信，父组件fatherCom中同时使用到childOne和childTwo两个兄弟组件，点击子组件childTwo需要另一子组件ChildOne响应一：定义eventBus，建立eventBus.js文件,挂载到Vue实例上，暴露出去： import Vue from 'vue'; let bus = new Vue(); Vue.prototype.$eventBus = bus; export default bus;二：使用到eventBus的兄弟组件都引转载 2022-03-07 13:49:29 · 303 阅读 · 0 评论 -
vue：使用vuescroll
1、npm下载npm install vuescroll -S官网：https://vuescrolljs.yvescoding.org/zh/<template> <div> <vuescroll :ops="ops"> <div class="container"> <ul v-for="(item, index) in 100" :key="index"> <li&g原创 2022-03-04 10:51:59 · 4247 阅读 · 0 评论 -
vue：使用echarts
需求：使用echarts绘制一个柱状图<template> <div class="mt-6"> <div id="myChart" style="width: 100%; height: calc(100vh - 300px);"></div> </div></template><script>import * as echarts from "echarts";const labelOpti原创 2022-03-03 14:37:24 · 381 阅读 · 0 评论 -
Vue实现单选、全选、反选
<template> <div> <div><input type="checkbox" v-model="checkAll" />全选</div> <div><input type="checkbox" @change="inverse" />反选</div> <div class="fruit" v-for="(item, index) in fruits" :key="in转载 2022-03-01 14:54:00 · 4059 阅读 · 0 评论 -
降低sass的版本
1、卸载当前项目中的sass-loadernpm uninstall sass-loader2、安装低版本的sass-loadernpm install sass-loader@7.0.03、安装node-sassnpm install node-sass原创 2021-11-22 15:10:22 · 4322 阅读 · 0 评论 -
路由的拦截（导航守卫）
//路由拦截（导航守卫：前置导航守卫和后置导航守卫）//前置守卫：//三个参数：to 代表即将进入的路由 from 代表即将离开的路由 next() 每一个导航守卫至少搭配一个next()router.beforeEach((to,from,next)=>{ //想要进购物车页面，必须有token console.log('to',to); console.log('from',from) //获取token let token=localStorage.getIte原创 2021-11-18 00:10:20 · 2433 阅读 · 0 评论 -
vue：引入字体
1、在 src 目录下的 assets 的新建 fonts文件夹，然后在加要显示的字体2、再建一个文件夹，引入字体3、在mian.js全局引入原创 2021-11-17 20:50:22 · 398 阅读 · 0 评论 -
Vue的axios封装
1、在 src 下新建 request目录 ，在request目录下新建 request.jsrequest.js 中：import axios from "axios"//创建一个单例（实例）const instance = axios.create({ baseURL:"url", timeout:5000})//请求拦截//instance.interceptors.request.use(callback,callback)instance.intercepto原创 2021-11-14 12:52:26 · 677 阅读 · 0 评论 -
vue引入图片的三种方式与背景图引入
<template> <div> <img src="./assets/logo.png" alt=""> <img :src="imgSrc1" alt=""> <img :src="imgSrc2" alt=""> <section :style="{backgroundImage: 'url('+imgSrc2+')'}"></section> <section :s原创 2021-11-14 01:31:53 · 5216 阅读 · 0 评论 -
Element UI安装、axios配置、axios拦截器
下载npm安装npm i element-ui -S引入完整的Element UI引入Element UI在main.js中引入import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({ el: '#app', re原创 2021-11-05 14:09:49 · 701 阅读 · 0 评论 -
vue脚手架安装
安装脚手架软件:1、电脑需要安装node软件: http:/ / nodejs.cn/download/使用 node -v 查看版本, 目前最高 16.112、确保 npm 是中国镜像:查看当前镜像: npm config get registry设置淘宝镜像: npm config set registry https:/ / registry.npm.taobao.org/3、利用npm 安装 vue 的脚手架软件安装命令: npm i -g @vue/cli --原创 2021-11-04 11:29:46 · 9540 阅读 · 0 评论 -
动态组件（:is）、keep-alvie、插槽、自定义组件
动态组件什么是动态组件动态组件指的是动态切换组件的显示与隐藏如何实现动态组件渲染vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染使用 keep-alive 保持状态默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组件的状态keep-alive 对应的生命周期函数数当组件被缓存时，会自动触发组件的 deactivated 生命周期函数当组件被激活时，会自动触发组件的 activated生命周期函数kee原创 2021-11-04 09:59:26 · 3600 阅读 · 0 评论 -
组件的生命周期、组件的数据共享、ref的引用、watch监听器
生命周期生命周期：是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行，它强调的是一个时间点组件的生命周期分类组件的第一个阶段创建阶段：new Vue() -> beforeCreate() -> created() -> beforeMount() -> mounted组件的第二个阶段运行阶段：beforeUpdate() -> updated原创 2021-11-04 02:38:50 · 323 阅读 · 0 评论 -
vue的指令与过滤器
指令指令是 vue 微开发者提供的 模板语法，用于辅助开发者渲染页面的基本结构vue 中的指令按照不同的用途可以分为如下 6 大类：1、 内容渲染指令内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：v-textv-text 指令会覆盖元素内默认的值。{{}}插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中v-htmlv-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则原创 2021-11-04 02:12:31 · 382 阅读 · 0 评论 -
同步任务和异步任务，宏任务和微任务
同步任务叫做非耗时任务，指的是在主线程上排队执行的那些任务只有前一个任务执行完毕了，才能执行后一个任务异步任务叫做耗时任务，异步任务由 javascript 委托给宿主环境进行执行的当异步任务完成后，会通知 javascript 主线程执行异步任务的回调函数分析输出的顺序console.log('A');thenFs.readFile('./1.txt','utf8').then(res=>{console.log('B')})setTimeout(()=>{原创 2021-11-04 01:08:13 · 550 阅读 · 0 评论 -
Promise
回调地狱多层回调函数的相互嵌套，形成了回调地狱缺点代码耦合性太强，牵一发而动全身，难以维护大量冗余的代码相互嵌套，代码的可读性变差如何解决回调地狱为了拒绝回调地狱的问题，ES6中新增了Promisepromise的基本概念①promise是一个构造函数我们可以创建Promise的实例 let p=new Promise()new 出来的Promise实例对象，代表一个异步操作②Promise.prototype上包含了一个.then()方法每一次 new Promise()原创 2021-11-04 00:32:27 · 216 阅读 · 0 评论 -
ES6模块化
ES6模块化node.js中如何实现模块化？node.js遵循了Common.js的模块化规范导入其他模块使用require()方法模块对外共享成员使用module.exports对象什么是ES6模块化规范ES6模块化规范是浏览器与服务器端通用的模块化开发规范ES6 模块化范中定义：每个 js 文件都是一个独立的模块导入其他模块成员使用 import 关键字向外共享模块成员使用 export 关键字配置环境：确保安装了更高版本的node.js在package.json的根节点原创 2021-11-03 21:32:36 · 396 阅读 · 0 评论 -
vue的路由
前端路由的工作方式用户点击了页面上的路由链接导致了URL地址栏的Hash值发生了变化前端路由监听到Hash地址的变化前端路由把当前Hash地址对应的组件渲染到浏览器中vue-router的基本用法1、在项目中，安装vue-routernpm i vue-router@版本号2、在src源代码目录下，新建router/index.js路由模块，并初始化3、在mian.js入口文件导入挂载路由...原创 2021-10-30 00:26:39 · 148 阅读 · 0 评论 -
vue的组件
使用vue组件的三个步骤通过components注册的是私有子组件例如：在组件A的components节点下，注册了组件C，则在另一个组件B中不能使用组件C解决方法：使用全局组件在vue项目的main.js入口文件中，通过Vue.component()方法，可以注册全局组件父组件传递子组件数据：使用自定义属性子组件向父组件传递数据：使用自定义事件兄弟组件之间的数据共享使用EventBus使用步骤：ref：获取dom元素...原创 2021-10-28 18:13:55 · 75 阅读 · 0 评论