y84a a80i 427m 3rjh en7c cus4 1h84 2484 agy4 pn5t

vue使用技巧及vue项目中遇到的问题

标签:只代表 ckei 足球开户网址

转载  更新时间:2018-08-17 15:43:23   作者:誌翔   我要评论

这篇文章主要介绍了vue使用技巧及vue项目中遇到的问题,本文给大家带来的只是一部分,后续还会持续更新,感兴趣的朋友跟随脚本之家小编一起学习吧

这里给大家分享一下vue中的一些技巧,希望对大家有用处。(话不多说上代码)

1,vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开,没有保存已输入的信息。)

//在路由组件中:
mounted(){
},
beforeRouteLeave (to, from, next) {
 if(用户已经输入信息){
 //出现弹窗提醒保存表单,或者自动后台为其保存
 
 }else{
 next(true);//用户离开
 }

请参考vue文档全局钩子和组件钩子

2,路由懒加载写法:

 // 我所采用的方法,个人感觉比较简洁一些,少了一步引入赋值。
 const router = new VueRouter({
  routes: [
  path: '/app',
  component: () => import('./app'), // 引入组件
  ]
 })
 // Vue路由文档的写法:
 const app = () => import('./app.vue') // 引入组件
 const router = new VueRouter({
  routes: [
  { path: '/app', component: app }
  ]
 })

3,路由的项目启动页和404页面

一般项目都会设置这个,如果默认进入地址会跳到login页面,如果你输入的是一个没有用的路由或者是空路由会跳转到notFind页面(你自己设置的404页面)

 export default new Router({
  routes: [
  {
   path: '/', // 项目启动页
   redirect:'/login' // 重定向到下方声明的路由 
  },
  {
   path: '*', // 404 页面 
   component: () => import('./notFind') // 或者使用component也可以的
  },
  ]
 })

4,setInterval路由跳转继续运行并没有销毁问题

beforeDestroy(){
  //我通常是把setInterval()定时器赋值给this实例,然后就可以像下面这么暂停。
 clearInterval(this.intervalid);
},

beforeDestroy方法是生命周期里组件销毁前执行的钩子函数,在离开的时候会触发这个方法,这个方法在其他的地方也会有妙用,希望大家可以去了解一下。

5,setTimeout/setInterval this指向改变,无法用this访问VUe实例

这个地方大家的默认方法肯定是:

 //使用变量访问this实例
 let self=this;
  setTimeout(function () { 
   console.log(self);//使用self变量访问this实例
  },1000);

其实这个地方我们可以用箭头函数,因为箭头函数会改变this的指向,而指向的刚好是自己的父级this,所以我们可以这样用:

 //箭头函数访问this实例 因为箭头函数本身没有绑定this
  setTimeout(() => { 
  console.log(this);
 }, 500);

这样我们的this就是指向我们的vue实例了。

6,Vue 数组/对象更新 视图不更新

方法一:直接使用最简单也是最有效的方法,深拷贝对象或者数组,视图会进行更新,不过会有一个缺点,深拷贝后的数组或者对象不是原来的那个数组或者对象,是你现在改变了之后的值。

上代码:

你的对象或者数组=JSON.parse(JSON.stringify(你的对象或者数组))
先进行转字符串,再转回对象,这个就进行了一个拷贝的过程,会触发视图的改变,同时也进行了一个数组的替换,有利有弊。

方法二:this.$set(你要改变的数组/对象,你要改变的位置/key,你要改成什么value)

this.$set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象

这个是vue专门为改变不了数组设定的一个方法,使用也很简单(如果还是不懂请参考vue文档)

7,深度watch与watch立即触发回调

watch很多人都在用,但是这watch中的这两个选项deep、immediate,或许不是很多人都知道,我猜。

选项:deep

在选项参数中指定 deep: true,可以监听对象中属性的变化。

选项:immediate

在选项参数中指定 immediate: true, 将立即以表达式的当前值触发回调,也就是默认触发一次。

 watch: {
  obj: {
   handler(val, oldVal) {
   console.log('属性发生变化触发这个回调',val, oldVal);
   },
   deep: true // 监听这个对象中的每一个属性变化
  },
  step: { // 属性
   //watch
   handler(val, oldVal) {
   console.log("默认触发一次", val, oldVal);
   },
   immediate: true // 默认触发一次
  },
  },

总结

以上所述是小编给大家介绍的vue使用技巧及vue项目中遇到的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 实现一个简单的vue无限加载指令方法

    实现一个简单的vue无限加载指令方法

    vue 中的自定义指令是对底层 dom 进行操作,下面以实现滚动到底部加载数据,实现无限加载来介绍如何自定义一个简单的指令。
    2018-08-17
  • 在vscode中统一vue编码风格的方法

    在vscode中统一vue编码风格的方法

    本篇文章主要介绍了在vscode中统一vue编码风格的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-17
  • vue.js实现价格格式化的方法

    vue.js实现价格格式化的方法

    这里分享一个常用的价格格式化的一个方法,在电商的价格处理中非常的实用,具体实现代码大家参考下本文
    2018-08-17
  • vue.js实现请求数据的方法示例

    vue.js实现请求数据的方法示例

    这篇文章主要给大家介绍了vue.js实现请求数据的方法示例,文中分别介绍了vue1.0和vue2.0的示例方法,需要的朋友可以参考借鉴,下面来一起看看吧。
    2018-08-17
  • VUE实现一个分页组件的示例

    VUE实现一个分页组件的示例

    本篇文章主要介绍了VUE实现一个分页组件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-17
  • vue2.0 和 animate.css的结合使用

    vue2.0 和 animate.css的结合使用

    animate.css是一款前端动画库,相似的有velocity-animate。这篇文章给大家介绍vue2.0 和 animate.css的结合使用,需要的朋友参考下吧
    2018-08-17
  • vue-resource + json-server模拟数据的方法

    vue-resource + json-server模拟数据的方法

    本篇文章主要介绍了vue-resource + json-server模拟数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-17
  • 使用Vue.js创建一个时间跟踪的单页应用

    使用Vue.js创建一个时间跟踪的单页应用

    这篇文章主要介绍了使用Vue.js创建一个时间跟踪的单页应用的相关资料,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-17
  • 详解Vue2 SSR 缓存 Api 数据

    详解Vue2 SSR 缓存 Api 数据

    本篇文章主要介绍了Vue2 SSR 缓存 Api 数据,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-17
  • vue.js数据绑定操作详解

    vue.js数据绑定操作详解

    这篇文章主要介绍了vue.js数据绑定操作,结合实例形式详细分析了vue.js数据绑定的各种常见操作技巧与相关注意事项,需要的朋友可以参考下
    2018-08-17

最新评论