vue
鸭鸭:)
前端小萌新一枚~
展开
-
select关闭时触发请求;select加上全选功能,并实现搜索后点击全选,选中的是搜索后的列表
如果ap内容变了并且关闭了选择器,发请求;如果ap内容没变并且关闭了选择器,不发请求:用一个变量记录,当select关闭时,变量不等于select绑定的值时,发请求,并更新变量。原创 2024-02-21 17:19:28 · 430 阅读 · 0 评论 -
简单的理解Vue diff算法和virtual Dom的原理
1.为什么引入虚拟DOM(可以节省开销)在vue1.0实现侦测变化的时候,一个状态绑定了好多个依赖,每个依赖代表着一个具体的DOM节点。当状态发生变化时,它在一定程度上会知道哪些节点使用了这些状态。但是这样做会有内存开销和依赖追踪的开销。对于一个大型项目来说,这个开销非常大。因此vue2.0选了一个中等粒度的方案,那就是引入虚拟DOM,并把依赖变成组件级别。当状态发生变化时,只通知到组件,然后组件内部使用虚拟DOM进行对比,根据结果只更新需要更新的真实DOM节点,从而避免不必要的DOM操作,节省开销。2原创 2022-01-27 23:11:55 · 1165 阅读 · 0 评论 -
vue.js生命周期
在初始化阶段,也就是通过new Vue创建实例到created生命周期函数执行之后的这段时间里,首先初始化属性与事件,然后通过callback函数触发生命周期钩子beforecreate,随后初始化provide/inject和状态。状态指的是props,methods,data,computed,watch。接着触发生命周期钩子created。在模板编译阶段,也就是created之后,beforeMount之前的这段时间里,判断用户是否在参数中提供了el选项,如果提供了,就自动开启模板编译与挂载阶段。.原创 2022-01-24 21:18:56 · 474 阅读 · 0 评论 -
vue-router导航守卫
“导航”表示路由正在发生改变。限制路由跳转用导航守卫。守卫就像皇宫内的护卫一样。分为三种:全局守卫,路由独享守卫,组件内守卫。一、全局守卫(全局前置守卫,全局解析守卫,全局后置守卫)/在router/index.js下1.全局前置守卫(在路由跳转之前进行判断)const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // to:目标路由 //from:来源路由 //next():放行函原创 2022-01-15 14:59:14 · 238 阅读 · 0 评论 -
将Vue提交到码云
本地初始化一个仓库,设置远程仓库地址后再做push1.先创建仓库$ git init $ git remote add origin https://gitee.com/用户个性地址/HelloGitee.git$ git pull origin master2.修改/添加文件,否则与原文件相比就没有变动$ git add .$ git commit -m "第一次提交"$ git push origin master3.提交完成...原创 2022-01-15 14:14:54 · 485 阅读 · 0 评论 -
vue微信支付业务生成二维码qrcode
二维码生成使用Npm模块:qrcode先用npm安装:npm i qrcode1.先引入生成二维码import QRCode from "qrcode"; //引入生成二维码2.可以获取到二维码的urlQRCode.toDataURL(this.payInfo.codeUrl);//需要传递参数原创 2022-01-13 22:43:34 · 823 阅读 · 0 评论 -
vuex中actions多次调用actions
场景:在store里面多次调用删除某一个产品的方法,封装为一个删除全部选中的商品方法 (actions调用actions)context:小仓库 commit(提交mutations,修改state),getters(计算属性),dispatch(派发action),state(当前仓库数据)Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 con原创 2022-01-11 19:52:49 · 2340 阅读 · 0 评论 -
uuid临时游客身份——>在请求拦截器中带+本地存储(告诉服务器你是谁)
uuid:是通用唯一标识码(Universally UniqueIdentifier)的缩写,是一个128比特的数值。客户端在查找一个服务时,只需要在它的服务查找请求中指出与某类服务(或某个特定服务)有关的UUID,如果服务的提供者能将可用的服务与这个UUID相匹配,就返回一个响应。1.封装产生uuid的模块import { v4 as uuidv4 } from 'uuid';//创建一个uuid//要生成一个随机字符串,且每次执行都不能发生变化,游客身份持久存储export const g.原创 2022-01-09 14:58:29 · 1167 阅读 · 3 评论 -
@change检测输入域变化和传递复杂参数
change()方法:当元素的值发生改变时,会发生 change 事件。给input标签绑定change事件:当Input内容发生变化时,对内容进行监听修改:输入框Input的值获取:event.target.value原创 2022-01-08 22:25:58 · 1100 阅读 · 0 评论 -
组件之间通信方式
1.父子组件通信如图父子组件为A和B,B和C,B和D父传子是props,子传父是自定义事件;通过子链或者父链即$parent 和 $children;ref也可以访问; $attrs和 $listeners(1)父组件向子组件传值(props)(2)子组件向父组件传值(自定义事件)2.跨级组件通信如图跨级组件为A和C,A和D$attrs / $listeners;bus;vuex; $attrs和 $listeners3.兄弟组件通信$bus,.原创 2022-01-05 16:56:28 · 569 阅读 · 1 评论 -
使用axios发送请求(不带参数和带参数)和使用mockjs
一、使用axios获取后端数据并使用1.对axios进行封装 network/request.jsimport axios from 'axios'import nprogress from 'nprogress'//引入进度条import "nprogress/nprogress.css"const requests = axios.create({ baseURL:'/api', timeout:5000});//请求拦截requests.interceptors.原创 2022-01-02 22:49:09 · 4879 阅读 · 4 评论 -
Vue路由传递参数相关
1.路由传参的三种方式字符串给router/index.js的配置路由文件下相应的路由的path后加上:变量名在Search路由组件中:this.$router.push('/Search/' + this.keyworld +"?k="+this.keyworld.toUpperCase());模板字符串对象(最常用)要先给search路由组件加上name再使用name+params+query传参在Search路由组件中获取参数2.路由传递参数(对象写原创 2021-12-09 23:00:04 · 717 阅读 · 1 评论 -
Vue组件的隐藏与显示
不管路由组件还是非路由组件身上都有route和route和route和router属性$route:一般用来获取路由信息,如path,query,params等等$router:一般用来编程式导航进行路由跳转。1.可以使用$route属性获取相应路径+v-show来实现2.另一种方法是在路由下配置meta字段(也就是在路由里配置路由元信息)...原创 2021-12-09 20:21:19 · 1914 阅读 · 0 评论 -
跟着尤大神学vue
1.实现小型数据监听器<!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-11-18 21:52:55 · 1003 阅读 · 0 评论 -
vue-cli报错You may need an additional loader to handle the result of these loaders.
vue使用组件化开发时报错如下: ERROR Failed to compile with 1 error 16:01:14 error in ./src/views/home/childComps/RecommendView.vue?vue&type=style&index=0&lang=true原创 2021-08-04 16:40:07 · 11848 阅读 · 0 评论 -
Element UI使用方法
1.安装脚手架(脚手架又依赖于node与webpack)安装webpack:npm install webpack@3.6.0 -g安装脚手架:npm install -g @vue/cli@3.2.12.创建脚手架脚手架2如下:脚手架3:vue create 项目名称3.切换到安装好的项目目录下,安装elementuinpm i element -ui -s4.在main.js中引入elementuiimport ElementUI from 'element-ui';imp原创 2021-08-03 17:09:55 · 884 阅读 · 0 评论