vue使用问题总结

vue使用问题总结

以下这些都是开发过程中遇到的一些问题总结，有的可能是平时开发中会经常遇到的问题。在这里做一个小总结避免日后踩坑。

1.如何进行表单数字监听

使用v-model.number进行数字字段的监听。

2.Vue中A对象赋值给B对象，修改B属性会影响到A的问题

实际在vue中this.A=this.B，没有进行深层复制，只是把this.A的地址指向this.B相同的地址，所以对于A的修改会影响到B。解决相

互影响的思路是在this.A必须是新建的一个对象，这样才能保证不被指向同一个地址，属性修改不会互相影响。

解决方案：

this.A=JSON.parse(JSON.stringify(this.B));

将对象转换成字符串剔除对象属性后，再转换成对象赋值，这样能解决指向相同地址修改会相互影响的问题。

3.vue中export，export default的区别

在ES6中，export和export default均可用于导出常量，函数，模块，文件等，你可以在其他文件或者模块中通过import+(常量|函数|文件|模块)名的方式将其导入，以便能够对其进行使用。但是在一个文件或者模块中，export，import可以拥有多个，但是export default仅有一个。

4.使用element ui中的时间插件回显编辑时可能会出现时间无法选择的情况，是因为初始化该组件对象的时候直接去掉改对象下的所有属性。

5.使用element ui中的el-tag出现click时间无法监听，

解决方案：

需要使click.native()。

6.动态添加数组中的对象属性时出现属性添加成功，页面无法显示的情况。是因为js无法监听到对象属性的改变。

解决方案：

 mounted () { this.arr.forEach(item => { this.$set(item, 'showEditBtn', true) }) },

7.修改插件中的样式，使用/deep/或者>>>,但是两者不能同时存在，否则在ios上对改样式的修改会失效。

8.使用postcss-px2rem无法转换vue模板文件中的scss问题

移动端的项目使用postcss-px2rem将px转换成rem，使用css时可以转换成rem但使用scss却无法将.vue中的scss中的px转换成rem，需要早vue-loader.conf.js中添加posttcss的配置。

解决方案：

// 添加这一行代码  postcss: [require('postcss-px2rem')({remUnit: 75})]复制代码

9.h5页面点击事件ios没反应，移动端兼容性问题

$(document).on("click","动态添加的dom",function(){

console.log("dd");

})

在ios里动态添加的dom点击事件不会触发。

解决方案：

给触发点击事动态添加的dom增加样式，cursor:pointer或者增加一个touch事件