vue经验总结
2017-05-13 17:32
141 查看
1. vue中获取dom节点时机
vue组件中获取dom节点一定要在mounted周期之后的下一次事件循环,包括 component.$refs,component.$el,component.$children等
一般写法在nextTick中获取,mounted不是必须:
mounted(){
this.$nextTick(() = {
const el = this.$el;
})
}
2.watch变量合并更新
vue的dom更新是异步的,因此watch一个变量时候,短时间内频繁更新该变量的值,其watch方法只会执行一次
例如,在for循环总更新一个被watch的变量。解决方法,可以使用setTimeout延迟更新或者直接调用watch的方法。
3.vuex的页面弹出error
可以在vuex的module state中添加error字段,ajax出错时,将错误赋值为error,
组件内再watch error字段,弹出error内容
4.watch $route触发时机
watch $route的方法只在组件被复用,即同一个组件内的路由切换时候,即同一个一级路由下的二级路由发送变化时候触发。
如果是一级路由发生变化,组件会被重新创建,会触发created方法,不会触发$route。在二级路由之间跳转,只有一级路由相同才触发。
例如:
/user/:id, id是个参数 /user/1 到 /user/2 会触发user组件的$route方法
/account,/account/list,/account/create 从/account/list到/account/create会触发account组件的$route方法,从/account/list到/user/1不会触发
5. Unknown custom element: <router-view>
未引入vueRouter
import vueRouter from 'vue-router'
Vue.use(vueRouter)
6. vue的props在模板中不能用驼峰
在vue的props中可以使用驼峰写法的属性,但是在模板中必须改成中划线形式,例如backClass在模板中必须改成back-class,否则会被当成是html标签的自定义属性,在props中取不到值
7. vue获取路由参数
在vue组件中,使用this.$route获取路由相关信息,不是$router.
//params
this.$route.params
//query
this.$route.query
vue组件中获取dom节点一定要在mounted周期之后的下一次事件循环,包括 component.$refs,component.$el,component.$children等
一般写法在nextTick中获取,mounted不是必须:
mounted(){
this.$nextTick(() = {
const el = this.$el;
})
}
2.watch变量合并更新
vue的dom更新是异步的,因此watch一个变量时候,短时间内频繁更新该变量的值,其watch方法只会执行一次
例如,在for循环总更新一个被watch的变量。解决方法,可以使用setTimeout延迟更新或者直接调用watch的方法。
3.vuex的页面弹出error
可以在vuex的module state中添加error字段,ajax出错时,将错误赋值为error,
组件内再watch error字段,弹出error内容
4.watch $route触发时机
watch $route的方法只在组件被复用,即同一个组件内的路由切换时候,即同一个一级路由下的二级路由发送变化时候触发。
如果是一级路由发生变化,组件会被重新创建,会触发created方法,不会触发$route。在二级路由之间跳转,只有一级路由相同才触发。
例如:
/user/:id, id是个参数 /user/1 到 /user/2 会触发user组件的$route方法
/account,/account/list,/account/create 从/account/list到/account/create会触发account组件的$route方法,从/account/list到/user/1不会触发
const User = { template: '...', watch: { '$route' (to, from) { } } }
5. Unknown custom element: <router-view>
未引入vueRouter
import vueRouter from 'vue-router'
Vue.use(vueRouter)
6. vue的props在模板中不能用驼峰
在vue的props中可以使用驼峰写法的属性,但是在模板中必须改成中划线形式,例如backClass在模板中必须改成back-class,否则会被当成是html标签的自定义属性,在props中取不到值
7. vue获取路由参数
在vue组件中,使用this.$route获取路由相关信息,不是$router.
//params
this.$route.params
//query
this.$route.query
相关文章推荐
- vue2.x使用小经验总结
- 程序员总结的那些Vue性能优化经验
- Vue 经验总结
- 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)
- Vue 性能优化经验总结
- vue使用的经验总结
- 在.NET中调用Oracle9i存储过程经验总结
- 转载:TonyBaoBao:在.NET中调用Oracle9i存储过程经验总结
- 关于解决WebSphere服务不能启动问题的几点经验总结
- 在.NET中调用Oracle9i存储过程经验总结
- 测试的一点经验总结
- SCWCD 考试经验总结[转帖]
- 关于ASP.NET在IIS一些问题的经验总结(zz)
- 关于ASP.NET在IIS一些问题的经验总结
- 关于ASPNET在IIS一些问题的经验总结
- [导入]关于ASPNET在IIS一些问题的经验总结
- 这是我们公司总结的一些关于中文乱码问题的一些解决方案和经验和大家分享!
- 由PPP项目总结的几点项目经验
- arcims开发经验总结(2) (地图放大缩小、鹰眼实现逻辑)
- 定义变量也是如此痛苦,经验值得总结。