本文详细讲解了Vue面试中的常见问题，包括params和query参数的区别，vue mock数据的配置与调用，以及vue组件封装中的props、事件与slot使用。同时，还探讨了初始化页面闪动、禁止弹窗后屏幕滚动、数组更新触发视图更新的策略，以及常用的UI组件库推荐。此外，文中还介绍了vue如何引入本地图片、SASS，修改打包后静态资源路径，以及package.json配置解析等实用技巧。
文章目录
- 51.params和query的区别
- 52. vue mock数据
- 53 vue封装通用组件
- 54.vue初始化页面闪动问题
- 55.vue禁止弹窗后的屏幕滚动
- 56.vue更新数组时触发视图更新的方法
- 57.vue常用的UI组件库
- 58. vue如何引进本地背景图片
- 59. vue如何引进sass
- 60.vue修改打包后静态资源路径的修改
- 61 vue构建初始化工程
- 62 package.json 里面的配置解释
- 63 vue渲染模板时怎么保留模板中的HTML注释呢？
- 64 watch的属性用箭头函数定义结果会怎么样？
- 65 你有使用过babel-polyfill模块吗？主要是用来做什么的？
- 66 说说你对vue的错误处理的了解？
- 67 在vue事件中传入$event，使用e.target和e.currentTarget有什么区别？
- 68 vue怎么实现强制刷新组件？
- 69 vue的属性名称与method的方法名称一样时会发生什么问题？
- 70 vue给组件绑定自定义事件无效怎么解决？
- 71 vue的表单修饰符.lazy
- 72 vue为什么要求组件模板只能有一个根元素？
- 73 EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢？
51.params和query的区别
1.query方式传参和接收参数
传参:
this.$router.push({
path:'/xxx',
query:{
id:id
}
})
接收参数:
this.$route.query.id
注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！
2.params方式传参和接收参数
传参:
this.$router.push({
name:'xxx',
params:{
id:id
}
})
接收参数:
this.$route.params.id
注意:params传参，push里面只能是 name:‘xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！
Query的值携带在url刷新也不会丢失
另外，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示
52. vue mock数据
##1.模拟数据
在根目录下写data.jon
{
"errno": 0,
"data": [
{
"Findex": "Z",
"Fsinger_mid": "static/img/timg.jpg",
"Fsinger_name": "张三",
"Fsinger_tag": "541,555",
"Fsort": "1",
"Ftrend": "0",
"Ftype": "0",
"voc": "0"
}, {
"Findex": "Z",
"Fsinger_mid": "static/img/timg.jpg",
"Fsinger_name": "张三",
"Fsinger_tag": "541,555",
"Fsort": "2",
"Ftrend": "0",
"Ftype": "0",
"voc": "0"
}
]
}
2.将data.json 转成模拟数据
在webpack.dev.conf.js进行配置
const express = require('express')
const app = express()
var appData = require('../data.json')//加载本地数据文件
var list = appData.data//获取对应的本地数据
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
devServer: {
...
before(app) {
app.get('/api/list', (req, res) => {
res.json({
errno: 0,
data: list
})//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
})
}
},
3.vue页面调用
export default {
data() {
return {
singers: []
}
},
created() {
this._getSingerList()
},
methods: {
_getSingerList() {
this.$http.get
最低0.47元/天 解锁文章
扫一扫
5516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
