VUE day_03(7.19)图片资源存储位置与引用、购物车案例、自定义指令、网络请求、过滤器、解决防盗链

最新推荐文章于 2024-03-28 09:16:49 发布

加1床铺盖

最新推荐文章于 2024-03-28 09:16:49 发布

阅读量510

点赞数 1

分类专栏： VUE(7.15-7.28）文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_70328115/article/details/125866463

版权

VUE(7.15-7.28）专栏收录该内容

13 篇文章 1 订阅

订阅专栏

复习

1.选项: 可选的配置项

（1）数据

data: 在脚手架项目包里必须是函数类型, 和组件复用有关 -- 用于存储数据
methods: 存放方法, 通常会关联事件
computed: 计算属性. 存储在这里的函数会自动更改为 get 计算属性 -- 特点: 使用时不需要() 就能自动触发

（2）DOM

el: 一个id选择器, 代表 vue对象管理的元素

2.指令: vue提供的一套元素的属性

（1）v-text: innerText原样显示文本

（2）v-html: innerHTML 解析HTML代码

（3）v-show: 利用css 显示或隐藏

（4）v-if: 利用移除DOM实现隐藏

v-else
v-else-if

（5） v-for: 遍历数据生成元素

v-for="值 in/of 数组"
v-for="(值, 序号) in/of 数组"
v-for="值 in/of 数字" 特色:可以遍历数字
key属性: 为元素添加唯一标识, 当数组发生增删操作时, 直接复用相同唯一标识的元素, 提升效率

（6）v-on: 事件绑定

@事件名="方法名": 参数1是事件参数
@事件名="方法名(参数, $event)": 自定义传参

（7）v-bind: 属性绑定

:属性名="值"

（8）v-model: 双向数据绑定, 适合表单元素 -- 下拉,单选,多选, 输入框...

方向1: 数据绑定给DOM元素
方向2: DOM元素发生变化, 会更新数据

（9）v-pre: 原样显示标签内容, 不解析{{}}

（10）v-once: 一次性渲染

3.动态样式: :class="{样式类: true/false}" 真生效, 假不生效

4.项目包的使用

必须采用 vue项目包提供的服务器才能运行vue项目
服务器的启动命令: npm run serve
启动后, 会提示访问的路径, 正常是: localhost:8080

一、图片资源存储位置与引用

在VUE中，图片需要存储在assets里，assets:资源 -- 图片/CSS/音频/视频...

关于图片：

项目中自带webpack模块，会自动对项目进行打包，剔除代码中没有用到的资源，假设assets里放了100个图，代码中就用了10个，打包时会自动只打包10个
在img的src中书写图片的路径，会被认为是需要的图片
问题点：JS中书写的图片路径，默认会识别为普通的字符串，而不被打包，必须用require方法引入这个图片，才会被识别到

二、购物车案例

步骤

制作假数据，用数组items存储
制作表格，利用v-for循环把数据显示出来
实现按钮 + 和 - 操作
合计功能（难）：利用计算属性制作一个函数，利用 reduce 合并得到总价格 -- 计算属性：使用时不需要()，会自动触发，不适合事件-> 事件需要通过事件触发 --reduce需要复习JS高级的数组高阶函数
全选操作： -- 给全选按钮添加 change事件来触发; --两种方案读取全选按钮的值：DOM事件参数（作者不推荐）或v-model 双向绑定； --读取值后，遍历每个元素，修改其勾选的值（和全选按钮一样）。
单选：给每个单选框绑定事件，然后用every来获取是否每个都勾选了，修改全选的值

此案例用到day_02里的v-for循环元素方法（依次展示属性的对象到HTML）、数据的双向绑定（选中单选框传递布尔值）和给按钮设置动态class（数量的加减）赋予功能，需要关注的点就是computed计算方法reduce（详情在JSCORE day_04）和全选按钮的设置的methods方法，还有单选框的绑定事件。

1.购物车合计计算：

2. 点击全选按钮改变每个数据项的勾选状态：

（1）DOM

首先要知道如何读取本次事件，事件导致勾选框变化成什么了，就需要传递事件参数event,简写e，全选按钮的是否勾选的布尔值在 target里的checked里（可以打印e找一下），所以使用DOM方法的话，就用e.target.checked取出表示勾选状态的（布尔）值，再遍历数据，把每个数据项的勾选状态都跟全选按钮统一。