Vue
Vue的相关学习
是大林的林吖
不完美才是真正的完美
展开
-
vue组件通信之‘provide+inject’的用法
【代码】vue组件通信之‘provide+inject’的用法。原创 2022-09-20 10:14:29 · 350 阅读 · 0 评论 -
文本超出两行用省略号表示,点击展开方法查看所有以及点击收起方法隐藏
【代码】文本超出两行用省略号表示,点击展开方法查看所有以及点击收起方法隐藏。原创 2022-08-31 16:10:36 · 1122 阅读 · 0 评论 -
vue项目中常用解决跨域的方法
学习跨域的相关笔记原创 2022-07-01 17:17:31 · 15957 阅读 · 2 评论 -
Vue自定义指令directive的用法
官网提供了几个钩子函数(可选):1)bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。2)inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。3)update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。4)componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。5)unbin原创 2022-04-23 15:06:38 · 1405 阅读 · 0 评论 -
前端Vue使用封装Mock.js和api请求模拟数据
mock的使用改进,可参考上一篇文章mock的使用1) mock.js// mock.js 文件import Mock from 'mockjs' // 引入mockjsconst Random = Mock.Random // Mock.Random 是一个工具类,用于生成各种随机数据const dataList = [] // 用于接受生成数据的数组for (let i = 0; i < 26; i++) { // 可自定义生成的个数 const template = {原创 2022-04-15 16:40:03 · 740 阅读 · 0 评论 -
vuex 直接修改state、commit 和dispatch 修改state 的用法及区别
vuex 直接修改state、commit 和dispatch 修改state 的用法及区别1)可以直接使用 this.$store.state.变量 = xxx;2)通过commit修改stateimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { name:'' }, mutations: {//类似method SET_N原创 2022-04-14 11:29:57 · 3023 阅读 · 0 评论 -
npm运行/打包时内存溢出问题的解决
问题描述1:1、node内存溢出的解决方案(1)全局安装 increase-memory-limit插件,执行 npm install -g increase-memory-limit(2)进入到package.json的同级目录下,执行increase-memory-limit若还是会报错,问题描述2:2、执行修复脚本即可(1)把wfpath改成自己的项目地址即可(2)可以把该脚本放在build目录下,执行node increase-memory-limit.js即可,执行完就可以删原创 2022-03-09 20:17:48 · 4408 阅读 · 5 评论 -
关于组件中直接修改props传递的值报错的解决方法
问题描述:自定义组件中,在组件里直接修改props传递的值会报错解决方案:在掉用该组件时使用sync修饰符(具有双向绑定原理)组件中通过$emit进行修改props中的值总结:等同于原创 2022-01-05 15:57:11 · 584 阅读 · 0 评论 -
vue页面自定义平滑滚动到页面任意位置
问题描述:点击表格行数据,页面滚动到指定位置解决方法:1、scroll-to.jsMath.easeInOutQuad = function(t, b, c, d) { t /= d / 2 if (t < 1) { return c / 2 * t * t + b } t-- return -c / 2 * (t * (t - 2) - 1) + b}// requestAnimationFrame for Smart Animating http://goo原创 2021-12-12 10:03:57 · 1111 阅读 · 0 评论 -
使用$set修改对象某个属性的值以及$delete删除对象某个属性
使用$set修改对象某个属性的值以及$delete删除对象某个属性fun() { user = { name: '大林', age: 22, address: '广东深圳', desc: '123' } this.$delete(user , 'desc') this.$set(user , 'address', '广东广州') console.log(user)}结果是user为{name: ‘大林’, age: 22, address: ‘广东广州’原创 2021-12-02 11:33:39 · 939 阅读 · 0 评论 -
watch监听事件的多种用法
一、普通监听watch: { name(newVal, oldVal) { console.log(newVal) // 打印name变化的值 }}二、immediate属性(默认false)watch: { name: { handler(newVal, oldVal){ console.log(newVal) // 打印name变化的值 } immediate: true }}三、deep属性(深度监听)watch: { name: { handle原创 2021-12-01 09:43:45 · 7182 阅读 · 0 评论 -
vue中使用v-bind=“$attrs“进行多层组件的传值&v-on=“$listener“监听事件(父级事件传递到内部组件)
使用v-bind="$attrs"进行多层组件的传值(即继承)1、最外层组件(祖父)grandfather.vue<template> <div class="grandfather"> <father :title="title"/> </div> </template> <script> export default { data() { return{ title: 'hello worl原创 2021-11-26 15:52:07 · 3613 阅读 · 1 评论 -
vue项目网页全屏功能screenfull & screenfull全屏某一块元素
一、vue项目网页全屏功能screenfull1、安装screenfull依赖npm install screenfull --save-dev2、使用(1)、写组件Screenfull/index.vue<template> <div> <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" /> </div></t原创 2021-11-21 15:59:40 · 1978 阅读 · 5 评论 -
element UI Table 根据判断列值相等即合并单元格 & 根据某列值两个相等以上即设置单元格的 style
一、合并行单元格:span-method=“objectSpanMethod”<el-table v-loading="tableLoading" :data="tabledata" :element-loading-text="$t('common.loading')" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"原创 2021-11-13 11:11:22 · 1909 阅读 · 0 评论 -
vue父向子组件传值、兄弟组件间传值、子向父组件传值
父组件向子组件传值1.父组件.vue// 父组件中<template> <div> <Child ref="child" :title="value"/> </div></template> <script>export default { data() { return { value: 'hello world!' } }}<原创 2021-10-29 14:59:14 · 175 阅读 · 1 评论 -
使用插槽后,动态控制button不生效的解决有效方法
使用插槽后,动态控制button不生效控制button动态切换是否禁用状态,由于button位于插槽内,导致数据改变,按钮状态并未改变。使用插槽自定义表头,会遇到插槽里面数据不更新问题,插槽使用 slot=“header” 应改成 #header,即可解决插槽内数据不更新<el-table v-loading="tableLoading" :data="tableData" :element-loading-text="$t('common.loading')原创 2021-10-29 11:34:20 · 1291 阅读 · 0 评论 -
vue+element ui el-upload覆盖默认的上传行为,可以自定义上传的实现
1.vue页面视图http-request覆盖默认的上传行为,可以自定义上传的实现,: 即绑定<el-upload action="string" :http-request="handleImport" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList" accept=".xls,.xlsx" :show-file-list="true">原创 2021-09-27 14:41:23 · 1119 阅读 · 0 评论 -
vue通过 a 标签的 download 属性结合 blob 构造函数下载excel文件
1.vue页面视图<el-button type="danger" icon="el-icon-download" size="medium" @click="templateDownload" >模板示例</el-button>2.methods方法里templateDownload() { aoiTemplateExport().then((res) => { const url = window.URL原创 2021-09-27 14:21:34 · 362 阅读 · 0 评论 -
vue+mockjs模拟数据分页功能、新增功能、编辑功能、删除功能
Mockjs模拟数据,实现增删改查1、安装mockjsnpm install mockjs --save-dev2、mock.js文件// mock.js 文件import Mock from 'mockjs' // 引入mockjsconst Random = Mock.Random // Mock.Random 是一个工具类,用于生成各种随机数据const dataList = [] // 用于接受生成数据的数组for (let i = 0; i < 26; i++) { // 可原创 2021-09-22 16:52:35 · 937 阅读 · 0 评论 -
vue中父组件调用子组件的方法
通过ref直接调用子组件的方法,this.$refs.child.fun()父组件.js// 父组件中<template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div></template> <script>import Chil原创 2021-09-10 14:54:28 · 106 阅读 · 0 评论 -
如何快速搭建vue-cli4.*项目配置(手选模式配置)
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-07-09 14:24:01 · 1944 阅读 · 0 评论 -
vuex 中辅助函数mapState的基本用法详解
vuex 中辅助函数mapState的基本用法详解1、在src/store/index.js中, 引入vuex 以后,我们需要在state中定义变量,类似于vue中的data,通过state来存放状态import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { mainSize: { /* width: "84%", */ left: 290+'px'/原创 2021-07-15 09:56:04 · 2008 阅读 · 0 评论 -
vue 里面通过v-for循环出来多个相同样式的div,根据index作为对象的属性的参数拼接取值
一、[ ] 和 . 的区别1、 . 是要对象存在该属性才可赋值取出2、 [ ] 即使对象不存在该属性也可以赋值和取出二、v-for循环通过 v-for=“index of number” ,number为自定义的一个数字三、.后面不能让字符串与index进行拼接,而[ ] 里面是可以让字符串与index进行拼接。即 对象[“字符串”+index]四、代码实现<div class="battery" style="margin-top: 10px; margin-left: 30px"&原创 2021-07-23 09:32:43 · 3170 阅读 · 0 评论