Vue常用方法技巧

1、vue表单常用的正则验证[邮箱，手机号，密码，固话，微信号等]
https://blog.csdn.net/weixin_41557291/article/details/80772412
2、Vue项目动态修改单页应用页面标题(title)

3、Vue项目在手机上预览
4、路由传值
从A页面跳转到B页面时通过路由传参数过去，有两种方法，可以在路径里带参数，也可以不带。

4.1 带参数
注: 路由传参 是可以传 对象 的。
就是在定义路由的时候用拼接带方式加参数，跳转时通过路由属性中的path来确定匹配到的路由。
比如

A页面

路由配置:
 {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }
跳转：
this.$router.push({
          path: `/describe/33`,
        })

B页面接收参数:

const id = this.$route.params.id;
// id = 33

4.2 不带参数
父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

A页面

 this.$router.push({
          name: 'Describe',
          params: {
            id: 33
          }
  })

// 这个方法更方便的一点是可以直接传对象过去，不需要转成JSON字符串之后在传

B页面接收参数:

// 接收的时候也可以直接接收一个对象，存取很方便
const id = this.$route.params.id；
// id = 33

4.3 父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

对应路由配置:
   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }
跳转：
    this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

B页面接收参数:

const id = this.$route.query.id；
// id = 33

4.4上面的方法正好解决了传统的在URL中以?拼接的路径的情况怎样来解析参数。
比如 路径为: http://192.168.1.32:8080/#/share?code=3
在当前页面取值:

const id = this.$route.query.id;
// id =3;

注意点： 在子组件中 获取参数的时候是this.router 这很重要~~~

5、在Vue中 注入外部实例。
比如 在入口main.js中导入axios 并将axios写入vue的原型，这样就能在其他文件不需要引入而更简单的使用

import axios from 'axios'
 
Vue.prototype.axios = axios;

使用:
this.axios.post("接口路径", {参数})

6、获取元素尺寸和css样式

//获取高度值
var height= this.$refs.text.offsetHeight; //100


//获取元素样式值,element 为元素ref="element"
var heightCss = window.getComputedStyle(this.$refs.element).height; // 100px


//获取元素内联样式值
var heightStyle =this.$refs.element.style.height; // 100px

参考

7、vue项目中 使用 less
安装相关loader即可yarn add less less-loader

8、Vue项目动态修改单页应用页面标题(title)
我们在使用Vue做公众号、手机端、pc端、小程序等的单页应用时，会有动态改变每个页面标题的需求，我们可以通过配置路由的meta信息，然后在main.js里通过router.beforeEach(function(to, from, next))里动态改变title的方法来实现。

路由配置

routes: [
    {
          path: '/home/:openname',
          name:'home',
          component: Home,
          meta: {
            title: '首页'
        }
    }
  ]

主要代码

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title;
  }else{
    document.title = "这里可以给默认标题";
 }
  next();
})

9、Vue项目在手机上预览
打开由Webpack生成的Vue项目，打开 config/index.js文件
修改host: 0.0.0.0即可，这样手机与你本机在同一个局域网环境下就可以在手机上访问项目页面了。同理端口号也可以在这里修改。

image.png