00:00
大家好,我是学习园地的特约讲师高洛峰,上节课咱们用了一下VIVO的脚手架,也体验了一下它的代码演示,呃,最主要是配置文件,增加这样的一些应用,那咱们对脚手架呢,还不太熟悉,那这节课呢,咱们通过脚手架咱们再写一个简单的一个小事例,了解一下脚手架的一个使用,以及VE的一个原理,所以呢,这节课咱们学习一下VE创建实例的时候,Options这个选项以及vuee,它是使用的是MVVM这样的一个模式,咱们了解这些,来我们直接用代码咱们来学习,那我们呃,建完脚手架之后,我就在DEMO1里边做实验了,你可以在DEMO1代二都是可以的啊,咱们说了这些目录结构和这个配置文件,我都给你解释过了,就不多说了,那我们把所有的东西都删掉,然后我们需要框架内部都给咱们留着,但是他给我们创建,需要我们自己建的呢,我们自己手写一下,这些东西我们都去掉,再给你完成一遍,因为入门的时候我们一定要怎么着了解它的结构,然后从哪开始入门,咱们再。
01:00
一个知识点,一个知识点的学习,那就像VE这个view呃框架一样,咱们也是渐进式的一个学习。Public public下边的文件会原封不动的,会原封不动的给我们拷贝到在打包的时候放到这里面去,所以呢,这里边我们需要一个按照这个框架的这个规则,也就是这个架构的规则。脚手架的规则我们需要干嘛呀,我们需要做一个主入口文件,当然这主入口文件名字叫什么,我们都是可以改动的啊,当然我这里就不给你改了,嗯,免得增加大家的一个学习的难度,我这里边呢,就定一个什么BI,然后起个ID,你ID当然叫什么名字都行,对吧,只要我们将它和无用意挂载上就可以了,那我们还是叫传统的,比如说叫APP。就可以了,里边的所有代码,其他的我们都不需要去用,他会帮我们打包的时候原封不动的打包到build里边去,当然了,这个目录是咱们自己改的,对吧,打包到这里边,然后呢。会通过什么会在RCRC里边在打包的时候,帮我们把什么JS文件打包进去,那默认的入口文件叫做什么运点JS就主J,当然入口文件咱们也可以改嘛,对吧,你只要改配置文件就好了,里边你可以改成什么音带的JS都是可以的,对吧。
02:16
那他说了直接打包过去,如果我在这里边用vuee去操作,这个里边的是TML,对吧,那他现在呢是不允许的,因为这原封不动打包过去,所以呢,他说是件的概念,那组件呢,我们又没学,那我们就简单的先定一个组件,就是我们做一个开始的一个操作啊,声明一个VE的一个组件,我们叫APP,最好是驼峰式命名APP,它会默认给我们起名叫app.vuee是这样的,然后呢,我们创建这个。主方法的时候,现在我就在这里边是它的主页面,这是主方法对不对,这是一个主组件,最外层的一个组件,现在呢,呃,有这三个文件,这三个文件的结合着使用,那咱们像咱们最开始体验的时候,其实在一个文件里边小项目咱们就可以应用了,对不对,那这里边儿呢,在组件里边。
03:00
会把这个组件他默认给我们起个名字,就是这跟文件命名是一致的,他给我起名字,当然这名字你都可以改啊,然后呢,我们把它缺省的,你看是缺省的暴露在外边,所以呢,我们如果想通过vuee把它拿过来,我这里边用vuee操作这个组件,那我这块首先我需要创建vuee的实例,那VU实例又在什么,又在我们安装的这个包里面有个vuee,所以呢,我们做一个导入iPod导入什么呢?从哪里边导入,我们先写上从这个VE里边去导入,导入什么。导入vuee里边创建VUE实例对象的方式,那你创建VE实例这一个UE实例就可以帮我们去什么去呃,加载模板啊,就是加载这个附件啊,然后呢,数据绑定啊是这样的,所以呢得。直接调用它里边方法,如果直接这样vuee的话,那我做什么东西的话,我直接得VUE,点什么CE,创建这个方法对不对,这么弄的,那我们用解构赋值的话,我们直接就取出来这个里边的方法直接用,那就是CR液T这个方法对吧?这个方法直接拿出来了,因为这里边肯定也是通过ES supportt这种把它给我们暴露在外边,也就导出这里边的这个方法,那这方法呢,就创建VV实例了。
04:16
那我们就可以直接用这个方法对吧?这是解构赋值ES6的,我就不多说了,然后这个里边参数放的,参数放的就是一个对象,这个对象就是什么呢?这里边放的就是什么呢?Op ts就是我们的选项,创建APP也不是,也就创建view实例对象的一个方法,里边加的就是这个选项。而这个选项我们现在在哪呢?我们现在现在咱们是呃组件化的另一两个特点吧,有一个是组件化的,那我们已经创建这组件了,这组件呢,已经缺省名称以后给我们暴露出这个对象了,对吧,这对象名字就这个,所以呢,我们可以随意的起一个名字,在这里边导入那IPO。导入。
05:00
From我们从哪里边呢?从这个当前目录下的VE,这个里边导入什么,导入我们的,因为这里边我们没有给它起名字,对吧,如果这里边你起个对象的名字,比如说嗯,叫做把这个去掉。Post,假如说啊,我们起个名字叫做,呃,这里边的APP对吧,等于这个,那我们这块就得怎么着,ESPT导出APP导出。假如这样,APP。那我们这样也是可以导出的,对不对,那我们最好只用,因为它这里边就一个嘛,缺整名字我们还得起,还得用跟他一样的名字比较麻烦,所以呢,我们什么都不动,原原封不动的把它拿过来,因为它又缺少名字,所以呢,我们在这里边你就可以自己起名字了,你叫我的APP叫什么名字都行,对吧,这个便利名交给引入房自己定义,因为缺少什么ES6的不多数,那我们直接也叫什么啊APP。就是这个,那它导出的正是这一个。选项,也就是我们说的这个参数里边传的这个office对不对,那现在是组件的,那我们就直接相当于他把组件导进来,那我们直接叫APP对吧,你看这暴露了,那我们在这块。
06:08
导入这就可以了,那就相当于通过这个组件,通过这个组件我们创建了一个什么APP的一个,这样的一个vuee的一个,呃,对象相当于这样,然后呢,让这个APP就是这个组件。创建完了之后,对象挂到哪去?挂载,因为会把这个主键S和我们这个in代的一起绑定,它打包到哪啊,打包到这个的下对不对,所以我们这挂载。井号什么的APP,也就是指定的HTML,所以呢,就会在这里边显示,是这样的,会在这里边显示,就是这样的一个过程,你看很简单。这样的话,我们把所有的经历都可以在这里边写了,那这里边就是我们写视图的部分,对吧?那这边就是我们写样式的部分,这里边就是写我们写业务逻辑的部分,那现在咱们要知道写业务逻辑部分,那这个作为创建实例对象的这个选项放在这儿了,这个导入过程刚才已经说了啊,那这个里边能放什么?当然你可以命名对吧,起个名字,这个名字你起不起都无所谓,对不对,然后呢,我们里边能放什么,我们找一下。
07:12
看一下,找一下我们的vuee的文档,我们找到接口API接口,你看这块有option option这个,你看这里边儿有这么多选项可以放,对吧?那。单纯的一个数据绑定,数据绑定你看一下我们就有这么多对吧,当然了,我们数据绑定我们用的什么,用的是date方法对不对?Date方法当然这个是不是用脚手架的方式啊,就直接用呃,直接引用的方式,然后里边还可以有属性,那这里边这么多咱们先不讲太多。也是渐进式的来。那配置选项呢,都是阶层的格式,阶层对象看到了吗?大括号接对象不是方法啊,是对象的格式,那多个之间就用逗号隔开,那里边声明方法,那你可以是什么,你可以是date冒号,Action什么什么,这是传统的声明方法,那现在咱们用ES6对吧,增强式的写法,直接给给它必须是这个方法,是规定好的,记着这个方法不是你这别写的,是规定好必须就这个方法,然后里边我们必须返回一个阶层对象,那这里边的所有的数据我们都可以跟HTM元素里边的呃内容进行绑定,那这里边返回的这个数据,返回的数据比如说我们叫MSG对吧,Hello vuee啊,V6在里边也是阶层格式,所有都是阶层格式之间不能用分号,都用逗号去分割,那一个呢,你可以加这个逗号。
08:29
那这里边儿的所有的数据就跟我们这里边去绑定了,这里边div对吧,有这么一个,比如说我们用大括号MSD去绑定就可以了,来我们运行一下,嗯,使用。那个d server n PM,我们用re里边serve运行。编译打包运行,当然了,这个是会在我们服务器一直监听,对吧,然后我们打开浏览器,当为了看到效果,我把它这边缩小放到一边去。放到一边去,然后我这工具我给它缩小,放到一边去,形成这样的一个结构。
09:06
形成这样的一个结构,这样的话我们在这边有变化,你看就变化了,我在这儿修改,它本身会自动编译打包刷新页面,你看这块下边自动编译对吧,这边自动变化,这是我们最基本的一个一个结构。那咱们现在优势结构咱们再改造一下,对吧,因为这个方法是必须得什么,必须得是自己。就是固定的用法,而且这里边返回的这个对象,当然这个对象我们只要它返回对象就行,这个对象就会放到什么VE里,当然现在咱们是用组件啊,但是你不用那么去理解,你就把它想上,它已经放到这个实例对象里了,就像这个实例对象的数据,所以往外边如果想访问其他的地方,想访问这个组件的时候,直接用这次在元素的直接访问,不用这次直接访问,就相当于访问这个对象里的东西,对吧。是返回的对象,相当于和那个voe这个model直接绑定了,那当时这时候既直接返回对象,我直接Co生成一个,比如说BA数据对吧,等于这里边MSG等于这块写上,嗯。
10:08
这是一个test的测试对吧,那我这块直接返回,这也是一回事啊,因为我在全局升级一个date对吧,那这个date就会是这个。一回事,只是拆开对不对,你拆不拆开都行,你如果这里面数据太大对吧,你把它单独声明拿出来不是不行的,你看这块是一个测试,它就改变了。都是可以的,这个页面你可以随时看,这面是自动发新的,所以呢,咱这边变化,我下边我还可以打这个。这样的话,咱们这个栏目整个环境能够看起来就方便多了,这边是目录结构,这边是看打包编译运行什么终端,这边是写,中间是写代码的区域,这块是显示区域,下边呢是调试区域,对吧?页面调试区域,这几个区域咱们最近这些课咱们都这么去调试,这样的话就很方便啊。你开发的时候,你可以也可以选择这样的结构就行了,那现在所有的方法都是在这个里边去写的,那么我们能不能换一种方式,要这个模板里不能加多个level,加个B2,加个B2,那现在我想什么呢?我想在这块咱们做一个小的应用。
11:10
要一定要知道这个date,这个date里边的数据相跟双眼绑定,其他方法是不是的,所有的数据都要写在这个里面才可以啊,里边是杰森的格式,这点重要,那他做一个小应用,什么小应用呢?你比如说咱们购物车购买东西的时候,有个那个数量增加减减对不对,那我们做一个B,嗯,做一个按钮,一个加号按钮,然后呢,我们再做一个input,呃,我们来一个。给个赞吧。然后我们再来BOT to,再来一个应该是这边是减对吧,这边是加。是这样的。你看这样的一个数量,那默认这里边儿呢,我们来个微流值。默认这里边儿来个零。对吧。这里边儿。Value。红的显示。
12:01
那行,你看我换换另外一个,嗯,这里边用正号,我再生明一个,把date这边拿到外边去了,你在里边是一样的啊,我再生明一个,比如说um冒号等于零,你看啊,我用一下双向绑定V。Model。等于nu。你。保存一下,你看这里边就有零了,对吧,我用了一下双向绑定,那么这个值就是这个值,什么是双向绑定,一会儿我再给你看。你先加这个,让它也能显示这个数字,然后我这里边设置加加减减,那我肯定得给时间对不对,当然了,我只要这个数字加,咱们说是详式的对吧,这个数字变化是不是这个里边的数字这样的变化。对吧,让他绑定这个数字相当,因为这个是用户model也是在绑定这个这个数字也是在绑定这个数字啊。所以呢,我们只要在这里边,既然是绑定这个um啊,既然是绑定nu,那么我们现在就需要什么,需要在这块加上,嗯。
13:05
一个事件click点击的时候,在这块在模板里边,这个里边用语法的时候,我们直接用什么,我们直接不用加这啊,它就能返问到这里date里边的数据,因为这个date是在这个date里边返回来的。看到了吧,所以呢,我们在这里边直接让nu减减就行了,当然这里边你是三元运算符啊,什么东西啊都可以用啊。咱们用到的时候再一点点说at click这里边用到什么A加加。那这样的话,我加这个数字,你看这变化,那这里边儿有变化看到了吗?那如果我在上边,什么叫双向绑定呢?你看啊,我如果在这个位置上。我这块加一个这个后边吧,我把这个A也加在这个地方。你看假如我在这块输入十。一。
14:00
输入。用这。做一下呃,Input。这里边儿我们让M,比如说绑定一下MSG。就随便做一下,你看这里边,你看我这写写的数字。你看是不是这边开始变化,因为我这里边写内容的时候,因为用这种绑定了,那它改变的是这个。那这个就会体现到这对吧,是这样的一个过程,这样过程,当然咱们做的不是为了说做这个实验啊,那。咱们就做A的实验,那现在我加加减减加,我可以一直加不限制对吧,那我可以一直减也不限制。看到了吗?它可以减到负值对吧,那你不仅没花钱,那商家还得给你找东西,对吧?所以呢,我们把一些逻辑如果写在这里边也不方便,那我们在这里边呢,可以调用两个方法,一个是添减减方法,我叫subb吧,先加加的方法,我就是ABB,那自定义的方法在哪去定义的?自定义的方法这里边我说了,咱们先学一个date,再学一个什么呢?Met hods。
15:10
这个方法它是一个对象,在这个对象里面声明的方法,就是你自定义的方法,叫什么方法名都行,然后呢,我们在这块去。事件里边也好,或者什么操作里边调用自己的方法。当然这里边你可以声明一些其他方法,在方法中在调用方法都是可以的,那在对象中声明方法,咱们用增加声明方法是一样的,对不对,和我们在外层对象声明这的方法是一样的,比如说我们就不用什么ad什么发什么之类的啊,直接来就行了,非常的简单,添加方法再加一个。啊,Sub。对吧,减减的方法,但是对象和对象之间这是接什么,中间是不是得用逗号隔开啊,对吧?加加方法,如果在这个方法里边去访问这里边的date数据,当然这date我提出来了,在这对吧,那需要访问它的话怎么办呢?就用this。对了吧,所以这是代表的就是这个呃模板对吧,代表这个组件,代表这个组件,或者是你代表这个vuee的,呃,VU这个实例你这么讲,所以呢,直接访问VU里边实例里边数据,那直接用这个名称,比如说。
16:10
Nu对吧,那我在这里边加加,我在这里边减点,这次里边的nu减减是一个道理,那我现在保存一下,我同样不用刷新加加减减,对吧,是这样的,但是在方法里边呢,我们这里边可计算的就多了,对吧,你可以。做任何事情,那比如说我在这个属性里边,我再定义,比如说购买商品的数量,一共上架就十件商品,对不对,那我就是最大数对吧,写上十,那你不能说呃,最少的商品是一件对吧?购买最少商品一件不能少于一件,那我们就是mi等于一,这样就行了,所以呢,在这里边我们就可以通过这个属性咱们进行判断,你看这是这写逻辑,如果这次里的n nu大于等于这次里边的MX上架的最大的商品对不对,如果大于等于它,那我们怎么办呢?我们在这里边就让这点NM,就让它永远等于倍数,或者是不让它点都可以,对吧?你看这数多大,永远的是这个最大值,否则的话,我们再让他什么咱样还去加价。
17:09
当然你用三元算符什么的判断,这是最方便的啊,这只是一件很明白这个一务逻辑,那同样这里边这4.nu如果小于等于这4.min最小值对吧?那我在这里边就可以让这点um也等于这四点。嗯,MN这个,然后否则我们让它怎么样,一直可以减减减减这个数量都可以的,那这样你看我们加加加到十的时候。不变了,这说往这块也在变化,那我们这块变化。你看一我再点就没有效果了,这就可以了,那这就是自定义的方法,所以呢,咱们这节课咱们说学的内容是什么?就是option这个选项,这个选项里边呢,可以有五大类,Date属性,咱们只学了一,现在只接触一个date对不对和date数据里边的写方法,还有报啊,生命周期啊,资源呢,组件啊,对吧,组合呀等等很多内容都在这里边声明,但是格式都是什么,都是基层格式,所以呢,大家要了解什么。
18:09
了解。这个其实了解这里边儿该写什么,那你现在就这里边只现在只定义了两个,外边是固定方法,在这里边定义你自己的方法是这个意思啊。里边还有很多需要写的,那咱们间接式学习,遇到什么讲到什么知识点,咱们再学什么,不然的话,这里面如果现在把所有的选项都给你讲了,你也不知道在哪用,会比较晕,对吧?那咱们就间接式的学习,那咱们再了解一下什么是MVVM模式呢?MVVM模式指的什么?指的就是model什么这个呃,视图和video model后边的VM指的是video model,为什么别人创建VE的时候实例对象都叫VM啊?其实就video model的一个缩写。Video model的一个缩写,所以呢,Video model代表的就是什么?代表的就是video UE这个实例,那model呢,就指的我们在操作这个数据,那这个video呢,就是指的就是我们什么界面,也是我们倒墓的元素,你是这么想对吧?那它什么工作原理呢?那我们就得先看一下。
19:11
嗯,就是倒的那个原理是什么样的。那我们的原理是什么样的,这个。这你看一下啊。这样的话,我们。这个图你们看的稍微清楚一下。那比如说我们回想一下,其实V,呃,VIVO现在呢,它其实就是一个加了速块的MVVM这样的一个库。因为它就是基于M于MM这模式去写的。因为它是以什么数据驱动和组件化这两大特点的思想咱们构成的。对吧。所以呢,它通过目标是实现数据驱动和组件化,所以呢他按照这样目标去实现了它这个框架,所以咱们这个框架使得咱们怎么样用起来,比如说更加简洁呀,便于理解呀,所以呢,你要是了解这个MV模式,那你就能更好的去理解我们的什么VI网。
20:05
那比如说我们之前的习惯用解块蕊操作倒,那是我们那个思想去做的,那是为的时呢,那你就咱们说了,你一定要抛开什么,抛开手动操作盗墓的这样的一个思维,因为VIVO呢,它是什么数据驱动的,咱们知道,你无需手动去操作盗母,它就可以怎么通过一些特殊的HTM的语法,对吧,将倒姆和数据绑定起来,一旦你将你绑定,那DOM呢,将和数据呢,就保持什么保持同步了。就这样,每当数据变化,道路呢,也会更新的变化,所以呢,不是盗墓的思想,但是呢,我们把页面上的元素,元素的结构不就是道墓的结构嘛,对不对,是这样的。那看到这个,咱们先看这个图,那这个图呢,不仅包括了嗯,MVVM这样的一个模式,还描述了在VIVO中的什么,你就把V看成什么,这个view model vm,对吧,它是如何和这个view和model进行交互的。
21:01
那首先它进交互,那咱们这个VM就是VM指的就是这个VE,那就看vuee的什么V,它就是VE的核心,也是V的核心,这俩读音很像我说的,我这就读吧,这VI啊。View model就是VE的核心,这点就知道了。它就是一个实例,这个实例我们在哪创建的呢?你比如说我们现在在这里边创建的就是在主入口文件里面,你看我们在这块弄了一个通过这个是不是创建的一个实例,这个实例绑定了谁啊APP,这APP里面是不是这个是天M元素对吧?那这个天元对应的是不就是这个模板,所以呢,你把这个模组件。这个组件看成什么?看成是我们的will,也就是do。看看这个。所以绑定其实就这个嘛,对吧。看着他。因为vuee的实力,也就是这个VM这个简称VM啊,这个VM咱们要怎么着,它的作用于呢?就是作用于,就是作用在这些HTML的什么这个元素上面。
22:04
对吧,那咱们当然通过ID什么已经都是绑定好的了。那通过咱们这个图,我们可以看出什么呢?那。我们看一下view的两大,最主要的是数据,为什么能详式看,主要是看这两个,它里边有两个东西对吧,一个是倒监听,一个是数据等的绑定,把这个它的核心VM看,核心看成是两个,它有两个核心,不是一个看成是两个。看到了吧,它里边包含这两个东西对吧,看到是两个工具,通过这两个工具就能实现双向绑定数据,是怎么,为什么说我们在data里边数据一变化,视图里面这个有就到里边数据就会变化呢。对吧。通过它来转换的,那我们先看一下。如果从这段来看,你在这个界面里边,就是你在道元素里边。如果在这个里边,假如我们从这边看,那么。
23:00
这个。也是盗墓这个,呃,监听盗墓的监听工具呢,会帮我们监测页面上的这个道路的元素,它的一个变化,如果有变化懂不懂就更改它这个里边的数据,Model里边数据,那如果从这边看model数据里边。如果有变化的时候,我们或者我们更新这里边的数据时候,用程序更新这个数据的时候,那么它会通过date绑定数据绑定的方式,对吧,来更新我们页面中的这个盗墓元素。是这样的一个结果。所以大家要清楚它这样一个操作,那从我们的页面里边,我们还是好好给它分分,什么是V,你就把这个组件里边的这个div,它是不是倒墓元素啊,对吧,把这块看成是倒元素,那把什么看成是model呢?我们把这个数据看成是model,注意看成model对吧,那谁又是什么呢?这个VM呢,那就是我们的这个对吧,创建的实例对线,它就是。
24:02
V,那它是VM,那我们的所有的操作监听,当然这些数据的操作在这块,这都是属于model的部分,把这都看成model部分,那中间的一个处理过程,把这个model如何让数据变化,或者这个数据变化如何,它又让这个model变化,整个这个过程咱看不见的,这个咱叫VM,也就这块的功能叫VM。对吧,主谓的model就是这样的一个原理。当然这个原理大家只要了解一下就行,你要是理解不了,你就记得我页面上的数据变化,那我可以让什么model里的数据变化,那model里的数据变化可以让数据页面数据变化,那这是它的一个最主要的一个核心,那核心呢就是因为基于这个模式来实现的。那我们这节课就先学这么多,那这节课呢,咱们主要学了一下这个它的定义对吧,也就是在我们写页面的时候,里边能定义什么。这里面能定义上了对吧,以及它的数据来回变化的实验原理,咱们用一个例子已经演示了啊,现。
我来说两句