问题场景: 在vue的v-for循环中使用的数组数据list中属性不是在data初始化声明的,而是在后端接口数据返回时动态添加的属性,此时在页面dom中绑定失效。 问题描述:在v-for循环中,如果我们在函数中改变了item中的值,在console.log()中查看是修改成功了,但在页面中没有及时刷新改变后的值。 解决方法:使用vue自带的 this.$forceUpdate() 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。 …
问题场景: 在vue的v-for循环中使用的数组数据list中属性不是在data初始化声明的,而是在后端接口数据返回时动态添加的属性,此时在页面dom中绑定失效。 问题描述:在v-for循环中,如果我们在函数中改变了item中的值,在console.log()中查看是修改成功了,但在页面中没有及时刷新改变后的值。 解决方法:使用vue自带的 this.$forceUpdate() 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。 …
1. 在vue中v-for和v-if不要放在同一个元素上使用。 由于 v-for 和 v-if 放在同一个元素上使用会带来一些性能上的影响. 官方给出的建议是在计算属性上过滤之后再进行遍历。 2. 动态加载组件。 在同一个页面中如果不需要立刻展示的组件,可以使用动态组件(动态组件主页面加载是不会加载,等到触发条件时才加载该组件,并且加载一次后就有缓存)。 3. 路由懒加载 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才…
路由作为单页面应用连接页面的桥梁,而参数在其中扮演着非常重要的角色,在两座之间桥梁是否能够连接成功起着重要作用。 在vue中根据vue-router官网,我们知道vue路由组件传参提供了三种基本的传参方式:布尔模式、对象模式、函数模式;具体查看官网:路由组件传参 了解完了路由组件传参原理以后,接下来我们总结一下路由传参的方法和技巧: 路由传参方案 路由传参方法一: 1. 路由配置 2. 使用方法 // 直接调用$router.push 实现携带参数的跳转url 3,获取方法(在describe页面) 使用以上方法可…
handsontable是目前在前端界最接近excel的插件,可以执行编辑,复制粘贴,插入删除行列,排序等复杂操作。拥有jQuery、react、ng和vue版本,功能强大,是复杂表格的不二之选。 下面介绍一下handsontable表格控件在vue项目中的使用方法: 1.安装模块包 这样安装完handsontable依赖的各模块(moment、numbro、pikaday 、zeroclipboard)也一起安装完了,不必再单独安装 页面如果使用相关的模块方法,可以直接import引入,例如使用moment中的格…
vue项目开发总结 vue项目搭建使用的官方脚手架:vue-cli;UI库是vux;打包工具使用webpack;状态管理vuex。 1.npm在国内的网络环境下可能会比较慢,解决方案: 使用淘宝镜像: 1>.官方网址:http://npm.taobao.org; 2>.安装,使用config命令: npm config set registry https://registry.npm.taobao.org npm info underscore (如果上面配置正确这个命令会有字符串response) …