VUE
关注
分享
扫一扫
VUE相关内容
白不懂黑的静
纸上得来终觉浅 绝知此事要躬行
展开
-
ElementUi 表单联动延迟加载问题
现象：在ElementUi中我们建立一个表单，然后给表单绑定了属性data,然后依次从data对象中取值和表单中的各控件进行绑定；然后当表单中的A下拉框的值变更后，我需要手动触发去变更B和C两个控件，结果发现现象，每次赋值后，B和C控件总是延迟加载，显示上一次我赋值的结果。原因：在初始化data的时候data定义有问题：我刚开始定义的时候，data是如此定义的：data{}正确的写法应该是：data{ id:undefined, name:undefined, ..原创 2021-09-14 16:42:41 · 1397 阅读 · 0 评论 -
VUE中变量赋值后，出现值联动问题
问题：在vue项目中，往往我们会如下使用：let a = 3;let b = null;b =a;我的目的其实仅仅是将a拷贝到b,但是当我对b或者a的值变动了后，会直接影响对方的值跟着变换，这不是我要的效果。原因：其实对应java里的对象拷贝的深拷贝和浅拷贝的概念，也就是说，上面的写法，仅仅是一种对象的先拷贝，说的直白点，a和b这个时候都指向同一个地方，那么无论改变哪个，其实本质都是改变同一个地方的值，那么作为引用，值当然也就变了。处理办法：1、ES6let g.原创 2021-07-14 14:43:26 · 998 阅读 · 0 评论 -
Nginx部署Vue项目完整配置
下面是一个在实际应用中的实际的Nginx部署vue项目的nginx.conf的配置文件，记录在此。#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_connections 1024原创 2021-04-16 17:56:36 · 3944 阅读 · 0 评论 -
vue项目部署后Uncaught SyntaxError: Unexpected token ＜
1、现象在vue项目部署后，出现如下错误：2、原因网上查了许多，说的问题也很多，这里说下我的问题原因其实说白了，是因为我的vue.config.js中配置了属性module.exports = { // 基本路径 publicPath:'/demo/',然后就导致了，在我打包好的index.html中的所有静态资源，*.js、*.css等，在其路径上都会给我配置了这个路径下面是index.html的片段<head> <meta原创 2020-12-08 14:33:27 · 12891 阅读 · 1 评论 -
vue项目部署后，二级路由刷新业务报404
1、现象我是前后端分离开发，前端采用的是vue+Element+axios;用的vue-cli脚手架创建的项目架构。 在开发环境上已经可以正常运行； 采用npm run build 进行运行打包，生成dist文件，使用nginx反向代理服务器进行部署（为了解决跨域问题）； 部署后，程序运行正常，例如我访问http://localhost:8080/home 是可以正常访问的 当我从左侧菜单通过vue router进行跳转后，浏览器地址栏的地址变成立我指定的路由地址：例如http://localh原创 2020-12-08 14:21:55 · 1471 阅读 · 0 评论 -
vue学习总结-elementUi中的table的序号
直接在table中增加一列：看代码 <el-table-column label="序号" width="70px"> <template slot-scope="scope"> {{scope.$index+1}} </template> </el-table-column>看效果：...原创 2020-12-04 17:13:26 · 1030 阅读 · 0 评论 -
ElementUi Table中格式化日期
先看效果：其实ElementUi中的table日期格式化即其列的格式化，就要用到:formatter这个属性 <el-table-column prop="createTime" label="创建日期" width="150" align="center" :formatter="dateFormat"> </el原创 2020-12-04 14:25:14 · 8527 阅读 · 2 评论 -
Vue学习总结-Vue前端解决跨域问题
场景在vue开发中，我们采用前后端分离的模式进行开发，则前端渲染的数据都需要从后端获得，这样就会带来跨域问题。思路解决跨域问题，正常情况下有两种，既然涉及到两端，那么大的就是从两端各自处理。第一种：从后端处理。就是在后端代码中通过过滤器等方式允许请求进行跨域访问，这种方法在之前的springboot文档中有记录，此处不再叙述。第二种：从前端vue处理，vue提供了相关的配置，通过代理的方式进行跨域请求。这里着重记录下第二种，因为我们开发中，没法要求后端都去给你写允许跨域请原创 2020-12-02 22:56:24 · 19413 阅读 · 5 评论 -
Vue学习总结--生命周期钩子函数
vue的本质说白了是对前端的dom及对应数据的操作，那么对其各个生命周期的操作就得有所理解，先看其官网上的一张图：钩子函数如何使用，看下面的示例：new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) }})在使用过程中，官方特意提出如下注意事项：不要在选项 property 或回调上使用箭头函数，原创 2020-12-02 15:27:47 · 138 阅读 · 0 评论 -
vue父子组件交互
vue开发过程中父子组件通信是很常见的一个问题，现将vue官网上的这部分记录在册，方便后面查询，官网的这部分内容说的很清楚了。监听子组件事件在我们开发 <blog-post> 组件时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号，同时让页面的其它部分保持默认的字号。在其父组件中，我们可以通过添加一个 postFontSize 数据 property 来支持这个功能：new Vue({ el: '#blog-posts-event原创 2020-11-19 15:22:17 · 223 阅读 · 0 评论 -
Vue 按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --><input v-on:keyup.enter="submit">你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。<input v-on:keyup.page-down="onPageDown">原创 2020-11-19 11:16:18 · 353 阅读 · 0 评论 -
Vue 事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。.stop .prevent .capture .self .once .passive<!-- 阻止单击事件继续传播 --&原创 2020-11-19 10:39:09 · 211 阅读 · 0 评论 -
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-原创 2020-11-19 09:36:15 · 205 阅读 · 0 评论 -
Vue computed vs methods
先看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <p>Original message: "{{ message }}"</p> <p>C原创 2020-11-18 11:02:49 · 197 阅读 · 0 评论 -
npm国内镜像及配置方法
npm全称Node Package Manager，是node.js的模块依赖管理工具。由于npm的源在国外，所以国内用户使用起来各种不方便。下面整理出了一部分国内优秀的npm镜像资源，国内用户可以选择使用。国内优秀npm镜像 淘宝npm镜像搜索地址：http://npm.taobao.org/ registry地址：http://registry.npm.taobao.org/ cnpmjs镜像搜索地址：http://cnpmjs.org/ registry地址：http://r.c原创 2020-11-15 18:20:02 · 988 阅读 · 1 评论 -
npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/npm (over 30000ms)
问题：如标题所示，在适用npm对vue-element-admin进行安装时执行命令npm install执行后报如下错误：npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/npm (over 30000ms)原因：通过命令查询镜像源：npm get registry得到如下结果：https://registry.npmjs.org/怀疑是网络访问外网的镜像源出原创 2020-11-15 11:55:49 · 22934 阅读 · 1 评论