尚品汇项目vue2笔记

文章探讨了Vue中v-if和v-show的差异,v-if通过DOM操作实现条件渲染,而v-show通过改变CSS的display属性。路由元信息用于为路由添加自定义属性,编程式路由导航如$router.push()介绍了不同参数形式的使用方法。对于路由参数,文章指出params不能与path同时用于同一路由,params可选传递,为空时应设为undefined。此外,讨论了call()和apply()在改变this上下文及参数传递的异同。

一.v-if/v-show都可以让组件显示或者隐藏 区别在哪里    

v-if是操作dom元素很占用性能

v-show是通过样式控制显示或者隐藏(display:none/block)

二.路由元信息

这个元信息的主要用途就是给路由添加属性,但是普通的添加属性的方式识别不到就有了元信息

三,编程式路由导航(跳转)

$router.push()字符串可以作为参数

$router.push(`${xxx}`)模板字符串里面的字符串作为js表达式解析

$router.push()传入对象作为参数 如果传递的有params参数就要给路由添加名字 不能用path

四设置跳转主页

{path: '*',redirect: '/home',}注意这里的redirect值是另一个路径

路由面试题

1:路由传递参数(对象写法)path是否可以结合params参数一起使用? 不可以:不能这样书写,程序会崩掉

2:如何指定params参数可传可不传?在路径后面加"?"

3:params参数可以传递也可以不传递,但是如果传递是空串,如何解决? 更改params为undefined

:如果指定name与params配置, 但params中数据是一个"", 无法跳转,路径会出问题

5: 路由组件能不能传递props数据?

五call()和apply()的区别

相同点:他们都可以将一个对象的上下文更改this指向

不同点:传递参数时候call用逗号隔开,apply用数组传参

### 硅谷 Vue2 尚品项目资源总 #### 项目源码下载 对于硅谷 Vue2 尚品项目的源码,可以通过访问 Gitee 平台上的仓库来获取完整的项目文件。具体链接如下[^1]: - **Gitee 地址**: [https://gitee.com/HusePanghu/project-SP](https://gitee.com/HusePanghu/project-SP) #### 文档与教程 为了更好地理解和开发该项目,建议查阅官方文档以及相关技术博客中的详细说明。 - 官方 Vue.js 文档提供了关于框架的基础知识和技术细节,这对于理解如何构建和优化应用程序至关重要。 - 技术博客文章也包含了丰富的实践经验和技巧分享。例如,在 优快云 上有一篇详细的笔记介绍了此项目的实现过程[^5]。 #### 关键特性解析 ##### Less 文件支持 由于项目采用了 LESS 预处理器编写样式表,因此在编译过程中需要配置 Webpack 或其他工具链以确保能够正确加载并转换这些 `.less` 文件到标准 CSS 格式[^2]: ```javascript // webpack.config.js 中的部分配置项可能看起来像这样 module.exports = { module: { rules: [ { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ] } }; ``` ##### 动态路由控制 通过向 `vue-router` 的路径定义添加元数据字段(如 `meta.show`),可以在全局范围内轻松管理特定视图组件的行为逻辑,比如决定页脚是否可见[^3][^4]: ```html <template> <div> <!-- ... --> <footer v-show="$route.meta.show"></footer> </div> </template> <script> export default { // ... } </script> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值