vue + element 總結 （vue-cli 2）
vue 數據插槽
### 默認插槽
// 當聲明一個組件 child-component
<div id="app">
<child-component></child-component>
</div>
<script>
Vue.component('child-component',{
template:`
<div>Hello,World!</div>
`
})
let vm = new Vue({
el:'#app',
data:{
}
})
</script>
// 如果想在<child-component></child-component>中自定義內容
// 比如 插值 字符串 組件 需要插槽 不然沒有效果如下
Vue.component('child-component',{
template:`
<div>
Hello,World!
// 加上這一句才起作用
<slot></slot>
</div>
`
})
// 沒有插槽的情況下在組件標簽內些一些內容是不起任何作用的，當我在組件中聲明了slot元素后，在組件元素內寫的內容
// 就會跑到它這里了
### 具名插槽
<div id="app">
<child-component>
// slot 對應 solt標簽的 name值 一一對應實現
<template slot="girl">
漂亮、美麗、購物、逛街
</template>
<template slot="boy">
帥氣、才實
</template>
<div>
我是一類人，
我是默認的插槽
</div>
</child-component>
</div>
<script>
Vue.component('child-component',{
template:`
<div>
<h4>這個世界不僅有男人和女人</h4>
// name屬性為名字
<slot name="girl"></slot>
<div style="height:1px;background-color:red;"></div>
<slot name="boy"></slot>
<div style="height:1px;background-color:red;"></div>
// 一個不帶 name 的 <slot> 出口會帶有隱含的名字“default”。
<slot></slot>
</div>
`
})
let vm = new Vue({
el:'#app',
data:{
}
})
</script>
引入文件兩種方法 es6
//導出方式
// export后必須跟語句, 何為語句, 如聲明, for, if 等都是語句, export 不能導出匿名函數, 也不能導出某個已經聲明的變量 可以出現多次
例如
export const bar = function() {}; // 合法
export bar; // 非法
export 1; // 非法
export function foo () {}; // 合法, 后跟的是聲明語句
export { foo }; // 合法, 后面跟的{}理解為語句, 就像if后面的{}一樣
export { foo as bar }; // 合法
export { foo: foo }; // 非法, 后面的{}被解析成對象
// ============================================================================================
// 導出方式
// export default 在整個模塊中只能出現一次, 后只能具體的值, 何為具體的值, 如1, 2, 3, 再比如一個函數聲明(非表達式), 或者是一個類聲明(與函數聲明一個意思), 或者匿名函數, 只要是能用變量接受的都可以
例如:
export default 1; // 合法
export default function foo() {}; // 合法, 因為function foo() {} 能被變量接受, 如 var bar = function foo() {}
export default const bar = 1; // 非法, 因為var a = const bar = 1 是不合法的
export default { foo }; // 合法, {} 被理解為一個對象
export default { foo: foo }; // 合法, 同上
v-model后綴
//不設置.number的情況下即使輸入的是數字也會被當成字符串處理
v-model.number // 只能輸入數字 當input 輸入無限大的值 值自動轉換為 Infinity
v-model.trim // 除去前后空格
v-model.lazy // 當失去焦點時 數據才會響應改變
特殊問題
給el-input 綁定點擊事件綁定不上
原理
VUE中直接在標簽中寫@click事件時，等號右邊的函數會默認為是vm對象的一個方法，因此會在js中尋找_vm.alert方法，找不到會報以下錯誤Property or method "alert" is not defined on the instance but referenced during render，
解決辦法
// 有時候，你可能想在某個組件的根元素上監聽一個原生事件。可以使用 v-on 的修飾符 .native。例如：
<my-component v-on:click.native="doTheThing"></my-component>
用 .native來修飾
vue路由的history模式
當發現刷新會錯亂時候 要記得把 index.html引入文件放到 vue 文件 中去引入 解決問題 其他情況暫時未遇到
history 模式需要 后端配合設置 后端的 服務器配置 不然會 404
vue 自定義指令
delete請求的數據 axios 傳數據
export const delete_rewar = params => { // params{id：1 }
return axios
.delete(`/rewardRule`, {
data: params
})
.then(res => res);
};
put請求的數據 axios 傳數據
export const alter_the_state = params => { // params{id:1}
return axios
.put(
`/agent`,
qs.stringify(params)
)
.then(res => res);
};
get post 清求例子
// GET請求的例子
export const GET = params => { // params{id:1}
return axios
.get(`/`, {
params: params
})
.then(res => res);
};
// POST請求的例子
export const POST = params => { // params{id:1}
return axios.post(`/`, params).then(res => res);
};
表單驗證問題
表單驗證規則
<el-form :model="form" ref="ruleForm" :rules="rules">
<el-form-itme prop="mydata">
</el-form-item>
</el-form>
created（）{
this.$refs.ruleForm.resetFields(); // 重置表單的方法
}
data(){
const betweenInt = (rule,value,callback)=>{
// rule 規則名稱
// value 每個驗證的值
// 驗證不通過 返回
return callback(new Error(`未通過`))
// 驗證通過 返回
return callback()
}
return {
form:{ // form :model
mydata:1, // 可以被驗證
mydata:{
a:1 // 被驗證需要 嵌套一層form 只有form和 item是父子關系才能被校驗
}
},
rules{
mydata:[
// 規則
{ required: true, message: "請輸入規則名稱", trigger: "blur" },
// 自定義規則
{ validator: betweenInt, trigger: "blur" }
]
}
}
}
// 一般點擊提交觸發
// 注意 嵌套時 因為兩層 form 所以 form ref也有兩個 因此 此時也要嵌套
ref .validate(async valid => {
if (valid) {
//結果通過的
}elsr{
}
})
// 實用驗證規則
數字范圍內的 正整數
// 驗證是[min, max]范圍內的正整數
const betweenInt = (min, max) => (rule, v, cb) => {
const isBetween = v >= min && v <= max
const isInt = /^[0-9]+$/.test(v)
if (isBetween && isInt) return cb()
return cb(new Error(`要求是在${min}到${max}的正整數 [${min}, ${max}]`))
}
// 清除單個itme的驗證結果
<el-form-item label="有效期" :label-width="formLabelWidth" prop="time" ref="timeForm"> // ref的方法
<el-radio v-model="radio1" @change="change" label="0" border>長期有效</el-radio>
<el-radio v-model="radio1" @change="change" label="1" border>有效期</el-radio>
<template v-if="radio1 - 0">
<el-date-picker
v-model="form.time"
type="datetimerange"
start-placeholder="開始日期"
end-placeholder="結束日期"
:default-time="['12:00:00']"
:disabled="dis_time"
></el-date-picker>
</template>
</el-form-item>
this.$refs['timeForm'].clearValidate() //清楚單個的驗證
給el-select寫驗證 需要使用 change事件 但是會自動觸發
解決辦法：
// 新增彈窗頁面的話 可以給定默認值 可以不寫驗證
el-select 獲取整條數據 查詢整條數據的方法
get_bus_id(val) { // 當前數據的 val
// 獲取整條數據 遍歷獲取整條數據
const obj = this.bus_data.find(item=>{
return item.appId === val
})
// obj ===> 整條數據
}
el-table
element - message
this.$message.closeAll() // 關閉所有彈窗
this.$message({ // 因為會出現很多個 所以要先關閉再打開
type:warning,
message:"提示"
})
// 也可以統一處理
暫無
element - loading 全局配置
import { Message, Loading } from 'element-ui'; // 導入 loading 模塊
let loading //定義loading變量
function startLoading() { //使用Element loading-start 方法 啟動loading
loading = Loading.service({
lock: true,
text: '加載中……',
background: 'rgba(0, 0, 0, 0.7)'
})
}
function endLoading() { //使用Element loading-close 方法 關閉loading
loading.close()
}
// 因為同一頁面請求不止一個 所以為了解決每次請求啟動一個loading的bug 所以 解決方案如下
//那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事兒就是將同一時刻的請求合並。
//聲明一個變量 needLoadingRequestCount，每次調用showFullScreenLoading方法 needLoadingRequestCount + 1。
//調用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount為 0 時，結束 loading。
let needLoadingRequestCount = 0
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}
//http request 攔截器
axios.interceptors.request.use(
config => {
var token = ''
if(typeof Cookies.get('user') === 'undefined'){
//此時為空
}else {
token = JSON.parse(Cookies.get('user')).token
}//注意使用的時候需要引入cookie方法，推薦js-cookie
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type':'application/json'
}
if(token != ''){
config.headers.token = token;
}
showFullScreenLoading() // 使用定義方法
return config;
},
error => {
return Promise.reject(err);
}
);
//http response 攔截器
axios.interceptors.response.use(
response => {
//當返回信息為未登錄或者登錄失效的時候重定向為登錄頁面
if(response.data.code == 'W_100004' || response.data.message == '用戶未登錄或登錄超時，請登錄！'){
router.push({
path:"/",
querry:{redirect:router.currentRoute.fullPath}//從哪個頁面跳轉
})
}
tryHideFullScreenLoading() // 使用定義方法
return response;
},
error => {
return Promise.reject(error)
}
)
項目文件 可視化大小
首先
npm install --save-dev webpack-bundle-analyzer
然后運行
npm run build --report // 命令會自動打包，並彈出網頁（包含打包文件圖）