vue
Jungle松
一名努力中的小码农...
展开
-
Vue Router中使用params和query传参的区别
query传参js代码(query传参,使用name和path跳转)//query传参,使用name跳转this.$router.push({ name:'second', query: { queryId:'20180822', queryName: 'query' }})//query传参,使用path跳转this.$router.push({ path:'second', query: { query原创 2021-08-12 09:15:28 · 1589 阅读 · 0 评论 -
vue element-ui message消息堆积问题解决
堆积情况如下:解决后的效果图如下:实现方法:1、在合适的位置新建一个js文件,reWriteMessage.js:import Vue from 'vue'import Main from 'element-ui/packages/message/src/main.vue'import PopupManager from 'element-ui/lib/utils/popup/popup-manager'import { isVNode } from 'element-ui/src/uti原创 2021-07-08 12:02:20 · 664 阅读 · 0 评论 -
vue中事件绑定函数加括号和不加括号的区别
不加括号:查看结果:加括号查看结果这个undefined才是id的值,被这个地方也是坑了很久,平常也是没注意,因为需要在方法的内容拿这个id去判断某些逻辑总结加与不加括号的区别在于事件对象参数 event 的处理。不加括号时,函数第一个参数为 event,加了括号后,需要手动传入 $event 才能获得事件对象。...原创 2021-06-29 15:22:55 · 483 阅读 · 0 评论 -
Vue中将data中的某一个对象或者属性置空
最笨的方法:分别置空对象中每一个值:this.data.userName = "";this.data.email = "";this.data.phone= "";this.data.gender= "";this.data.loginName = "";MDN上的方法:Object.assign()MDN关于该方法的介绍:Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。用法: Object.assign(target,原创 2021-05-26 13:46:18 · 6930 阅读 · 0 评论 -
vue this.$createElement
vue this.$createElement在学习别人的代码的过程中,看到别人使用Vue+ElementUI弹出对话框的一个写法,我没有这样写过,因此比较好奇,便去查了一下这种写法。写法是这样的:生成的对话框如下:这里用到了vue $createElement这个方法,此方法各个参数的含义和用法如下:h('div',{},[ h('p','some message...some time...'), h('p','some message...some原创 2021-05-23 18:16:33 · 5437 阅读 · 0 评论 -
Vue项目中使用MD5
在项目中通过前台js加密的方式对登录中的密码等私密信息进行加密的工具首先安装npm install js-md5在项目入口文件main.js中引入js-md5import md5 from 'js-md5';Vue.prototype.$md5 = md5;在Login.vue中(可以其他需要加密的组件汇总)进行使用//可直接调用该方法使用this.$md5("加密内容")官方链接如下MD5官方链接https://www.npmjs.com/package/js-md5.原创 2021-05-12 09:33:05 · 266 阅读 · 0 评论 -
Vue项目中使用lib-flexible
我们在用Vue开发项目的时候,常见的一个问题就是移动端的适配问题,这里提供了一个很好的自适应解决办法首先安装npm i lib-flexible --save在项目入口文件main.js中引入lib-flexibleimport 'lib-flexible/flexible.js'在项目根目录的index.html 文件的头部删除自动生成的meta标签, 新引入的lib-flexible会根据用户屏幕尺寸自动生成自适应的meta标签// 删除<meta name="viewport原创 2021-05-12 09:06:28 · 2436 阅读 · 0 评论 -
Vue错误跳坑:npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! newbee@0.1.0 serve: `vue-cli-service serv
npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! newbee@0.1.0 serve: `vue-cli-service serve`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the newbee@0.1.0 serve script.npm ERR! This is probably not a problem with npm. There is likely additional lo原创 2021-05-10 15:50:20 · 16278 阅读 · 5 评论 -
Vue错误跳坑:Newline required at end of file but not found.
Newline required at end of file but not found.首先翻译可得文件末尾需要换行符,但未找到。原因分析Eslint的规范化要求,结尾必须要有换行符原创 2021-05-10 15:10:46 · 7049 阅读 · 0 评论 -
Vuex基础知识整理
vuex1、什么是vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生改变简单来说,就是用来集中管理数据;2、使用vuex的核心概念1)storevuex 中最关键的是store对象,这是vuex的核心。可以说,vuex这个插件其实就是一个store对象,每个vue应用仅且仅有一个store对象。(1)创建storeconst store = new Vuex.Store({...})原创 2021-05-06 18:09:31 · 166 阅读 · 2 评论 -
Vue-Router 路由模式
Vue-Router 路由模式Vue-Router 为我们提供了三种路由模式:Hash模式History模式abstract模式Hash模式Hash 模式是 Vue-Router 的默认模式,具体的体现是在浏览器地址栏上 URL 路径永远带着一个「#」号。在浏览器支持度上面,Hash 模式是比较强势的,甚至能兼容低版本的 IE 浏览器。「#」号后面内容的改变,不会引起页面对服务端的请求,所以也就不会重新加载页面。在部署服务器方面,个人认为 Hash 模式比 History 模式来得更为方便,原创 2020-12-21 17:19:50 · 772 阅读 · 0 评论 -
Vue Mixin混入
Vue Mixin混入混入(mixin)提供了一个非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包括任意组件选项。当组件使用混入对象时,所有混入对象的选项将被「混合」进入该组件本身的选项。上面这段摘录自 Vue 的官方文档,文字有点难理解,通过举实例来解释 mixin 的具体用法。 其实我们可以用 Object 的思想去理解 mixin,假设有一个变量 A,它的值为 { a: 1, b: 2 },有另一个变量 B,它的值为 { a: 3, c: 4 },B 作为混入的对象混入 A原创 2020-12-21 10:46:27 · 262 阅读 · 0 评论 -
shim是什么?Vue响应式原理
shim是什么?Vue响应式原理中说道:Object.defineProperty是Es5中无法shim的特性,那么这里的shim是什么呢?shim可以将新的API引入到旧的环境中,而且仅靠就环境中已有的手段实现。文章中说的意思就是,Object.defineProperty这个特性是无法使用低级浏览器中的方法来实现的,所以Vue不支持IE8以及更低版本的浏览器。es5-shim可以让一些低级的浏览器支持最新的ecmascript5的一些特性。支持浏览器或node.js,已经测试的功能见https:原创 2020-12-21 10:00:14 · 1110 阅读 · 2 评论 -
Vue的label标签中for的作用
先上代码<!DOCTYPE html><html lang="en"><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>Vue De原创 2020-12-18 09:49:44 · 8799 阅读 · 2 评论 -
var、let和const的知识点
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。let 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量,一旦声明,常量的值就不能改变。var和let、const的区别:1.var声明的变量会挂载在window上,而let和const声明的变量不会2.var声明变量存在变量提升,let和const不存在变量提升3.let和const声明形成块作用域4.同一作用域下let和const不能声明同名变量,而var可以原创 2020-10-29 22:16:03 · 118 阅读 · 0 评论 -
push()pop()shift()unshift()splice()sort()reverse()
Vue变异方法push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。pop() 方法用于删除并返回数组的最后一个元素。shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。sort() 方法用于对数组的元素进行排序。reverse() 方法用于颠倒数组中元素的顺序。替换数组filter() 方法创建一个新的数原创 2020-10-22 16:36:54 · 945 阅读 · 0 评论 -
通过Vuex设计全局变量
在项目中和router文件夹同级建立store文件夹,新建index.js文件添加以下代码:(前提是已经npm过vuex,或者项目已经有该环境。)import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { openDialog: false, }, mutations: { openDialogFunc(state) {原创 2020-10-21 22:21:58 · 861 阅读 · 1 评论 -
Property or method “XXX“ is not defined on the instance but referenced during render.(Vue项目报错)
报错内容如下:[Vue warn]: Property or method "cancelForm" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https:/原创 2020-10-21 22:09:04 · 2385 阅读 · 1 评论 -
dialog设置弹窗关闭事件
我们在页面中使用dialog弹窗的时候,在非弹窗范围点一下弹窗就关闭了,所以这里有一个很好的解决办法。<el-dialog :close-on-click-modal="false" :visible.sync="visible" :title="标题"> <textarea class="textarea"> {{ editContext }} </textarea></el-dialog>原创 2020-10-15 20:52:38 · 4527 阅读 · 0 评论