vue
Akimoto Hiroshi
这个作者很懒,什么都没留下…
展开
-
vue2基本响应式实现----如何让数组也变成响应式的
之前的代码有个问题,就是操作数组数据的时候,不会触发setlet data = { name: 'dean', age: 30, level1: { level2: { level3_1: { level4: { value: 'anna' } }, level3_2: { level4: { value: 'jing' } }原创 2022-03-15 23:51:45 · 3567 阅读 · 0 评论 -
vue2基本响应式实现
let data = { name: 'dean', age: 30, level1: { level2: { level3_1: { level4: { value: 'anna' } }, level3_2: { level4: { value: 'jing' } } } }}observe(data)funct原创 2022-03-15 22:55:32 · 1169 阅读 · 0 评论 -
resetFields()不生效的原因
编辑用户新增用户点击编辑的时候,数据回显,没问题:点击取消,会调用方法按理说应该会把表单清空。但是我们再点击新增的时候,数据并没有被清空:原因:点击编辑的时候,一旦执行showModal.value = true, 就显示dialog,然后立马就执行Object.assign(userForm, row)此时数据修改了,但是dialog里面的el-form还没有mounted,也就是说,数据是在form表单mounted之前修改的,那么这个修改后的数据就成为了form表单的初始值。原创 2022-02-24 14:35:41 · 6545 阅读 · 2 评论 -
Echarts 图例legend基本配置
<!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>柱状图的基本实现和常.原创 2021-10-02 11:13:54 · 1878 阅读 · 0 评论 -
Echarts tooltip配置
echarts配置,和title同一级别,配置tooltip:1.触发时机triggertooltip: { trigger: 'item'}如果把item改为axis:tooltip: { trigger: 'axis'}2.触发条件triggerOn比如设置鼠标点击时候才触发tooltip: { trigger: 'item', triggerOn: 'click'}3.提示内容格式化formattertooltip: { trigger: 'ite原创 2021-10-02 10:32:06 · 4165 阅读 · 0 评论 -
Echarts图表指南之柱状图常用效果
先画一个基本的图表:<!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>原创 2021-10-02 09:48:57 · 1132 阅读 · 0 评论 -
vue侦听器watch
侦听对象的时候,需要用黄色框内的写法原创 2021-09-03 22:38:12 · 81 阅读 · 0 评论 -
vue复习之nextTick
先看一个小demo:<template> <div class="next-tick"> <ul ref="ulRef"> <li v-for="(item, index) in items" :key="index">{{item}}</li> </ul> <el-button @click="add" type="primary" size="mini">Add</el-b原创 2021-09-01 21:54:18 · 188 阅读 · 0 评论 -
vue代码如何进行断点调试
对于这样的代码,我们打两个断点,想要调试的话,需要在项目根目录,新建一个文件:vue.config.js,然后根据Vue Cli脚手架版本,分别写入不同的webpack配置:配置完毕以后:选择chrome:这时会显示一段用于启动项目的配置:复制上面的代码,到之前的配置文件中:把type对应的chrome修改为pwa-chrome:下面开始调试:点击以后,打开一个全新的窗口:这样就可以开始调试了,同时,新开的浏览器窗口里面,可以在这里看到源代码:...原创 2021-09-01 20:55:52 · 9297 阅读 · 0 评论 -
Vue + Element通讯录实战2:基础知识part2 插槽slot
匿名插槽, 具名插槽,作用域插槽匿名插槽:子组件中:具名插槽:具名插槽和顺序无关,只会去找匹配的名字作用域插槽: 子组件可以传值给父组件具名作用域插槽,里面包了一层,父组件需要用slotProps接收子组件传来的值...原创 2021-08-31 09:47:41 · 164 阅读 · 0 评论 -
Vue + Element通讯录实战1:基础知识
MVVM和MVC 介绍:vue中修动态改样式的方法:修饰符<form>中@click加上.prevent可以防止表单按钮提交点击时候刷新页面生命周期最早可以拿到data和method的生命周期就是created:beforeMound获取不到:mounted生命周期:beforeUpdate:...原创 2021-08-31 09:09:50 · 480 阅读 · 0 评论 -
vuex之mapState辅助函数使用
dispatch actions换种写法也可以原创 2021-08-30 19:58:08 · 108 阅读 · 0 评论 -
vuex之mutations补充-使用常量替代mutation事件类型
我们把上面代码中的mutations单独提取出来,放到mutations.js中:这个常量是什么意思呢?我们再新建一个mutations-type.js再把actions也抽取出来:这里再用常量ADD替换一下:原创 2021-08-30 19:42:47 · 362 阅读 · 0 评论 -
请叙述vuex的工作流程
用户通过dispatch改变数据去触发action, action通过commit去触发mutations, mutations去改变state伴随着state的改变,会重新渲染页面原创 2021-08-30 19:25:28 · 82 阅读 · 0 评论 -
vuex的actions使用
原创 2021-08-30 19:18:06 · 225 阅读 · 0 评论 -
vuex中mutations的使用
可以在组件中直接触发mutations,不一定非要先触发actions,然后再去触发mutations原创 2021-08-30 19:07:11 · 177 阅读 · 0 评论 -
vuex中getters使用
要获取state里面goods中id为1的一项,可以这样写,但是如果有N多个组件,每个组件都这样写,很繁琐,所以可以用getters:使用的时候只要通过this.$store.getters.getById()传入参数就可以查询了原创 2021-08-30 18:51:57 · 152 阅读 · 0 评论 -
根据穿梭框动态显示表格栏
<template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column v-if="transferValue.includes('date')" prop="date" label="日期" > </el-table-column>原创 2021-08-20 14:03:19 · 213 阅读 · 1 评论 -
vite初体验
npm init vite@latest my-vite-app --template vuevite构建项目的速度还是非常快的原创 2021-08-02 11:45:08 · 228 阅读 · 0 评论 -
Vue2.X响应式原理
在Vue2.X 响应式中使用到了 defineProperty进行数据劫持,所以我们对它必须有一定的了解,那么我们先来了解它的使用方法, 这里我们来使用 defineProperty来模拟 Vue 中的 data<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge".原创 2021-08-01 17:15:18 · 128 阅读 · 0 评论 -
$attrs 和 $listeners 的用法
App.vue<template> <div id="app"> <CompA :foo="'foo'" :bar="'bar'" :bar1="'bar1'" /> </div></template><script>import CompA from "./components/CompA";export default { name: "App", components: { CompA原创 2021-05-21 16:48:45 · 126 阅读 · 0 评论 -
Vue长列表优化专题(一)
虚拟滚动先看一下mockjs语法:参考:mockjs介绍mock.js官方示例先上服务端源码:// 使用mock构建本地服务器输出数据结果const Mock = require('mockjs')const Express = require('express')const app = Express()// 根据传入的参数num 生成num条模拟的数据列表function generatorList(num) { return Mock.mock({ [`lis原创 2021-05-18 22:38:01 · 359 阅读 · 0 评论 -
antd Form组件表单在vue3中的使用
antd Form表单组件有个最需要注意的问题,官方文档里写的很清楚:这是什么意思,我们下面说个例子就明白了:<template> <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" > <a-form-item ref="username" name="user原创 2021-04-11 22:07:34 · 6265 阅读 · 0 评论 -
滑动验证组件修改样式爬坑之如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法
滑动验证码集成好了,但是有个问题,就是样式不太对,width太长了:修改这里:于是我们想到给#nc_1_wrapper设置width: 285px,这样就可以让宽度保持一致了因为是修改第三方组件,所以样式肯定要穿透,我们想到了less的穿透语法/deep/直接报错了:原因:scss不支持这种/deep/穿透语法,less支持,所以我们在scss里可以用::v-deep穿透:搞定!...原创 2021-04-11 13:48:10 · 902 阅读 · 0 评论 -
2021新教程-阿里云滑动验证集成到vue项目的方法
首先去阿里云的云盾点击配置管理,新增配置,按照自己的需要配置一下:点击下一步,就可以看到这样的页面这里面有几个关键点:1. 相关资源js文件<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>可以在main.js里面引用,不过不建议这样做,一般是把里面的代码复制出来,单独建一个captcha.js文件,然后把代原创 2021-04-11 13:38:00 · 1580 阅读 · 0 评论 -
基础复习之ant design vue安装到vue项目里
在一个@vue/cli创建好的项目里,我们运行:npm i --save ant-design-vue@next接着引入:就可以啦!原创 2021-04-10 22:38:29 · 558 阅读 · 0 评论 -
vue项目弃用node-sass投奔dart-sass
官方去年就告知要弃用node-sass,使用dart-sass,那么在项目里我们该怎么操作?先删除node-sass:第一次删除可能会报错,不用管,再执行一遍命令:npm uninstall node-sass -D第二遍删除成功了然后运行:npm i sass -D这样就成功换上dart-sass了!...原创 2021-04-10 22:31:36 · 2905 阅读 · 0 评论 -
vue cli 4.5配置css预处理器时候遇到的低级错误 报错SassError: File to import not found or unreadable
今天配置vue.config.js时候遇到一个很无语的地方,配置预处理器 Loader 传递选项时候,一直在报错,我的配置如下:百度找解决办法都是什么鬼,后来stackoverflow找到一个解决办法:再对照一下官方文档:由于我是在给项目配置scss,所以最后应该加上一个;符号,就像这样:浪费了十多分钟,无语!...原创 2021-04-10 15:23:40 · 11025 阅读 · 1 评论 -
vue如何触发组件的更新图解
原创 2021-04-07 22:09:47 · 230 阅读 · 0 评论 -
理解虚拟DOM以及key的作用
频繁操作DOM性能损耗大,所以就有了虚拟DOM的说法原创 2021-04-06 23:13:28 · 175 阅读 · 0 评论 -
html页面引入vue组件之http-vue-loader.js
首先这种方法不推荐,日常工作中也不会在html里面引入一个vue文件,只是为了有时候方便测试才会这么做1.创建my-component.vue<template> <div class="hello">Hello {{who}}</div></template> <script>module.exports = { data: function() { return { who.原创 2021-04-05 21:15:24 · 7091 阅读 · 3 评论 -
vue复习之插槽写法vue2.5和vue2.6差异
vue2.5的插槽语法是这样的:1.在模板里<slot name="xxx"><.slot>来标记一个name为xxx的插槽用来占位2.在使用组件的时候,组件标签中间写入内容,用slot="xxx"来找到模板里插槽的对应位置再看一个例子:效果:vue2.6的插槽语法是这样的:子组件写法一样,都是定义一个slot标签指定插槽的位置在使用子组件的时候,插入插槽的内容要用template标签包裹起来,并且在tamplate中通过v-slot:xxx指定插槽对应的名字原创 2021-04-05 13:26:13 · 1506 阅读 · 0 评论 -
vue深入学习之-Vuex如何保证每个组件都拿到同一个store实例
我们在开发vue项目的时候,不同的组件,父子组件之间,兄弟组件之间,根组件App.vue等等,都可以通过Vue.$store拿到vuex里面的共享数据源。那么这么多不同层级的组件到底是如何保证都拿到同一个store实例呢?我们从vuex的源码上面浅显的聊聊中间的实现过程首先在项目入口文件main.js中,我们从./store引入index.js,并且把引入的store作为初始化Vue的一个option对Vue进行初始化我们再来看看./store文件夹中index.js里面写了什么:这里面引入了V原创 2021-03-25 14:58:24 · 1314 阅读 · 2 评论 -
vue基础之nexTtick获取更新后的DOM
今天面试时候一个vue的面试题,第一眼看着非常简单,然后信心满满的回答,然后答错了,在此非常感谢面试官对我的引导和帮助!!也通过这次面试意识到自己很多不足需要学习的地方,加油鸭!面试题是类似这样的代码:<div id="app"> <div v-if="showItem" id="content">这是div中的内容</div> <button @click="showContent">显示</button></div>&原创 2021-03-23 23:58:17 · 595 阅读 · 0 评论 -
vue3爬坑之项目启动报错Cannot find module ‘vue-loader-v16/package.json
今天新建一个vue3项目准备写个电商项目的放大镜组件,npm run serve后直接报了个错想着可能是缺少依赖,就执行npm i继续跑,还是报错去stackoverflow上找了下,发现有人也有这样的问题,有人提示用这样的方法可以解决问题:stackoverflow原文链接于是执行npm i --save-dev vue-loader-v16,搞定!...原创 2021-03-13 14:01:20 · 6749 阅读 · 4 评论 -
vue爬坑之 父组件向子组件异步传参 子组件中拿不到值的解决方法
做项目时候遇到一件怪事:父组件向子组件<dialog-info/>传个参数arrdata,是个数组因为是Array类型的参数,子组件中进行了接收,并且default通过函数返回一个空数组然后子组件中例行公事验证下是否正常拿到值惊呆了,竟然是空的数组!可是vue调试工具中props正常拿到了啊有点意思,后来根据项目结构想了一下,发现问题出在哪里了项目是这样的:这就是父组件所在的页面,点击蓝色按钮新增,会触发回调方法,显示<DialogInfo>子组件而父组原创 2021-03-11 00:28:21 · 5517 阅读 · 1 评论 -
vue组件传参 props default 数组/对象的默认值应当由一个工厂函数返回
在组件中接收props参数的时候,如果传过来的参数是Object或者Array类型,则defalut这里应该用一个函数返回,否则会报错:Invalid default value for prop “slides”: Props with type Object/Array must use a factory function to return the default value.再举两个例子:...原创 2021-03-10 22:30:49 · 5830 阅读 · 0 评论 -
vue父子组件传值之单向数据流非常详细的讲解(二)
接上一章,之前的方法感觉还是有点繁琐,有没有简单一点的方法?有!我们在外面父组件那里给dialog-info标签添加一个.sync装饰器:后面的@statusChangeHide直接删掉:下面的change方法也删掉:并且从return的对象里面剔除,然后回到子组件DialogInfo中,把之前的handleClose回调函数里面的$emit语句删掉:换成:this.$emit("update:visible", false)注意这里"update:visible"之间不能有空格!原创 2021-03-07 23:22:40 · 147 阅读 · 0 评论 -
vue父子组件传值之单向数据流非常详细的讲解(一)
有个DialogInfo的组件: 父组件向子组件传值visible点击新增的时候会把dialogTableVisible的值改变:这样的话运行时候会报错:解决办法:<template> <el-dialog title="收货地址" :visible.sync="visible_flag" v-on:close="handleClose" :modal-append-to-body="false"> <el-table> <el原创 2021-03-07 22:38:26 · 854 阅读 · 0 评论 -
vue3.0 computed写法
用computed计算属性之前别忘了引入使用完毕别忘了导出computed里面还有两个方法:get和setget方法:结果:get方法是读取数据时候调用的,监测到数据变化以后就自动执行:结果:点击以后:说明get在程序运行时自动调用,后面监测到数据变化就再次调用我们改一下代码:点击前结果:点击后结果:所以我们能得出: 点击button以后,执行到plusOne.value = 2时候,相当于调用了:// 其中参数val就是修改的值2set: val =>原创 2021-02-13 21:26:51 · 5589 阅读 · 1 评论