00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们学习了will的模板语法,微model,那到这里呢,咱们基本上把will的呃,基础语法咱们都接触过了。嗯,如果后边有用到咱们没有接触过的一些语法,咱们再把它加上,因为有一些呢,也有零散的一些语法,但是他们不成体系,咱们就不统一讲了,用到了再说,那基本上没讲到的呢,咱们也用的几率也比较小,那这节课呢,咱们来学习一个案例,购物车的一个案例啊,当然了,你你可以做一个其他的相关的案例啊,那我选这个购车案例呢,目的就是把咱们学习的will的模板语法,大部分咱们给它串在一起。那比如说这个案例里边,我们肯定会用到像属性的绑定,对吧,事件都可以用到计算属性等等,呃,循环便利,微胖后微胖衣服这些呢,咱们都可以用到。那这节课呢,我们就来做一个电压力还是打开我们的。呃,成立界面,当然了啊,上节课的例子我已经给大家保存了,那这节课咱们就按照这个例子直接写,那我们通常我们在做购物车的时候都是什么?我们有一个商品列表,选择购买,然后我们进入购物车,就像我们前边做过的一个案例一样,我这块进全屏一下,比如说。
01:15
嗯,有一个shop e丢这个,那当然这个我可以做成登录之后和不登录都可以购买的一个,你比如说购买新数PB点开,在这里边加入购物车去购物车,那这是一个购物的流程,对吧,然后点点点点对吧,下边的数字也跟着变化,这就是购物车,那当然了,咱是简版的,大家看到购物车呢,是我们在选中商品的时候,选中商品的时候,当地商品如果已经买过了,那他就会把数量合在一起去,把数量合到一起去。这样也可以减。对吧,当减到一的时候呢,就不需要我们减了,当加的时候加到一定程度,也就是上架上去一共十件,你不愿补肯定不会让你买11件的,有这样的一个情况,这就是咱们实际的一个购物车的一个情况,当然了,咱就模仿着只做购物车简单的功能,所以呢,购物车添加数据咱们不是从商品列表里边选择的,那直接我们在。
02:07
呃,数据源这块去写,这样的话,当我们把购物车让他转变成订单的时候,我们直接也把这里边的数据,购物车的数据提交过去也就可以了,那这里边我们做一个购物车列表,我们就叫做CT list,因为购物车都是临时的,对吧。购车都是临时的,为什么说购物车是临时的数据呢?因为我们可以清除购物车,对吧?每个人有一个自己的购物车,所以呢,它不是持久的一个数据,通常呢,我们用30保存,当然了,如果用数据库保存,用户下次再登录的时候呢,还可以把他没购买的商品给我们显示回来,当然是完整的购物车的一个一个方案了,我们这里边先简单做一下,当然购物车有多件商品,我们肯定用什么用数组来做,那数组里边呢,每购买一件商品,那我们就把它做成一个对象,比如说有ID,默认是一吧,当然这就是商品的ID啊。购买那个商品ID,或者是你把它理解成购物车的ID也可以对吧,那咱们商品ID,比如购物车里边肯定得保存存商品的名称,商名称,那我们就叫做用一个负面号啊。
03:04
细说TP,然后商品呢,肯定都是有价格的,在购物车里边用当时购买的那个价格会放进去啊,当然有原价,有购买的价格放进购物车呢,就当时选中购买的价格,当然原价放进去也可以,所以购物车信息你放什么都可以,那比如说我们为了呃,咱们计算方便,我给他一个十块钱啊,当然你要是有零有涨的,咱们看结果的时候,你感觉不太准确,等我们都做完了之后,我们再把价钱改回原来价钱,这样就没问题了,所以在做例子的时候,价钱你设置一块两块,这样的话,我们简单的计算,我们看结果的时候就知道正确不正确。所以是价格,咱们得加一个购买数量,比如说默认都是一个数量。啊,有名字有价格的购买数量暂时就这些就可以了啊,当然了,你想放其他信息都可以放,比如说我们这块有五六本书,假如说这块第二本书,第三本书,第四本书,第五本书,当然你不一定做不书的,做什么都行,比如说啊细说呃,网页制作,网页制作细说javascript语言。
04:08
然后C说鲍和鲍,然后C说嗯,还有一个阿贾克斯。与。然后细说,嗯,HTML5高级API。这样的一个列表,那这个列表呢,我们想做购物车,肯定是这只是数据源对吧,用户操作形成的一个数据,那这个数据源呢,我们需要以表格的形式在我们呃这个位置显示,那我们就做一个table。Table,然后在table里边我们用嗯,TR做成一行,当然了,我这边给个标题写PTL,你用什么给标题都行啊。写这H1,我们这块还一个购物车,我它放在中间,用这个标签一思的放在中间,然后呢,我们用THTH来做字段,就是标题,呃,字段名称,第一个呢,我们做一个控制的,因为我们有这个复选框,然后我们第二个比如说呃,就是商品名称。
05:12
商品名称。那第三个商品价钱,商品数量,然后操作这么几个吧,嗯,一共是五个商品名称,商品价格。嗯,价格商品数量,然后呢,这块是购买数量。购买。数量,然后呢,有一个操作,比如说我们购物车我们选错东西了,我们删掉对不对,假如说我这块再加一个,再加一个编号吧,购物车的编号加一个六个一两三四五六六个,那我们下边呢,就需要再来一行,再来一行,那在这一行呢,下边就是数据,数据呢,那我们肯定是便利的数据,数据呢我们用啊。便利的数据,那我们这块来个V啊,负便利什么呢?便利这里边的。
06:06
哦。便利这里边的,我们这里边有个购物车list,购物车列表对吧,便利这个,那我们几个itin这样的话,便利这里边的购物车的一个数量。购物车里边商品,也就是下边这个里边,然后分别我们显示这里边的每一个字段,比如说。嗯,这块就用TD了表格了,第一个呢,我们是input来一个复选框c ec boxs,这样的话有选择性的往呃服务器提交购买,但我不删除,想留着这次不买,我先下次再买,所以呢,加一个选择框,然后TD我们再加上名称,那用差值的方式在这块通过i.name对吧,把名字放在这块。然后我们再把嗯,价钱PI价钱写错了,也用差值,差值的方式我们加上。呃,it.pp价钱,然后呢,我们再来一个TD。
07:05
用插值的方式,IM nu数量,然后不是数数量,我用的不是NT,用的是这个,然后操作。这里边我们用一个A标签吧,A标签当然你用一个按钮什么都可以啊,删除,然后我们这里边只要它的时间过往或提交,所以我们加上井号就行了,然后数量这里边。这边有边有错TR,因为我们加上这个TR了,我们就得加上加微了,咱们说了就必须得加什么加一个。K对不对?K是谁呢?那就是IM里边有一个ID,这个ID商品ID肯定都不重复的,所以我加上商品ID就可以了。嗯,样式这块不好看对吧,不好看,一会我们再调,嗯,先这样,那咱们就加上这个,嗯这块啊,在这里边写样式,那我们加上table。嗯,给table一个样式宽度,比如说给上600这个距离,大概是600的像素,然后包一个像素。
08:06
你看600个像素包的一个像素实现的井号灰色就可以了,只有这个有。有颜色,然后呢,我们TD。TH这两个我们一起改包一个像素的直线的井号,这个呢。有那表格,然后我们在呃PARTY10个像素。让他们让距离远一些,好像还少一点操作,删除商品,嗯,名称商品价格上面你看那主播的,我们就看出来它有问题了,对不对,这块商品名称,商品价格,商品数量删除12345列。少一个什么,就会少了一个ID。不然的话,对不上。那这个就对上了,对吧,这是这个格子,那我们就对上了这些东西样式,这个样式中间有双线的,把这个格子和格子之间的虚线我们给去掉,Table里边的,呃,Co包应该是里边的这个。
09:10
属性,让他把这双线踢倒,这样看起来我们更好一些,看起来更好一些,嗯。然后这些加上去了,那我们还需要一个总价对不对,当然这里边我也可以给这个TH单独一个背景色BCK背景颜色给它区分井号C西西。背景颜色稍微变化一下,这样的话字段和这些东西给区分开了,然后我们再下边计算,还得加总价,这里边还有一个数量的问题,把样式放在这儿,正好有个数量,数量呢,我们加两个按钮。加两个按钮,一个是BOT to,一个是减号按钮,然后一个。一个是加按钮。这两个钮。呃,中间放数量,但是中间你可以做一个表单都没问题啊,然后呢,我们下边还需要一个。总价,因为购买商品之后,选择哪个商品,一定给我看一下总价对不对,然后T再来一个TD这块来个总价,总价,然后我们再来一个价格,假如说没估着什么价格,我先随便先标个0.0吧,因为咱们得通过计算才出来了,但它显示在这不好一两三呃三个让这个提示的总价Co。
10:25
L让它占三个,然后后边呢是一两三也是三个按钮,那我们这块也是C等于三。就可以了,对吧,这样就可以了,然后呢,稍稍有点滚动条,我们把这个。放这边一点。这样的话就没有条看上去会稍微好一些,这就购物车。嗯,这是只是购物车的一个一个外观的一个写法,一个界面的写法,那我们现在就开始做这里面操作,那你想先操作什么呢?操作什么都可以,你比如说。我们先写这个,呃,数量,这个数量加加减减,那数量加减减的,那我们就需要加事件对不对,这块加上哦得加什么I for click点击的时候加IK点击的时候我们叫什么,直接让这里边的IM里边有个C让它减减对吧,那如果。
11:18
加数量嘛,当然我们这块可以对应一个方法,就咱们前面都说过了,对不对,数量加加,这样的话,我们就可以让这个数量加减,对吧。当减到一定程度了,你不能是负的,对不对。不能是负的,你购物车一定不能负的,那我们呢,如果到一的时候就不让这个按钮点了,让它变成灰色,那咱们任何一个表单都有一个disabled对不对,这这个,那我们假如说绑定这个属性,就是咱们说的绑定属性那个加个冒号,那我后边是不是就可以等于。呃,里边写语法了,里边写真假值,真的对吧?就相当于有效,假呢就相当于没效对吧?就指真假值,把它变成不尔型的真假值,那这里真假值我们就可以这么判断,im.co这个数量如果等于小于等于。
12:03
小于等于一的时候,那我们将的是针对不对,是针的话,DCA就有效,那就你看这都是小于等于一的这80,也是就是咱们默认刷新的时候对吧。姑你看结果加一的时候加到这块,这块才可以减,减到一的时候再点就没有用了,所有一就不用了,但是这个地方只是在界面这块限制啊,那用户如果模拟表单去提交的话,你还是限制不了的,所以在服务器端接口,那肯定得限制数量不能小于一,对吧,因为咱们现在是去前端只学界面,能在界面做的,那现在桌面界面做像这样表单的东西,界面验证一次,那么界面只是一个均子的一个协定,就不是让你有一个误操作,但是不能实际控制这个数向服务器提交。那用户如果改变一下对吧,用F12C这里边改变界面,然后提交过去一样可以去处理对不对,那加减咱们讲完了,那他这里边这个总价钱,咱们还需要处理一下总价钱还需要处理一下总价钱怎么处理呢?通常这个咱肯定用计算属性,对不对?用计算属性,那计算属性呢,我们可以在这个地方。
13:04
加一个computer对不对。计算,计算呢,这里边我们就来一个叫做总价钱TTLPI总价钱,然后这里边可以有get可和S方法,那我们现在只要这里边get方法过取总价,那当然了,你可以用前面咱们学过的那个计算属性,就是那个数组里边高级函数六次啊,Map啊,过滤啊那些做,那那原来咱们直播,我这会直接给大家写一个循环吧,Light I等直接用那个嗯,In off,那个off那种方式去做,那这里边比如说编辑书,每本书那变的每本书of,那从哪个里呢?从这次里边CA。嗯,CRT购物车列表里边我们获取所有的数,那不可能代表循环的每一项对不对,代表循环的每一项,那我们总价呢,就是让这里边什么,让这里边每本书的价格乘以这个数量,然后再下,对不对?所以呢,我们在上边先做一个let总价格。
14:04
等于零这样的一个价格,然后呢,用sum加。等于让这里边的price,这个book里边的price价钱对吧,乘以book里边的。数量。这个价钱,嗯,这个价钱乘以这个数量点com,你看这样的话,我们再返回sum,这就是我们购买的这样的一个价格,这里边计算属性,计算属性大括号我刚写错了吗。啊,这块写错了。这里加上。这个。好,那这样的话,你看我们现在把这个计算属性总价我们再放到哪,用差值的方式放到我们临时放到000的这个位置,这个位置对不对,那我们就能得到总数的价格。那六十一共六本书是60,那我现在加一,那因为咱们是声明式的对吧,也是响式的数据,所以呢,这里边变,那我现在改变数量是不是就在改变这里的数量,这里数据变它乘以它就变,乘以它变的话计算属性对吧?那相乘就变,所以呢,你看我们就很容易把这个弄出来,如果咱们不用VE,不用这种详式和生命式这种方式的话,那我现在改变数量也好,对吧?那我们得用盗墓的方式,这种操作有可能比这种更麻烦,对吧?反正也差不多,但我觉得没有这种好理解,你看直接就可以给我们变数量,对吧,就可以了。
15:28
那有这个价钱一般呢,我们都需要前边用一个,当然可以在这里边用自动券链接的方式,通常我们都是用。前面加一个就是比正比字体稍微小点,别太突出这个前的符号对吧,然后后边呢,两位小数,咱们一般在这里可以用系统里边的方法保存两位。这样的话,你看十块钱对吧,就可以有这样的这些房稍微小点好看一些,当然我们这会可以有对吧。然后我们在这个地方。在这个地方也加上这个,这块也加上to,哎,两个小数,那我们这块是不是也变成这个了,那么说了,你每一个都加,那有接触过VE的知道,那我们是不是可以用过滤啊,就老师基本语法里边你没讲过什么过滤啊,什么叫过滤啊,就是相当于我们在很多模板里边都有这样的一个操作,就是假如这个名字我现在保存多少名称后边加一个,正好调一个函数,那相当于这个名字。
16:24
什么传到这个函数里边,在函数处里完又把结果放到这里面对吧,然后呢,你还可以过滤多个,你比如说价钱,假如说这个价钱我不在后边处理加钱加钱这块对吧,那我直接假如不用这个处理,我加个竖线,然后自己写过滤方法就行了,但是VE2的时候经常用到的,当然也不是太难啊,那VV3的时候为了效率的问题,基本上把它都去掉了那。让我们用计算属性来替代,让我们用计算属性来替代,所以在VUEE3里边是没有这个呃过滤器的,如果大家想了解,你可以比如找个手串那这块搜索一下,呃,Filer过滤器。
17:03
嗯。好像没有这。过滤器,你看过滤器,它告诉我们二的语法是什么样的,在模板里边加个这个对吧,过滤,然后在这个差值这块使用竖线就使用了加过滤器就相当于调用的这个方法了,那在三里边怎么更新的呢?你看在三后边的版本过滤器是怎么删除的,对吧?不支持了。看到了吧,那我们用计算属性这种方式去用,所以这是呃,VE3的时候不加那个,所以咱们就直接在这加就行,或者如果你用计算属性,当然了,我不见得每一个都写的计算属性啊。因为有不用计算的,你写这个计算属性上面,那我就不写这个计算属性,那我在这个地方。啊,就不在这返回了,那我再返回,假如说总价的话,那我可以直接在这个地方前面加上那个人民币符号后边去处理,这也可以,它实际上这个替代的啊,那比如说我在这块返回,当然得是字符串,得是字符串就是嗯。
18:01
中文,然后我们加上这块的点,这个两个小数是一样的啊,那这块加上了返回这个连接字段,那我们在这块用的时候。在这块用的时候,你这块就不用加了,对吧,然后呢,我这块也不用加了,这就是用计算属性里边,直接在我们处理的时候就给我们处理好。你看处理的时候给我出了啊。刚才有错误没有显示刷新一下,然后我们再加加啊是一样可以的。这样可以了。那购物车坐到这儿呢,只是我们加加这个数量可以有了,总价也可以有了,用计算属性,你看事件也用到了,对吧,绑定属性也用到了这些,然后呢,计算属性用到了,那现在咱们还差什么呢?还差。比如说我们还差这个战时表单对吧,我们还需要用户在选择的时候,这个总价这块不太好看这块。An。等于right r TT下你加让他过来对吧,那默认都是让它选择上,默认都是是让他选择上,然后呢,如果他不想购买的时候,比如说这本书他选错了不想购买,那选下去对不对?然后呢,我们总价提交过去就行了,那说了跟删除不一个效果吗?的确是一个效果,但是你删除的话,有可能你购物车里边的就没有了,你还得重新购买,而在这里呢,只是我这次不想购买对吧,取消掉,那我下次有可能说先放在购物车里边,合适的时候,等打折的时候我再去买呢,这都是有可能的,所以呢,前面一般的咱们购物车像京东啊,淘宝啊,对吧,那都给我们提供有类似于这样的一个按钮,当然有的时候上面有全选全选这样的按钮啊。
19:33
那你也可以处理,无所谓了。那我们用计算属性跟它绑定,默认全是真的,所以呢,我们加购物车的时候,咱就用这一个数就行,那我随便加一个,比如cck check box这个属性,我让它是等于处,默认都是让它等于真的,因为别人购买进入购物车就让它是被选中的,默认是被选中的等于处。
20:02
玩它总提示我有问题,那我们现在加这个,我们在这块也有这个了,对不对,那默认用它什么微model和谁绑定的,和it TM里边的。和IM里边的谁绑定呢?里边的咱们跟it。这里面有这个方面。Itm里边CH,当然这名称你这样随便定张,当然这个咱们现在它默认按这一个,你有题幕下器不就好了,你看默认,默认都是什么,都是被选中的,默认都是被选中的,看到了吧,那现在我如果把这个值变成减二。对吧,因为我现在用V-model v-model什么双向绑定,我这块取消了,对吧,变成假了,那么单个啊,咱们这是单个M放在一组里面,那是不是这个对应的它也会变成甲,只不过咱们在这块看不到对不对,那我这块。因为是双向绑定使用的微model这块取消了,那上节课刚讲了嘛,对吧,那这个里边就变成假了,所以呢,在做书的价格的时候,那我们这怎么做呢?如果加一个判断,如果book里边的有个什么这个简单,它如果是真的情况下,我们才将。
21:13
这个总价加进来,如果他不是真的,我们就不加进来。不加起来,那这样的话我们就能看得出来,它是双线绑定了,你看啊变成发行来,你看我把这个选选掉,现在是六本书选掉一本15本书,对不对,这四本书你看这总价的变化,你看就给我们变化了。看到了吧,那我现在剩一本书十块钱。人在选中,你看它的去掉我这块你没选中呢,你先放公式里多少数量,它都是不影响我们下边总数的,当然了,我们一加上这个选,你看就把这个数量给我们相乘,然后在这里边给我们加上来就可以了,对吧,这就是我们。嗯,这个了,那还差一个功能就什么呢,删除的功能。删除的功能,当然了,我这个地方用链接,咱不想提交到服务器删除对不对,在界面里边就把它删除掉,怎么办呢?界面里边就删除掉,我们直接用on click click。
22:04
就是a click这个事件对不对,然后调一个删除的方法就可以了,但是呢,我现在点这个方法的时候,因为它本身是A标签,A标签本身自带什么事件和用户交互的对不对,所以我想把这个事件去掉,加上这个就把A标签事件给取消掉了,这是咱们在讲事件的时候重点说的,对吧。那我们删除的时候呢,是删除什么呢?ID删除,因为在ID商品对应的不是跟界面对应的,对不对,所以呢,我们删除最好我们在这里边,我们在IM循环的时候,是不是咱们又讲了一个,它可以加两个参数啊,对吧,第二个参数就是默认的索引呢,对吧?当然这告我这个索引你没有用的地方,你加的时候它给我们提示错误,没关系,我在这用一下,那我把这个什么index都传进来,你看这错误就没有用到,是ES并给我们提示的那个错误状态啊,你看加进来吧,那这样的话我们调用这个方法。就可以在这里边我们写一个DL删除的一个方法,传一个index,那我们只要删除的时候,删除的时候我们就将这个数组里边的元素给干掉就行了,也就是。
23:05
这里边元素干掉对吧,那这些里边元素删掉的话,那它是详式的界面上数据就会消失,所以在这里边我们直接用,直接用这次里边的。从购物车cart list里边,咱们有UN shift从前边删除对不对,还有什么pop从数组后边删除,如果从数的瞬间删除呢,就是SP,呃,SP通过这个删除对吧?那index从哪个位置开始删除,删除多少个就可以了,这是可以从中间删除对吧?这样的话我们一点击这个删除,你看。删除,那总价也会跟着变,那为什么总价会跟着变呢?因为我们数据是想尝式的,删除之后这个就就可以删除,这个可以删除,那么总价判断的时候是不是也就跟着变化。来,我们中间这个删除一下,你看40也会跟着变化,所以这是响应式,我们在做程序的时候,数据响应的时候有个好处,我们也不用其他的处理,对吧,就按声明的语法一点点写,就能够把我们项目写完。
24:04
然后再删除删除删除删除。比如说数据里都没有了,那数据都没有了,显购物车,反正总价钱这样也可以,那假如说咱们if v-if当然没用,那我用一下,比如说如果都删空了,那我在这块再加一个div,如果应该是微胖if删除,如果什么呢?如果这这里边C引RTMIS它的长度,那它的长度如果小于。等于零。小于等于零的时候,那我这块就说,嗯。你没有选择的商品。购物。购物车为空。对吧,去。购物。去购,然后去购再加一个链接什么,我就不加了。就是这一句话,那这会儿再加上V杠。否则你看。
25:02
这个条件满足就不会执行整个表格,然后你下边也审放到div里边,然后你看现在没有选购的商品,然我一刷新是不是商品又回来了,对吧,又回来了,然后我们继续删除删除删除删除删除再删除没有。一下去又回来了,所以呢,咱们用这一个例子,把前边咱们学过的这些语法咱们基本上都串了一下,你比如说维达model咱们用了一下,对吧?那循环便利咱们也用了一下,条节分支咱们也用了一下,时间监听咱们也用了一下,计算属性咱们也用了,绑定属性咱们也用了,对吧?差值指令咱们也用了,所以呢,这些语法咱们都用到了。对吧,一个小例子,但是并没有把所有的语法。虽然都用到了,但是每个语法的一些扩展性或者什么,咱们没有填用到,但是也够用了,所以呢,以后咱们再写一些特效实例啊,比如说你现在可以访问这个,你自己去写一个,假如说缓冲播放之类的都是可以去写了,好写。
我来说两句