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('請求方法錯誤')
}
});
