vue2
一个前端女子
这个作者很懒,什么都没留下…
展开
-
ant-vue select实现下拉框+搜索
ant-vue select实现下拉框+搜索在项目遇到下拉框的数据太多,导致页面卡顿,这就有了新的需求:①解决卡顿②方便用户操作有搜索功能直接上代码:HTML:Markup <a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback &g原创 2022-03-02 09:22:00 · 5471 阅读 · 2 评论 -
Cookie
下图是Chrome浏览器中的Cookie截图,属性分别有Name、Value、Domain、Path、Expires/Max-age、Size、HttpOnly、Secure、SameSite和Priority。 Name和ValueName和Value是一个键值对。Name是Cookie的名称,Cookie一旦创建,名称便不可更改,一般名称不区分大小写;Value是该名称对应的Cookie的值,如果值为Unicode字符,需要为字符编码。如果值为二进制数据,则需要使用BASE64编码。..原创 2022-03-31 12:12:21 · 179 阅读 · 0 评论 -
VUE页面生命周期钩子函数
预备知识:1.vue的生命周期 生命周期函数,又叫钩子函数 生命周期钩子===生命周期函数===生命周期事件2.什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直...原创 2022-03-31 10:26:13 · 3812 阅读 · 0 评论 -
公用一个下拉框,根据路由参数不同,放入不同的下拉框选项
原创 2022-03-28 17:00:29 · 182 阅读 · 0 评论 -
项目中遇到的不同路由路由对应同一个页面,却不重新加载的问题
页面对应的路由配置: // 基础管理 path: "/main/base", name: "base", component: Template, children: [ { // 基础管理-"企业安全台账管理"原创 2022-03-28 16:55:04 · 1204 阅读 · 0 评论 -
动态路由的使用
项目中四个左边菜单使用同一个页面,但是请求的接口不同,通过判断当前动态路由的不同来,传参路由的配置页面对应的路由:页面中使用:this.$route.params.type; getData() { let typeList = { aptiude: 1, institution: 2, standing_book: 3, rectify:..原创 2022-03-28 16:47:41 · 541 阅读 · 0 评论 -
vue组件之间通信的8种方式
vue组件之间通信的8种方式对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结。(1)$parent($root)和$children($refs和ref)(2)props和$emit(常用)(3)中央事件总线(非父子组件间通信)(4)v-model(5)provide和inject(6)$attrs和$listeners(7)vuex(8)boradcast和dispatch(vue1.0中提供了这种方式,但vue2.0中没有)...原创 2022-03-18 11:01:33 · 234 阅读 · 0 评论 -
VUE中父子组件之间的通信——子传父
VUE中父子组件之间的通信——子传父子传父 :子组件里 通过$emit('自定义事件名',变量1,变量2)触发 事件操作步骤:step1:在子组件的方法中心定义一个方法,在方法中用this.$emit自定义一个事件、传第自己方法中心的变量Markupthis.$emit('myadd',this.title)step2:在父亲组件的方法中定义一个事件方法Markupmethods: {// 父组件接收子组件发射出来的数据add:function(title){原创 2022-03-12 18:46:17 · 904 阅读 · 0 评论 -
【无标题】
VUE中父子组件数据的访问——父访子$refs步骤:①在父组件的视图层中,给对应子组件添加ref属性,并且起一个唯一的名字eg:Markup <div id="app"> <child1 ref="c1"></child1> <child2 ref="c2"></child2> </div>②在父组件中直接访问Markup let vm = new Vu.原创 2022-03-12 18:43:50 · 114 阅读 · 0 评论 -
VUE中父子组件数据的访问——子访父
方法一:在子组件直接使用this.$parentthis.$parent链式调用取父组件之上的组件(1)获取父组件的方法/计算属性在子组件的函数中: this.$parent.方法名();this.$parent.计算属性; 计算属性只会执行一次在子组件的标签上: $parent.方法名(2)获取父组件data的属性在子组件的函数中: this.$parent.属性名;在子组件的标签上: $parent.属性名 拿到 父实例(父组件)数...原创 2022-03-12 12:41:38 · 2725 阅读 · 0 评论 -
VSCODE写VUE项目并一键生成.VUE模版
VSCODE写VUE项目并一键生成.VUE模版1. 文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定输入以下代码:Markup"Print to console": {"prefix": "vue","body": ["<template>","\t<div class='$2'>$5</div>","</template>","","<script>",""原创 2022-03-12 12:38:07 · 269 阅读 · 0 评论 -
VUE中路由的传参和取参
具体代码:Markup<!DOCTYPE html><html><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...原创 2022-03-12 12:35:58 · 788 阅读 · 0 评论 -
VUE中路由的重定向——redirect
VUE中路由的重定向——redirect重定向:path中的url地址不能和redirect中的{path:'/',redirect:'/index'},代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"&g...原创 2022-03-12 12:28:53 · 21548 阅读 · 1 评论 -
VUE中的路由守卫——beforeEach()
1.router.beforeEach()全局前置守卫2.路由守卫 主要 用于"检验是否登录"了,没登录 就跳转到 登录页面 不让他在其他页面停留,但是现在这种处理主要的都用请求的全局拦截来做了。3.to是一个对象 from:从哪个路由离开, next:函数,决定是否展示你要看到的路由页面。4.代码:<!DOCTYPE html><html lang="en"><head><m...原创 2022-03-12 12:26:04 · 6470 阅读 · 0 评论 -
在vscode中修改console.log的快捷键
文件→首选项→用户代码片段原创 2022-03-12 12:19:42 · 252 阅读 · 0 评论 -
VUEX中的模块化modules开发
VUEX中的模块化modules开发1.store 分割成模块(module)。每个模块拥有自己的 state、getter、mutation、action、甚至是嵌套子模块。2.命名空间: 如果希望模块不是全局的(在写的项目的时候一般都会加上),你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块,此时的,state、getter、action 及 mutation 都是局部的。 当模块被注册后,它的所有 getter、action 及 mutatio.原创 2022-02-27 10:10:11 · 380 阅读 · 0 评论 -
vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别
vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别存取方式不同: this.$store.commit():同步操作 存储:this.$store.commit(‘mutations方法名’,值)取值:this.$store.state.方法名 this.$store.dispatch():异步操作 存储:this.$store.dispatch(‘action方法名’,值)取值...原创 2022-02-27 10:10:40 · 182 阅读 · 0 评论 -
组件使用dispatch() “调用” 仓库中actions里面的方法——从服务器端获取数据
actions 是 通过 后台更改操作,异步 修改 数据仓库state中的数据这里不做思路分析,再次打开的时候:最好的复习,就是上手重新写一遍代码:Markup<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-02-27 10:11:27 · 1134 阅读 · 0 评论 -
组件使用 commit() “调用” 仓库中mutations里面的方法---删除指定商品
组件使用 commit() “调用” 仓库中mutations里面的方法---删除指定商品思路: 在删除按钮身上,注册del事件,把每一项对应的id传到vuex的中 Markup<button @click="del(item.id)">删除</button>2.怎么传到vuex中的?del事件中用 this.$store.commit(),把数据传递过去,其中storeDel是vuex.mutations 中的事件eg:Markupmetho.原创 2022-02-27 10:11:39 · 796 阅读 · 0 评论 -
组件访问VUEX.store中的state中的数据
组件访问VUEX.store中的state中的数据在组件的computed中,使用this.$store.state.xxx 去访问数据1.数据仓库store 定义好公共数据Markupvar store = new Vuex.Store({ namespaced:true, state: { totalPrice:100, goods:[ {id:1,title:'iphone',price:399,num:3}..原创 2022-02-27 10:14:29 · 3859 阅读 · 0 评论 -
vuex相关概念
vuex相关概念1.Vuex 是一个专为 Vue.js 应用程序开发的(数据的)状态管理模式 2.Vuex采用“集中式存储管理”方式去管理数据,把 这些数据 应用到 所有组件上 !!! 3.vuex就是仓库---数据仓库--这个数据仓库里的所有的数据,是为组件来使用的!为组件来服务的! 4.vuex 只 做 “数据” 的维护!! 对vuex仓库中数据的处理,都放在“模型”里面,vuex的store 里面5.vuex核心概念(都是对象) :state: 存储数据 ...原创 2022-02-27 10:14:05 · 63 阅读 · 0 评论 -
数据仓库vuex的安装和使用
数据仓库vuex的安装和使用一、vuex下载和安装和使用step1:下载方式一:使用script标签引入直接引用https://unpkg.com/[email protected]/dist/vuex.js方式二:下载本地,引用<script src="/js/vue.js"></script><script src="/js/vuex.js"></script>step2:使用npm命令 安装vuexnpm install vu.原创 2022-02-27 10:14:41 · 848 阅读 · 0 评论 -
在vscode中修改console.log的快捷键
原创 2022-02-27 10:14:49 · 360 阅读 · 0 评论 -
新闻资讯APP——Searchpage.vue组件
新闻资讯APP——Searchpage.vue组件重点摘录: 使用layui实现弹窗,点击搜索是,如果文本框的内容为空,弹出请输入检索内容 效果: 步骤: step1:安装Markupcnpm install layui-layer --save cnpm install jquery --savestep2:在index.html中引入Markupstep3:入口文件Markup...原创 2022-02-28 08:50:18 · 540 阅读 · 0 评论 -
新闻资讯APP——Resultpage.vue组件
新闻资讯APP——Resultpage.vue组件重点摘录:1.路由的传参Markupthis.$router.push({path:'/newspage', query:{id:params}})2.在组件调用数组仓库中的mutations中的方法时,一定要在mouted 中调用一下Markup mounted() { this.$nextTick(function(){ this.getListBySearch({原创 2022-02-28 08:50:53 · 256 阅读 · 0 评论 -
新闻资讯APP——Mainpage.vue组件
新闻资讯APP——Mainpage.vue组件重点摘录: vuex中的辅助函数mapState,mapGetters,mapMutations,mapActions 这些辅助函数主要是为了避免在组件调用代码中写太多的部分,用最简单的方式来调用Vuex。 获取vuex数据的语法格式: mapActions(“数据仓库模块名称”,[ "数据名称"]) 或 mapActions({“数据仓库模块名称”,[ "数据名称"]}) 比对一下在...原创 2022-02-28 08:51:07 · 267 阅读 · 0 评论 -
初始化新闻资讯app项目
初始化新闻资讯app项目安装项目依赖npminstall启动vue项目npmrundevApp.vue根组件(这个组件里写的样式,可以直接作用到所有的组件身上!)1.创建vue项目,根据你的项目需求,创建若干个vue页面组件Index.vueMainpage.vueNewspage.vueResultpage.vueSearchpage.vue2.配置这些组件所对应的路由,到router文件夹中的index.js中配置各个组件对应的路由规则Markup...原创 2022-02-28 08:51:17 · 147 阅读 · 0 评论 -
柱状图的图例为什么出不来
原创 2022-02-28 08:51:32 · 737 阅读 · 0 评论 -
vue+el-button实现复制链接
vue+el-button实现复制链接这里结合组件 vue-clipboard2step1:下载vue-clipboard依赖包npminstall--savevue-clipboard2step2:在项目中的main.js引入importVueClipboardfrom'vue-clipboard2'//引入Vue.use(VueClipboard)//vue全局使用插件step3:HTML: 要在标签在上绑定三个属性...原创 2022-03-01 16:35:02 · 566 阅读 · 0 评论 -
echart自动轮播tooltip+鼠标悬停
echart自动轮播tooltip+鼠标悬停ECharts/Vue--(插件)tooltip显示自动播放与列表无缝滚动 - 简书原创 2022-03-01 16:35:57 · 683 阅读 · 0 评论 -
多维数组指定某一内容返回父级
多维数组指定某一内容返回父级多维数组:包含全国省市区的名称编码,以及经纬度Markup [ { "value": "33", "label": "浙江省", "longitude": 119.95720242066, "latitude": 29.159494120761, "children": [ {原创 2022-03-02 09:22:10 · 255 阅读 · 0 评论 -
ant-vue封装拉选择+模糊选择组件
ant-vue封装拉选择+模糊选择组件封装的代码:Markup<!--* @fileName 企业信息列表弹框* Created by dongwei on 2019/4/18--><template> <a-select style="width: 240px;" placeholder="请选择企业名称" v-model="searchData.entname" :showAr原创 2022-03-02 09:22:27 · 239 阅读 · 0 评论 -
ant-vue table 实现输入和下拉选择
ant-vue table 实现输入和下拉选择HTML:Markup<a-row style="position: relative;"> <i class="red">*</i> <a-table ref="table" :columns="columns0" :pagination="false" :data-source="loa原创 2022-03-02 09:22:19 · 1261 阅读 · 0 评论 -
ant-vue table换页以后选中的数据无法记住前一页已勾选的数据
ant-vue table换页以后选中的数据无法记住前一页已勾选的数据解决方法:使用组件自带的onSelect事件和onSelectAll事件来记录HTML:Markup<s-table ref="table" :columns="columns" :data="loadData" bordered :alert="true"原创 2022-03-02 09:22:35 · 821 阅读 · 0 评论 -
uploading上传图片+预览+删除
uploading上传图片+预览+删除项目的图片,视频和文件上传到阿里云的oss中重点:①上传成功时,要改变文件的状态,否则一直为uploading②编辑的时候拿到已经上传的图片绑定的:file-list="fileList" ,状态status设置为donethis.fileList.push( { uid: '-1', name: 'image.png', status:...原创 2022-03-02 09:22:58 · 2356 阅读 · 0 评论 -
动态生成单选+多选+获得选择的答案
动态生成单选+多选+获得选择的答案代码:Markup<template> <div class='wrap'> <!-- 头部 --> <div class="header"> <mt-header title="驾驶员考试"> <router-link to="/examlogin" slot="left">原创 2022-02-26 15:31:58 · 1660 阅读 · 0 评论 -
vue+el-cascader设置默认选项
vue+el-cascader设置默认选项原创 2022-02-26 15:30:04 · 5300 阅读 · 1 评论 -
vue+el-select获得选中的lable值
vue+el-select获得选中的lable值在项目中遇到,el-input要获得选中的值的两个属性,v-model可以绑定一个,重点的是第二种:获得选中的lable在el-select 加上ref属性代码:Markup<el-select ref="operateName" v-model="postData.operateCode" clearable placeholder="请选择" size="mini">原创 2022-02-26 15:27:59 · 3700 阅读 · 2 评论 -
vue+el-upload上传文件+下载文件
代码:Markup <el-form-item style="padding-top:20px;"> <el-upload :auto-upload="true" :on-change="uploadChange" :http-request="handleFile"原创 2022-02-26 15:27:09 · 1639 阅读 · 0 评论 -
vue2响应式的缺陷
vue2响应式的缺陷1.Vue2中的响应式数据类型为对象时,只能做数据的增,删,查和改,但是对于增加和删除,页面不会做出响应式,对应的也有解决方法,如下:2.直接通过修改数组下标,界面不会更新;对应的解决方法,如下...原创 2022-02-26 15:24:37 · 1191 阅读 · 0 评论