文章目录
- 1. ElementUI表格中的链接实现跳转
- 2. style标签中的scoped属性
- 3. mounted和created的区别
- 4. Vue中watch的作用
- 5. 插槽: slot-scope="scope"
- 6. 跳转
- 7. Div内部文字使用省略号表示超出部分
- 8. 父组件向子组件传值
- 9. 子组件向父组件传值
- 10. 路由跳转传值
- 11. 路由切换后,回到网页顶部
- 12. Vue 中的 beforeEach
- 13. v-bind的使用
- 14. v-model的使用
- 15. v-on 的使用
- 16. 自定义分页器
- 17. css中position的使用
- 18. 普通函数与箭头函数=>
- 19. 解决跨域问题
- 20. 前端时间格式调整
- 21. vue自定义弹窗
- 几个报错问题的解决方案
- 不错的资料
1. ElementUI表格中的链接实现跳转
<el-table-column align="center" label="链接跳转" width="120">
<template slot-scope="scope">
<a :href="'/test/'+scope.row.id"> <!-- 拼接要跳转的url -->
进入
</a>
</template>
</el-table-column>
2. style标签中的scoped属性
<style lang="stylus" scoped>
</style>
scoped参数表示这个标签里的所有样式只在当前这个组件中生效,在其他的组件中不会起作用
可以避免不同css文件中变量的污染。
3. mounted和created的区别
created:在网页加载html前调用,一般是先初始化值后渲染模版
mounted:在网页加载html后调用,一般是先渲染模版后初始化值
4. Vue中watch的作用
watch主要起到“监视”的作用,也就是监视数据(或者变量)的变化。
具体使用场景:比如父组件向子组件传值的时候,每次父组件的值一旦变化,子组件需要知道这个变化,这时候就要用watch来监听
watch: {
status: { // 需要监听的变量是:status
handler(newName, oldName) {
alert('status变化了')
},
immediate: true, // 表示当值第一次绑定的时候立即执行监听函数
},
}
说明:
设置deep: true 则可以监听到对象中某个属性的变化,不设置只能监听普通变量,例如
watch: {
'Obj.name': {
handler(newName, oldName) {
alert('Obj.name改变了')
},
deep: true,
immediate: true
}
}
参考: vue中watch的详细用法
5. 插槽: slot-scope=“scope”
6. 跳转
- 跳转到名字为Test的组件中
<router-link :to="{ name: 'Test' }">
更多
</router-link>
- 其它
let path = this.$route.query.redirect;
// 下面两个有区别
this.$router.replace(path)
this.$router.push({ path: "mediaContent/" + row.id });
7. Div内部文字使用省略号表示超出部分
css代码:
overflow:hidden;
white-space: nowrap;
text-overflow:ellipsis;
参考 : Div内部的内容超出部分显示省略号(仅仅只有一行内容
8. 父组件向子组件传值
父组件部分代码:(向SubComponent组件传status值为例)
<el-tab-pane >
<SubComponent v-bind:name = "hello"></SubComponent>
</el-tab-pane>
子组件接受值
export default {
name: "SubComponent",
props: ['name'],
}
9. 子组件向父组件传值
子组件:绑定数据(张三 ====>> user)
this.$emit('user', '张三')
父组件
- 绑定子组件传入的key : user 到函数getData中
<router-view @user="getData">
</router-view>
- 在函数中处理数据
getData(msg) {
this.getUser = msg
},
10. 路由跳转传值
根据组件名字跳转到TestComponent组件,并且传入status参数
<router-link :to="{name: 'TestComponent', params: {status: '0'}}">
查看详情
</router-link>
TestComponent 配置如下
- 路由配置:
{
path: '/testurl/:status', // :status 接收参数
name: 'TestComponent ', // 组件名字,上面就是根据组件名字跳转
component: TestComponent ,
props:true, // 一定要写
meta:{isAuth: true} // meta用来存放自定义的信息,比如这个isAuth用来表明这个路由是否需要鉴权
},
- 组件中配置
export default {
name: "TestComponent",
props: ['status'],
}
11. 路由切换后,回到网页顶部
基本原理:使用 document控制回到顶部:document.documentElement.scrollTop = 0;
实践:在路由切换的时候,进行控制,如:
router.beforeEach((to, from, next) => {
document.documentElement.scrollTop = 0;
next(); // 必须调用
})
12. Vue 中的 beforeEach
每次通过vue-router进行页面跳转,都会触发beforeEach这个钩子函数,这个回调函数共有三个参数,to,from,next这三个参数,to表示我要跳转的目标路由对应的参数,from表示来自哪个路由,就是操作路由跳转之前的,即将离开的路由对应的参数,next是一个回调函数,一定要调用next方法来resolve这个钩子函数。
例如:下面用一个登录拦截的例子来看用途
router.beforeEach((to, from, next) => {
// 如果已经有Token(表示已经登录了),可以到任何地方
if (window.sessionStorage.getItem("tokenStr")) {
next();
} else {
// 如果要访问的资源需要登录才能访问,则跳转到登录页面,并且登录成功后直接重定向到要访问的页面
if (to.meta.isAuth) {
Message.error('还没登录,请先登录!');
next('/login?redirect=' + to.path);
} else {
// 访问的资源没有登录要求,直接访问
next()
}
}
})
13. v-bind的使用
作用:用于将data中定义的数据渲染到页面,但是页面中修改的数据不能回传到data域中。(单向绑定)
例如:由于img里面的数据需要动态获取,也就是要从data中获取,这个时候可以使用v-bind:src或者:src来获取,单纯使用src是拿不到数据的。
<img v-bind:src=picUrl>
export default {
name: "TestComponent",
data() : {
return {
picUrl : "http://xxxxxxxx.jpg"
}
}
}
14. v-model的使用
v-bind只能单向绑定,也就是只能 data ==> 页面
为了能够让页面中用户的修改的数据回传到data中,也就是做到 页面 ==> data ,这个时候就需要使用 v-model ,并且它只能作用在表单元素中,比如input、radio、等等,它的数据流向是: data ==> 页面 和 页面 ==> data
例如:
<radio v-model="role" >英雄</radio>
export default {
name: "TestComponent",
data() : {
return {
role : "英雄"
}
}
}
15. v-on 的使用
v-on主要用来绑定事件,比如鼠标点击事件: v-on:click=“testClick” 等价于 @click=“testClick” ,然后在method中定义testClick方法来处理。
16. 自定义分页器
-
使用ElementUI中的pagination
-
如果需要强制修改样式,需要使用/deep/ ,原因:vue组件中,在 style 设置为 scoped 的时候,里面在写样式对子组件是不生效的,如果想让某些样式对所以子组件都生效,可以使用 /deep/ 深度选择器。
在main.js中修改如下内容:
import Vue from 'vue'
import ElementUI from 'element-ui'
//导入中文
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
Vue.use(ElementUI, {
locale: zhLocale,
});
zhLocale.el.pagination = {
goto: '跳至',
pagesize: '条/页',
total: `共计 {total} 条`,
pageClassifier: '页',
};
17. css中position的使用
position定位:
- 当前元素为 relative ,则使用偏移量后,元素相对自己移动
- 当前元素为absolute:
- 若其祖先元素没有设置position,则相对html根元素来移动
- 若其祖先元素有设置position,则根据最近的设置了position的元素来改变偏移量。
一般来说,absolute使用较少
18. 普通函数与箭头函数=>
箭头函数指向其定义环境,this的指向无法通过其他方式改变;
function指向其直接调用者,一般来说最通常的是window对象,对象属性则指向改对象。
遇到过一个问题:axios报错Uncaught (in promise) TypeError: Cannot set properties of undefined (setting ‘wenben‘)
19. 解决跨域问题
注意:需要根据vue2 还是 vue3选择不同的解决方案:
参考:vue怎样解决axios请求出现前端跨域问题(实例详解)
20. 前端时间格式调整
将前端的格式2022-11-22T12:23:00.000+00:00转换为正常的yyyy-MM-dd格式
- 方法一:在后端中使用注解
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
private Date createTime;
参考:vue时间格式2021-11-21T12:30:00.000+00:00转换yyyy-MM-dd HH:mm:ss
21. vue自定义弹窗
思路:
- 使用v-show根据条件设置元素是否弹出
- 设置一个遮罩层,让底色变暗