vue 2的使用心得

---

title: vue 2的使用心得
date: 2017-05-25 18:13:01
tags: ['vue 表单验证','vue跳转页面','vue拦截器']

---

elementUI 网站快速成型工具

elementUI官网 vue官网 vue-router官网

页面之间的路由配置及传参

// home.vue中写入





// 在router.js文件中写入
// 引用模板
import header from '../components/header.vue'
import home from '../components/home.vue'
import nav from '../components/frame/nav.vue'
// 配置路由
export default [
    {
        path: '/',
        component: home
    },
    {
        path: '/nav',
        component: nav
    },
    {
        path: '/header/:userId',
        name: 'header',
        component: header
    }
]

// 接收参数  this.$route.params.userId

vue如何使用组件

vue2.0之axios使用

发送一个get请求：
axios.get('/user', {
params: {
ID: 12345
}}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
第一种方法：
 var params = {
     loginCode: this.loginCode,
     passWord: this.passWord,
     url: 'yatouLogin'
 }
 // 发送post请求把对象转成字符串
 var postparams = new URLSearchParams();
 postparams.append('loginCode', this.loginCode);
 postparams.append('passWord', this.passWord);
 this.$http.post('yatouLogin', postparams).then(function (res) {
     console.log(res);
     if (res.data.success) {
         that.$router.push({path: 'nav'})
         localStorage.clear('powerList');
         localStorage.setItem('powerList', JSON.stringify(res.data.data))
     } else {
         that.$message.error(res.data.errMsg);
     }
 }).catch(function (response) {
     console.log(response);
});

第二种方法：
在main.js中配置axiso的属性
import axios from 'axios'
import qs from 'qs'

Vue.use(qs);
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';           //配置请求头
axios.defaults.baseURL = 'http://wx.bokedata.com/yatou/';
//设置携带session，解决跨域
axios.defaults.withCredentials = true;
Vue.prototype.$http = axios;
const router = new VueRouter({
  routes
})
// 拦截器处理post的参数
axios.interceptors.request.use((config) => {
    if(config.method  === 'post'){
        config.data = qs.stringify(config.data);
    }
    return config;
},(error) =>{
     _.toast("错误的传参", 'fail');
    return Promise.reject(error);
})
// 调用接口
var params = {
    loginCode: this.loginCode,
    passWord: this.passWord,
    url: 'yatouLogin'
}
this.$http.post(params.url, {
    'loginCode': params.loginCode,
    'passWord': params.passWord
}).then(function (res) {
    console.log(res);
    if (res.data.success) {
        that.$router.push({path: 'nav'})
        localStorage.clear('powerList');
        localStorage.setItem('powerList', JSON.stringify(res.data.data))
    } else {
        that.$message.error(res.data.errMsg);
    }
})

调用组件及传值问题

向main.js中引入组件
import componnets from './components/common/component.vue'
Vue.component('component', componnets)
主要按钮


methods: {
     // 向父页面传过来的值
     componentProp(){
         this.destroyDialog=true;
         this.id = '001'
         this.dialogTest = 'component'
         this.destroyDialog=true;
     },
 }

组件的模版页面

表单验证

 
            
                
            
            
                
            
            
                
            

  data(){
       return {
            edit: {},
            rules: {
                //编码输入框验证规则
                code: [
                    {required: true, message: '编码不能为空', trigger: 'blur'}
                ],
                //名称输入框验证规则
                name: [
                    {required: true, message: '名称不能为空', trigger: 'blur'}
                ],
                //备注输入框验证规则
                telephone: [
                    {required: true, message: '电话不能为空', trigger: 'blur'},
                    {
                        validator(r, v, b){
                            (/^\d{2,}$/).test(v) ? b() : b(new Error('请填写手机号'))
                        }
                    }
                ]
            }
        }
  

拦截器的使用

axios.interceptors.response.use(function (response) {
    // 处理响应数据
    if (response.data.respCode == '000001') {
        // ElementUI.Message.error('服务器异常')
        ElementUI.MessageBox('此登录信息已过期，请重新登录', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
        }).then(() => {
            router.replace({
                path: '/',
            })
        });
    }
    return response;
}, function (error) {
    // 处理响应失败
    if (error.response.status == 500) {
        ElementUI.Message.error('服务器异常')
    } else if (error.response.status == 404) {
        ElementUI.Message.error('资源不存在')
    } else if (error.response.status == 405) {
        ElementUI.Message.error('请求方法错误')
    }
});