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  // 命令会自动打包，并弹出网页（包含打包文件图）