背景描述: VUE 项目经过 npm run bulid 生成静态文件上传到服务器后,当我们切换路由并刷新页面,nginx 服务器会报 502 或者 404 错误. 原因分析: 我猜测是因为在 VUE 项目中,路由是利用H5的 history ,看起来页面 url 发生了变化,其实根本就在同一个页面.简而言之,除了根路由之外的路由并不是有效的 url,所以直接刷新页面并不能 get 到对应的内容. 解决方案: 通过 nginx 配置,让所有页面回到根路由. location / { proxy_

vue 高度 动态更新计算 calcHeight () { // this.tableHeight = window.innerHeight - 210 } }, mounted () { // console.info('jobOrgNum this', this) window.onresize = () => { this.calcHeight() } }, watch: { '$route' (to, from) { this.calcHeight() }

vue视图不更新情况详解:https://www.jb51.net/article/161371.htm

前两天在开发时遇到一个需求:打开对话框的时候自动聚焦其中的输入框.由于原生的 autofocus 属性不起作用,需要使用组件库提供的 focus 方法手动手动获取焦点.于是有如下代码: <el-button @click="openDialog">点击打开 Dialog</el-button> <el-dialog :visible.sync="dialogVisible"> <el-input v-model="

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Helvetica Neue"; color: #404040 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "

用了vue开发了一段时间,基本上感觉都是比较好用的一个框架,刚开始还是会存在一些小坑的东西,这里先浅谈下值的更新问题. 1.本组件的一些变量,或者是主view(路由页面)一些值,是通过vuex 中state赋值的话,因为是全局变量.所以不会切换路由而初始化的,所以这种缓存的值会造成一定的困扰,详细的可以看看另外一篇博客,浅谈 vuex state,里面有具体的例子. 对于这种问题,目前我自己的方法就是苦逼的初始化咯.自己手动重新赋值就是了. 2 在dom更新时,相应的值也不一定能及时刷新在dom

转载:https://blog.csdn.net/yudiandemingzi/article/details/80247137 怎么结合的: 一.启动项目 第一步:cmd进入项目文件里,运行npm run dev  启动项目    这里说明启动端口号是8080 第二步:往页面输入:localhost:8080 二.解析渲染步骤 先看整体框架样式和index.html: 从上面我们可以看出,index的body中只有一个id为app的div,那是如何被渲染的呢.一步一步寻找 第一步:main.j

1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App.vue的子组件.所以我将router标示为App.vue的子组件. index.html文件入口 src放置组件和入口文件 node_modules为依赖的模块 config中配置了路径端口值等 build中配置了webpack的基本配置.开发环境配置.生产环境配置等

[原文链接] Slots:新语法,性能改进为3.0做准备改用 v-slot 指令 //默认插槽 <baz v-slot ="baz"> {{baz}} </ baz > //嵌套默认插槽 //组件提供的范围变量也在该组件本身上声明 <foo v-slot="foo"> <bar v-slot="bar"> <baz v-slot="baz"> {{ foo }} {{

因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化: 直接用索引设置元素,如 vm.items[0] = {}: 修改数据的长度,如 vm.items.length = 0. this.examineIntro.questionList[0].selList[1].url = url; 为了解决问题 (1),Vue.js 扩展了观察数组,为它添加了一个 $set() 方法: // 与 example1.items[0] = ... 相同,但是能触发视图更新 Vue.set(

在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 简单来说,Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新. 知乎上的例子 //改变数据 vm.message = 'changed' //想要立即使用更新后的DOM.这样不行,因为设置message后DOM还没有更新 console.log(vm.$el.textContent) // 并不会得到'changed' //这样可以,nextT

列表渲染语法  v-forv-for 循环对象 <article v-for="(item, key, index) of info">{{item}} {{key}} {{index}} </article> 修改: info.name = "" 增加  需要从新引用 当不需要循环变更数据的时候可以用index作为key值 一般不建议用index作为key值.频繁操作dom元素的时候,还是非常耗费性能的,vue没办法充分复用dom节点 循环

一.  强制更新的实例方法   vm.$forceUpdate() 迫使 Vue 实例重新渲染.注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件. 在没有留意到数组或对象的变更检测注意事项,或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态. 然而,如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新,那么你可以通过 $forceUpdate 来做这件事. 二.   通过 v-once 创建低开销的静态组件 渲染普通的 HTML 元素在 Vue 中是非常快速的,

病因 修改文件后无法更新界面,感觉留白,没有更新 解决过程 发现问题,第一步搜索别人是怎么解决的 搜索一阵后,发现大部分都是留言路径问题,基本都是组件文件夹大写导致 修改测试后发现问题依旧 然后仔细观察留白的部分发现,真是自己挖坑自己跳 F12审查,发现留白部分class名loading开头,遂回想起来自己之前弄全局loading在App.vue加的元素,后期没用也未曾删除 解决办法 删除App.vue下多余元素 后记 编码还需规范,测试不用可以先注释,但是不要抱有侥幸心态 也许只是一点点,但是

口诀: 数组变更方法,就会导致 v-for 更新,页面更新 数组非变更方法:返回新数组,就不会导致 v-for 更新,更新值检测不到可采用覆盖或者 this.$set() 数组变更方法如下: 1. arr.push()从后面添加元素 arr.push(5) 2. arr.pop()从后面删除元素,只能是一个 arr.pop() 3. arr.shift()从前面删除元素,只能删除一个 arr.shift() 4. arr.unshift()从前面添加元素,返回值时添加完后数组长度 arr.uns

今天在使用Vue中遇到了一个新的需求:子组件需要修改由父组件传递过来的值,由于子组件的值是由父组件传递过来的,不能直接修改属性的值, 我们想改变传递过来的值只能通过自定义事件的形式修改父组件的值达到修改子组件值的目的. 在此处做个记录,防止以后踩坑! 子组件代码: childrenCallback(list){ //通过$emit调用父组件定义的on-change-Result方法,将需要改变的值传递到父组件 this.$emit('on-change-Result', $this.import

由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如: vm.items.length = newLength 方法一:如官方文档所示 用法:完成赋值之后,使用上面的那些方法即可,比如: this.checkedMenu[0]=5;//赋值操作 this.checkedMenu.sort();//使用变异方法 方法二:使用Vue.Set //Vue

描述:通过App.vue绑定#App元素(进行展示).div#id中间写入任何内容都会失效. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>demos</ti

之前可以这样: <ul id="example"> <li v-for="item in items"> {{$index}} {{$key}} </li> </ul> 现在已经移除,如果还用的话就会报错:Uncaught ReferenceError: $index is not defined; 现在这样写: <ul id="example"> <li v-for="

1.禁止div点击 2.禁止选择 -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 3.暂无数据 <div v-show="!data1.length" style="height: 100%;"> <di

1.父组件 使用 Math.ramdom() 2.子组件获取 然后监听这个ramdom变化,处理子组件的更新