![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
海阔天空BM
生活没有奇迹,只有轨迹
展开
-
vue3中的computed()
介绍一个getter函数,返回一个只读的ref对象,通过ref的.value使用返回值。也可以接受一个get和set函数的对象来创建一个可写的ref对象。一个只读的计算属性一个可手写的计算属性。原创 2022-11-07 18:21:36 · 763 阅读 · 0 评论 -
vue3中的ref()
只有当嵌套在一个深层响应式对象内时,才会发生 ref 解包。如果将一个对象赋值给ref,则这个对象会通过reactive()转为具有深层次的响应式对象。如果将一个新的 ref 赋值给另一个对象具有 ref属性的 ,那么它会替换掉旧的 ref。接受一个值,返回一个响应式的,可以修改的ref对象,这个对象只有一个。属性进行修改,修改后的值也是响应式的,并且修改后会触发相关的副作用。一个ref对象嵌套在一个响应式对象中,属性访问时会自动解包。对于属性值是ref对象的对象,解构后也具有响应式。原创 2022-11-07 09:51:11 · 9297 阅读 · 0 评论 -
Vue3中的setup函数
都是有状态的对象,它们总是会随着组件自身的更新而更新。函数用于显式地限制该组件暴露出的属性,当父组件通过模板引用访问该组件的实例时,将仅能访问。也可以与渲染函数一起使用,渲染函数可以直接使用同一作用域下声明的响应式状态也就是声明的变量。返回一个渲染函数会将阻止返回其他东西,如果想暴露给父组件,可以直接使用。对象,则解构出的变量会变成非响应性,不能实时更新,可以使用对象。这个对象是非响应式的,可以直接解构。的形式使用其中的属性。上下文对象,这个对象可以在。函数的第一个参数是组件的。是响应式的,会实时更新。原创 2022-10-22 15:21:53 · 983 阅读 · 0 评论 -
Vue3中的选项式API与组合式API区别
优点:逻辑性偏强,功能逻辑(比如数据、watch、方法等)可以写在一块容易查找,后期维护方便。缺点:相比选项式上手要难些,因为选项式已经规定了位置,按对应位置填写代码即可。中等等,这样一个功能实现会分散开。优点:容易学习和编写,写在特定的位置。缺点:代码组织差,一个功能会分散开。写在特定的位置就是比如声明的数据写在。Vue2、Vue3支持选项式API。Vue3支持组合式API。原创 2022-10-12 21:00:19 · 3005 阅读 · 0 评论 -
Vue3全局API上篇
创建一个应用实例。第一个参数是根组件。第二个参数可选,它是要传递给根组件的 props声明变量app为一个应用实例。原创 2022-09-27 14:34:41 · 1204 阅读 · 0 评论 -
vue3自定义指令(directive)
在ES6之前JavaScript是没有真正性的模块化,导入与导出的,之前有common.Js,AMD,在ES6中引入了模块化概念,一个文件即是一个模块。原创 2022-09-26 10:46:12 · 1280 阅读 · 0 评论 -
vue3中的provide/inject(提供/注入)
在说先说一下。通常我们从父组件向子组件传递数据时,会用到props。对于只需要传递一层或二层时还行,假如需要传递多层嵌套的组件,此时一级一级传递数据就会很繁琐,不利于编码,因此产生了,从而解决此类问题。有了不用一级一级传递,只要是父组件提供了某个数据,隔代组件就能直接获取都数据,从而很方便。原创 2022-09-24 20:39:12 · 4599 阅读 · 0 评论 -
Vue基本原理
而每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把各个属性记录为依赖, 之后依赖项的setter被调用时,会通知wachter重新计算,从而致使它关联的组件得以更新。直接代理整个对象而非对象属性,这样只需做一层代理就可以监听同级结构下的所有属性变化,包括新增属性和删除属性。在vue2x中当一个vue实例被创建的时,vue会遍历data中的属性,用。可以为一个目标对象创建一个代理,在这个代理里面编写需要拦截的内容。通过对对象的代理,从而实现数据上的挟持。vue3则使用的是ES6中的。原创 2022-09-23 16:00:12 · 608 阅读 · 0 评论 -
node报错throw er; // Unhandled ‘error‘ event原因与解决办法
端口号被占用, node报错throw er; // Unhandled 'error' event原因与解决办法原创 2022-09-07 10:47:58 · 9292 阅读 · 0 评论 -
node报错throw er; // Unhandled ‘error‘ event原因与解决办法
端口号被占用, node报错throw er; // Unhandled 'error' event原因与解决办法原创 2022-06-26 18:43:19 · 4257 阅读 · 0 评论 -
ant design vue3表格选择和操作坑
需要给a-table标签,加入key属性,表示唯一代码 <a-table :columns="columns" :rowKey="rowKeyMethod" :data-source="dataSource" :pagination="false" bordered :row-selection="{selectedRowKeys:selectedRowKeys1, onChange: onRowChange}" ></a-table>原创 2022-03-28 10:25:23 · 4572 阅读 · 1 评论 -
pdf插件路径vue
pdf插件,放在public文件中latestProposal(customerId) { this.$API.demo({ id }).then((res) => { window.open(`pdf/web/viewer.html?file=${res.url}`); }); },原创 2022-01-13 15:08:36 · 291 阅读 · 0 评论 -
yarn简介
Yarn 的简介:Yarn是facebook发布的一款取代npm的包管理工具。Yarn的特点:1)速度超快----Yarn缓存了每个下载过的包,所以再次使用时无需重复下载。同时利用并行下载以最大化资源利用率,因此安装快。2)超级安全----在执行代码之前,Yarn会通过算法检验每个安装包的完整性。3)超级可靠-----使用详细、简洁的锁文件格式和明确的安装算法,Yarn能够保证在不同系统上无差异工作Yarn的安装:下载nodejs,使用npm安装 npm install -g yarn,查看原创 2021-09-07 17:22:35 · 992 阅读 · 0 评论 -
vue-cli3在IE浏览器白屏问题
1.安装npm install --save babel-polyfill npm install es6-promise --save2.在大目录的main.js里边引用import 'babel-polyfill' import Es6Promise from 'es6-promise' require('es6-promise').polyfill() Es6Promise.polyfill()3.vue.config.js中插入代码,没有就新建(和package.json原创 2021-04-12 15:09:37 · 544 阅读 · 1 评论 -
vue语法css实现刻度尺小程序
vue语法css实现刻度尺小程序原创 2021-03-28 17:40:38 · 907 阅读 · 0 评论 -
VS Code 装好ESLint 插件报黄线的问题
VS Code 装好ESLint 插件报黄线的问题ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.eslint自己遇到的问题查了翻译,说是什么被禁用了,我的插件明明是开的呀。去网上查了一圈也没有看到和我一样的问题。我英语不是很好,所以碰了不少壁。其实这个问题解决起来很简单。确实是插件没有打开原创 2021-02-08 13:43:02 · 437 阅读 · 0 评论 -
element上传图片
<el-uploadclass="avatar-uploader"action="/yxcAdmin/file/image/upload":show-file-list="false":before-upload="beforeAvatarUpload":http-request="httpRequests"><img v-if="imageUrl.imgUrl" :src="imageUrl.imgUrl" class="avatar"><i v-else cl原创 2021-01-21 15:45:39 · 256 阅读 · 0 评论 -
vue中v-for遍历时的key值重复了而导致的报错信息
由于vue中v-for遍历时的key值重复了而导致的原创 2020-05-01 09:47:42 · 3808 阅读 · 2 评论 -
vue-router
1. vue-router路由跳转vue-router跳转页面有两种方法,一种是使用内置的 组件,另一种是使用router实例方法,也叫做编程式导航。1. 内置的组件<template> <div> <router-link>跳转到login页面</router-link> </div></templ...原创 2020-04-11 22:29:37 · 193 阅读 · 0 评论 -
将返回的流数据转换为url
// 将返回的流数据转换为urlgetObjectURL(file) { let url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.webkitURL !=...原创 2020-03-24 11:20:34 · 3005 阅读 · 3 评论 -
ss
“plugins”: [“transform-runtime”],“plugins”: [“transform-vue-jsx”],原创 2020-03-21 18:41:07 · 191 阅读 · 0 评论 -
vue中npm install 错误(安装chromedriver失败)
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver原创 2020-03-20 22:27:20 · 536 阅读 · 0 评论 -
vue报错Cannot assign to read only property 'exports' of object
网上搜的结果因为是webpack版本太高而导致而导致的,结果自己重装webpack一直不成功,报错,也不知道是网还是啥问题,网上还有一种方法是更改.babelrc文件之前是改为:结果是成功了,...原创 2020-03-20 19:23:33 · 1442 阅读 · 1 评论 -
eslint报错信息
报错信息: Missing space before function parentheses意思是在方法名和刮号之间需要有一格空格。报错信息:Expected error to be handled这是因为回调函数里面的参数error没有运用到,所以可以不设置参数,或者在回调函数内console.log(error)3. Newline required at end ...原创 2020-03-18 10:39:08 · 4693 阅读 · 0 评论 -
npm run dev因为端口号被占用报错
Error: listen EADDRINUSE: address already in use :::8084 at Server.setupListenHandle [as _listen2] (net.js:1270:14) at listenInCluster (net.js:1318:12) at Server.listen (net.js:1405:7) ...原创 2020-03-12 11:22:26 · 1594 阅读 · 0 评论 -
vue父组件调用子组件方法
第一种方法:通过vue中的ref直接调用子组件中的方法。(ref可以获取DOM元素,同时也能获取方法)父组件<template> <div> <Child ref="child"/> <el-button @click="btn">点击</el-button> </div>...原创 2019-12-13 16:23:37 · 568 阅读 · 0 评论 -
Invalid default value for prop "columns": Props with type Object/Array must use a factory function
指的意思是 props default 数组/对象的默认值应该返回一个工厂函数。之前的现在的原创 2019-12-12 18:29:25 · 2532 阅读 · 0 评论 -
Unknown custom element: <Child> - did you register the component correctly? For recursive components
这里的报错原因是,要先创建Vue实例,然后再注册组件。创建Vue实例,意思就是 创建好子组件的页面名称注册组件,意思就是 在components内注册组件之后再在template 中使用即可,比如子组件是child, 也就是<child/>就不会再报错了!...原创 2019-12-12 16:52:08 · 1921 阅读 · 0 评论 -
js或者vue直接导出(下载)有路径的文件或图片
1. 用于vue下diseaseInfo(){ API.diseaseExportExcel().then(result=>{ let iframe = document.createElement('iframe') //console.log(iframe) iframe.style.display = 'none' ...原创 2019-12-10 17:51:14 · 4107 阅读 · 1 评论 -
vue中过滤器filters的this指向问题,指为undefined
有时候我们在使用vue中的过滤器filters方法时,用到this时会报undefined错,那是因为在filters中的this指向其实是为undefined,如果真的想使用可以全局定义一个that, 进行代替,let that = this; 那是因为当初为了设计过滤器filters更偏重于对文本数据的转化,如果使用上下文中的this,可以使用计算属性computed或者方法methods。...原创 2019-12-09 18:29:30 · 5051 阅读 · 2 评论 -
vue+axios+post请求导出Execl文件
响应类型要设置为:{responseType: "blob"}const blob = new Blob([result]);const fileName = '医院疾病.xlsx'; const elink = document.createElement('a'); elink.download = fileName; elink.style.display = 'none';...原创 2019-11-28 15:39:14 · 843 阅读 · 0 评论 -
vue未注册组件就使用报错
vue.esm.js?65d7:591 [Vue warn]: Unknown custom element: <el-page-header> - did you register the component correctly? For recursive components, make sure to provide the "name" option.found in...原创 2019-11-07 11:02:50 · 1240 阅读 · 0 评论 -
vue中使用了elementUI中的按钮 @mouseenter @mouseleave没有反应
【Vue中的坑】Vue中的@mouseenter,@mouseleave没反应?在开发中想实现鼠标悬浮,然后发现事件不由被出发下面就简单的说一下如何避免这种情况如果没有反应可以加一个native, 即可@mouseenter.native=“enter”如果你是在其他标签上使用,那就不需要注意啦,直接使用就好@mouseenter=“enter()”...原创 2019-11-06 17:07:25 · 2425 阅读 · 0 评论 -
vue+element模糊搜索
<el-autocomplete class="inline-input mediaInput" size="mini" v-model="syForm.symptomName" :fetch-suggestions="searchAssociate" placeholder="请输入内容" :tr...原创 2019-11-05 15:14:31 · 702 阅读 · 0 评论 -
vue导入文件
<el-upload class="upload-demo" action="" :http-request="addExcel" :show-file-list='false'> <el-button size="mini" type="primary">导入</el-button></el-upload>addExcel...原创 2019-11-05 15:11:12 · 6704 阅读 · 0 评论 -
学习Vue中的一些注意事项
在某些时候不能使用箭头函数不能在选项属性或者回调上使用箭头函数, 比如created: () =&gt;console.log(this.a) 或者vm.$watch('a',newValue =&gt; this.myMethod())。因为在Vue中箭头函数是和父级上下文绑定在一起的,也就是说this并不是Vue实例,所以会经常导致Uncaught TypeError: Cannot ...原创 2019-02-15 14:23:15 · 324 阅读 · 0 评论 -
Vue 中的生命周期
在Vue中每个Vue实例在被创建的时候都会经过一系列的初始化过程,例如要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等。在这个过程中会运行一些叫做生命周期钩子的函数,这样开发者就可以在不同阶段添加自己代码的机会。...原创 2019-02-15 14:31:05 · 276 阅读 · 0 评论 -
vue中的指令
在vue中,指令是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式(v-for除外),责任就是,当表达式的值改变时,就是响应式的作用于DOM,从而做出改变。参数:一些指令能够接收一个“参数”,在指令名称之后以冒号表示。比如,v-bind 可以用于响应式地更新HTML<a v-bind:href="url">这是一个v-bind<a/>...原创 2019-02-15 15:43:30 · 813 阅读 · 0 评论 -
Vue中的计算属性computed
计算属性在vue中模板内的表达式非常便利,如果在模板内放入太多的逻辑会难以维护,所以就出现了计算属性computed例子&lt;p&gt;Reversed message: "{{ reversedMessage}}"&lt;/p&gt;computed: { //reversedMessage 是在模板中填写的表达式 reversedMessage: function(){...原创 2019-02-15 17:45:33 · 207 阅读 · 0 评论 -
vue-cli教程
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service),该依赖:可升级;基于 webpack 构建,并带有合理的默认配置;可以通过项目内的配置文件进行配置;可以通过...原创 2019-03-08 14:52:56 · 227 阅读 · 0 评论