尚品汇Vue2笔记

文章介绍了前端开发中的一些关键技术点,包括使用Axios进行HTTP请求,设置请求拦截器和响应拦截器,以及v-for循环。事件委派的概念被解释,强调了利用冒泡原理优化事件处理。文章还涉及了Vue中的条件渲染和动画效果,以及如何使用防抖和节流技术。此外,讨论了直接引入JSON文件的原因和Mock数据的使用,最后提到了$nextTick在DOM更新循环中的作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一.axios请求

axios.create(中间添加配置对象)baseURL就是基准url 

这个和html中的base元素 设置href属性 差不多

二.请求拦截器和响应拦截器

三.v-for 循环

:key 是卸载那个v-for 的表达式外面的

四.事件委派

        事件的委派也叫事件代理,简单理解就是:原本是某个元素需要绑定的事件,现在将这个事件交给别的元素去做,正常我们把它交给父级元素,比如:原本是给li绑定点击事件,现在交给它父级ul绑定,利用冒泡原理,点击li的时候会触发ul的事件;

五.判断是否给元素添加类名

:class="{ cur: currentIndex === index }"> 以对象形式 

六.怎么获取元素自定义属性

节点有一个属性dataset 值是一个对象 包含自定义属性

七.节流 和 防抖

防抖:事件多次触发 会中断上一次事件的触发只保留最后一次_.debounce(防反弹)

节流: 一定时间内只能触发一次 频繁触发改为少量触发_.throttle(节流阀)

用lodash插件实现 (自动暴露一个函数_内部有方法)

八动画

过渡动画的前提:元素或者组件有v-if或者v-show

在需要写动画的组件上用 transition包裹 取名 注意添加样式时候用 .name

transtion过渡 duration持续时间  -delay动画延迟 -time-function 动画变换速率的效果图 linear表示线性

animation 动画 动画是过渡的增强 动画分为2部分 

首先用 animation-duration等属性 规定动画样式

其次用关键帧 @keyframe +name{//这里的name是动画规定的名字

from to 规定应用动画的属性

更高级 -变换 transfrom 旋转 

九为什么可以默认直接引入json文件

因为图片和json是默认暴露的

mock模拟数据 mock.mock()

第一个参数是访问路径 第二个参数是数据本体

十.$nextTick的理解(一个绑定在vm身上的方法)

在下(不是第一次)次DOM更新循环结束(v-for结束)后 执行延迟回调,在修改数据之后----引出 swiper的交互必须在结构写好之后才能被调用.

十一.getters是为了简化仓库中的数据而存在 

### 尚硅谷 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、付费专栏及课程。

余额充值