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