vue + element 總結 （vue-cli 2）

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  // 命令會自動打包，並彈出網頁（包含打包文件圖）