Vue技术总结

Vue技术总结

事件对象$event

$event

常见用法:

# 启用一个事件
<div @click="clickme($event)">click me</div>
# 在方法中接收事件对象
clickme(e){
	console.log(e);
}

键盘事件

@keydown.enter

应用场景

输完密码回车提交表单

过滤器

超过长度为5的截断

定义(尽量都定义成为全局的)

Vue.filter(“cut”,function(str){
return str.length<5?str:(str.substr(0,5)+"…");
})

使用

<h3>{{name | cut}}</h3>

Axios

vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现
axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护

安装Axios

进入项目文件夹,运行以下指令

# 为了防止出现奇葩的问题,统一用npm+指定镜像的形式安装
npm install axios -S --registry=https://registry.npm.taobao.org

使用Axios

Get

// 为给定 ID 的 user 创建请求
axios.get('你的请求路径')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {//一般不写catch
    console.log(error);
  });

Post

总之Post发送的方式不是Form形式,后台接收不到,用以下方式请求

import axios from 'axios'
let data = new FormData();
data.append('code','1234');
data.append('name','yyyy');
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})

Put,Delete请求参照以下通用方式(除了Post都适用)

axios({
  method:'请求方式:get,post,put,delete',
  url:'请求路径'
})
  .then(function(res) {
  console.log(res.data);
});

vue-router

安装

npm install vue-router -S --registry=https://registry.npm.taobao.org

用法

用的最多的

<route-link >点我跳转</route-link>

更多请参考

https://router.vuejs.org/zh/guide/

路由拦截

//to 要路由的地址
//from 路由来的地址
//next 放行
router.beforeEach((to,from,next)=>{
    if(to.path==='/'){
          next()
    }else{
          //如果没有token值,则跳到登录页面
          next({path:'/'})
    }
   next()
})