vue常用

最新推荐文章于 2023-09-12 10:03:02 发布

我靠起名好难

最新推荐文章于 2023-09-12 10:03:02 发布

阅读量548

点赞数 1

分类专栏：杂货文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_56840471/article/details/126707523

版权

杂货专栏收录该内容

10 篇文章 0 订阅

订阅专栏

axios

// 使用时直接用axios即可, 设置在main.js中
import axios from 'axios'
axios.defaults.baseURL = "http://127.0.0.1:8000/"
Vue.prototype.axios = axios
Vue.config.productionTip = false

elmentui?

cnpm i element-ui -S 	# 安装elemntui
// 使用时直接用elemntui即可, 设置在main.js中
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

vue中修改包的下载位置

# 将下载地址改为淘宝镜像
npm set registry https://registry.npm.taobao.org

拦截器

// 拦截器
axios.interceptors.request.use(
  config => {
    if (localStorage.getItem('token')) {
      config.headers['Authorization'] = 'JWT ' + localStorage.getItem('token')
    }
    return config
  },
  error => {
    return Promise.reject(error.response)
  })

手写请求时携带headers

var token = localStorage.getItem('token')
this.axios.get('sadmin/test/',{headers: { "Authorization": token }}).then(res=>{
  if(res.data == 401){
  alert('登录后访问')
  }
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uFcwpoCp-1662365388151)(C:\Users\ZHY\Desktop\新建文件夹\all_picture\手动添加headers.png)]

拦截器请求自动带headers

// 拦截器 设置好直接生效只要是请求就在请求时带上本地浏览器里面的token值,设置在main.js中
// 拦截器的一些想法,能否控制是否需要拦截???????????
axios.interceptors.request.use(
  config => {
	//某些接口去除token(params里面noToken值为true的时候,传递给后端的token值为空)
    if(config.params && config.params.noToken){
      return config
    }
    if(localStorage.getItem('token')){
      config.headers['Authorization'] = 'jwt '+localStorage.getItem('token');
    }
    return config;
  },
  error => {
    return Promise.reject(error.response);
  });

// 下面两个拦截器是待确认的,需要修改的
// axios.interceptors.request.use(function(config){
//   console.log(config)
//    console.log('请求式拦截器')
//   return config
// },function  err(err){
//   console.log(err)
// })
// 
// axios.interceptors.response.use(function (res){
//   console.log(res)
//   console.log('响应式拦截器')
//   return res
// },function err(err){
//   console.log(err)
// } )

白名单

// vue中的白名单
// 注意 路由写的是后均按小写 ,否则或出现在白名单中找不到路由出现死循环
// 想法: 怎么加上验证token值????????????
var white = ['/','/login']
router.beforeEach((to,from,next)=>{
  console.log(white.indexOf(to.path))
  if(white.indexOf(to.path)>=0){
    next()
  }else{
    var userid=localStorage.getItem('userid')
    if(userid){
      next()
    }else{
      next('/login')
    }
  }
})

//待确认的 是用于封装axios的get 和 post
import  axios from "axios"
export function get(url,params){
  return axios.get(url,params)
}
    export function post(url,data){
  return axios.post(url,data)
}

// axios.get('http://localhost:8080/#/day09_axios',)
//   .then(res=>{console.log(res)})
//   .catch(err=>{console.log(err)})

vue中路由中使用拦截器


{
    path: '/userinfo',
    name: 'userinfo',
    component: userinfo,
    // 拦截器的使用
    beforeEnter: (to, from, next) => {
      // 判断用户是否登录
      if(localStorage.getItem("username")){
        next();
      }else{
        next('/login01');
      }

vue的过滤器

// 自定义过滤器 与data 同级
//
filters:{
	myfilter:function (value){
		value = value.slice(0,3);
		return value+"********"
	}
},

vue中element_ui报错

vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.

解决:

一进入某页面，就会冒出这么一长串的报错，这个是由于v-for循环里，key值可能重复了，所以会报这个错。查看了一下页面代码：发现key值重复了
Avoid using non-primitive value as key, use string/number value instead.
意思是：避免使用非基本值作为键，而是使用字符串/数字值。

Duplicate keys detected: ‘[object Object]’. This may cause an update error.
意思是：检测到重复键:‘[object object]’。这可能会导致更新错误。
```
 ##### 	解决:
```
主要问题出现在：v-for 遍历：key = obj :key 给了一个obj对象，改为字符串或数字即可解决：
vue项目报错Invalid prop: type check failed for prop “index”. Expected String, got Numbe

在element_ui中intdex 代表的是字符串,而不是数字,在这里转化一下即可

解决:

index=“index+1+‘’‘’”

# 例子:
<el-submenu :index="index+1+''" v-for="(i, index) in userlist" :key="index.j">
    <template slot="title">
        <i class="el-icon-goods"></i>
        <span>{{ i.name }}</span>
    </template>
    <el-menu-item-group v-for="j in i.sub" :key="j.i">
        <el-menu-item :index=j.url>{{ j.name }}</el-menu-item>
    </el-menu-item-group>
</el-submenu>

vue中的methods循环

一般的

iterable=[1,2,3,4,5,6]		# iterable 列表, 数组,字符串
for(let i=0;i< this.iterable.length;i++){   //这里面 i 小标0,1,2,3.....
    console.log(this.iterable[i])  		
   }
******************                                   
for(let i in iterabel){						//这里面 i 是iterable中的元素
    console.log(i)                                         
   }
******************                                         
let i =1
while (i<10){
if (i<10){
   console.log(i)
   i++
 }else{
    break									// break 结束整个循环 continue 结束本次循环
  }
}			
******************
this.iterable.forEach(res=>{				// forEach 语法也是一种循环
    if(res.id==2){
    console.log(res)    
    }else{
    continue
   }
 })

遍历字段的键值对 👊

在methods方法中一般的循环来循环字段的时候,遍历的是字典的键,

要将键和值均遍历出来就要用其他方法

dict = {'id':1,'name':'koko','is_show':false}

for(let key in dict){
console.log(key,this.dict[key])			//打印出dict的 键 ,值
}

短信验证码倒数秒数

<li>
              <label>短信验证码:</label>
              <input type="text" name="msg_code" id="msg_code" class="msg_input" v-model="form.code">
              <a href="javascript:;" class="get_msg_code" @click="getMegcode" :aria-disabled="flag">{{meg}}</a>
              <span class="error_tip">{{ error.code }}</span>
            </li>

return {
time;30,
meg:"获取短信验证码"
}


 // # 发送短信验证码
getMegcode(){
var m = setInterval(()=>{
        this.time--
        this.flag=true
        this.meg=this.time+'秒后再次发送'
        if (this.time===0){
          clearInterval(m)
          this.time=30
          this.flag=false
          this.meg='获取短信验证码'
        }
      },1000)
this.axios.post("mobile/",{'imagecode':this.imagecode,'code':this.code,'mobile':this.form.mobile})
      .then(res=>{
        console.log(res)
      })
    },

字符串长度的补全

(15条消息) JS字符串补全方法padStart()和padEnd()简介_张晨光老师的播客-CSDN博客_js字符串补齐

# padStart
str.padStart(targetLength [, padString])

# padString
'zhangxinxu'.padStart(15, false);
// 结果是'falsezhangxinxu'

# padEnd
str.padEnd(targetLength [, padString])