vue 2的使用心得


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


elementUI 网站快速成型工具

elementUI官网 vue官网 vue-router官网

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

// home.vue中写入
<template>
    <div>
        <router-link to="/nav">跳转页面</router-link>
        <el-button type="primary" @click="goHeader">主要按钮</el-button>
        <router-link :to="{ name: 'header', params: { userId: 123 }}">header页面传参</router-link>
    </div>
</template>
<script>
    export default{
        name: 'home',
        data(){
            return {}
        },
        methods: {
            goHeader: function () {
                // 字符串
                this.$router.push('header/123')
                // 对象
                this.$router.push({path: 'header/0'})
                // 命名的路由
                this.$router.push({name: 'header', params: {userId: 1}})
            }
        }
    }
</script>

<style>
</style>

// 在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如何使用组件
<template>
    <div>
        <steps></steps>   
    </div>
</template>
<script>
// 第一种方法
    import Steps from './steps.vue'  //此处引入
    export default{
        components: {Steps},   // 此处注册组件,调用的时候,要用大写
        name: 'home',
        data(){
            return {
                dialogFormVisible: false,
            }
        },
    }
// 第二种方法
    var Steps = require('./steps.vue'); // 返回的是一个组件,必须注册才能使用
    export default{
        components: {'steps': Steps},
        //components: {'steps': require('./steps.vue')},  // 换了一种表达式
        name: 'home',
        data(){
            return {
                dialogFormVisible: false,
            }
        },
    }
</script>

<style scope>
</style>
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)
<el-button type="primary" @click="componentProp()">主要按钮</el-button>
<!--组件调用 :xx 为设置变量-->
<component :is="dialogTest" :id="id" v-if="destroyDialog"></component>
methods: {
     // 向父页面传过来的值
     componentProp(){
         this.destroyDialog=true;
         this.id = '001'
         this.dialogTest = 'component'
         this.destroyDialog=true;
     },
 }

组件的模版页面

<template>
    <div class="component">
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="活动名称">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false;cancal()">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            };
        },
        // 父页面传过来的值
        props: ['id'],
        methods: {
            cancal(){
                // 父元素为关闭
                this.$parent.destroyDialog = false;
            }
        },
        mounted: function () {
            var that = this;
            console.log(this.id);
            this.dialogFormVisible = true

        }
    };

</script>
<style>
</style>
表单验证
 <el-form :model="edit" :rules="rules">
            <el-form-item label="编码" prop="code">
                <el-input v-model="edit.code"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="telephone">
                <el-input v-model="edit.telephone"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="edit.name"></el-input>
            </el-form-item>
</el-form>
  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('请求方法错误')
    }
});

推荐阅读更多精彩内容