00:00
好了,各位在对view呢有了一个大概的认识之后啊,咱们开始正式的去学习它,找到学习里的教程。然后这里呢,有两个细节的小点,大家要知道一下啊,首先第一个它往教程这个文档跳的时候啊,它没有选中第一个安装,它选中的是第二个叫介绍,还有就是它整个左侧这目录吧,是以缩进的形式在表达层级关系,你比如说安装。介绍以及他们下边的这一堆都是属于同一个级别的,然后蓝色的这些呢,是紧随介绍之后,然后呢,整体向右做了一个缩进,那它想表达的意思其实就是说蓝色框里面所有的东西都是属于介绍这个分类里的,好了这就不墨迹了啊,回到介绍这,那首先第一个啊同学不说了,在开篇的时候啊,咱们已经聊过这个U的这个特点呀,定义啊等等相关的东西,好了,直接到这一步叫起步,然后你注意观察,这里边有一个奇怪的小图案。
01:01
红色的竖线,并且配合一个惊叹号。以后你在看view官方文档的时候,出现了这种东西,那么后边的文字都是属于注意事项,然后呢,也跟大家讲,我们在讲课的时候,不是说所有的注意事项啊,我都带着你读。因为有些注意事项啊,其实它没有什么太大的意义,你比如说这个就是同学咱读一下啊,他说呀,你学习V的时候,你最起码对HTMLCSS和GS,你得掌握到一个终极的程度。还有就是说,你不要把框架作为你学习前端的第一步,大家说可能不是一个什么最好的主意,还有就是他说如果你之前用过其他的框架,那么可能你学习VU的时候呀,会轻松一点,那当然这也不是必须的,那啥意思,我没学过别的框架,我不能学习VU了吗?也不是,那你说各位啊,就这注意事项我带着你读完了。那你说同学意义大吗?意义不大,这是我们第一次遇到这种符号,所以说后边的东西啊,同学,甭管有没有意义,我都带着你读一遍,以后在文档里各位如果是没有意义的注意事项,我直接略过好吧,诶,那这里边儿有一按钮叫安装,点击这个安装,各位就跳到了这个选项卡。
02:11
那在点击之前呢,我们先看两个东西,第一个官方说了学习VJS最简单的方式呢,就是先写这个hello word,我们也会做这个hello word啊,我们做的呢,可能比官方呢,稍微难那么一点点啊,还有就是看一下这他说安装教程里面,也就是说这个里边。他给了你更多安装view的方式,但是呢,官方特别不推荐新手直接使用这东西,这啥呀,脚手架。哎,所以说同学我们最开始学习viewu,就是用这种最传统的方式,在一个HTML文件里边引入啥GS,好了,我们点一下这个安装啊走,他就跳到了安装这个选项卡,安装这个里边呢,他总体想教你安装两个东西,一个是教你安装view的开发者工具,哎,一个呢是想教你安装什么呢?View,然后剩下的这些吧,我们暂且不关注,剩下这些就比如说,呃,他说这个包啊,也是一个包管理器啊,然后V呢,有很多很多的这个版本,不同的版本呢,它有什么差别,那粉色框里的我们暂时不研究,后期我们讲到脚手架的时候啊,粉色框里的东西我们可能得拉出来重新的看一下,那首先同学我们关注点就在蓝色框里,我怎么安装view开发者工具吧,那都以后再说好了,有两种安装view的方式,第一种呢,就是靠script标签去引入这个view JS,还有一种方式,注意了各位,就是用NPM去安装view。
03:38
但是呢,如果你选择了用NPM去安装view,往往都会配合着一个人一起使用,就是命令行工具,也就是说什么呢?那脚手架,所以说各位我们选择哪个呢?蓝色的这个啊,好了,开始点击它。那这里边有一个CDN,这是什么意思呢?简单说一下各位,你说我们在写这个script标签的时候呀,是不是里有一个属性叫src,是不是可以指定资源的位置,如果你把src呢写成这种。
04:09
什么当前目录下的,然后什么什么什么什么啊,那你说这什么意思呀,引入的是不是一个本地的JS文件,那还有一种可能就是你这个src写了这么一个东西HTTP,那同学你说这什么意思呀,其他的一个在线的GS对吧,那为了让这个地址呢,加载的更快,那所以说有的时候呢,它会做一个CDN的加速,这呢,我们就不做过多的说明了,好吧,哎,来,那点击这个回到这。View呢,给我们提供了两个版本,一个版本呢叫做开发版本,一个版本呢叫做生产版本,都能实现功能,那实现功能肯定是最基本的,对吧,各位。那两个版本有什么区别呀?首先说开发版包含了特别完整的警告以及调试模式,而生产版删除了所有的警告,也就是说开发的时候你最好用第一个,如果你什么东西写错了,他会告诉你如何去解决,给你一些小提示。
05:06
哎,那如果你选择的是生产版,那啥意思?就是项目写完了,项目要上线了,为了让这个v.GS的体积更小,你可能会选择什么呢?生产版,因为出现问题都已经在开发的时候去解决了,对吧?那我们用哪个呢?我们学习的时候当然用这个呀,那我把这两个版本呀,都给它下载下来啊,然后在下一小节我们形成一些对比什么的,首先点击开发版,这个时候呢,会弹出一个下载框,我把它存到桌面。我再下载另外一个生产版。也存在桌面,你会发现呀,他俩从名字上啊,就有点小区别,回到桌面呢,你看一下开发版叫做view,生产版叫做点m.JS很明显啊,各位它经过了什么呢,压缩。好了,这两个文件呢,都准备好了,那接下来呢,那就开始引入呗,首先创建一个文件夹,我们要讲view基础了啊,所以说这个文件夹的名字叫做view,哎,跟咱之前讲那个react的时候是一个套路,然后右键呢Vs code打开。
06:09
然后呢,我在整个讲课的时候会写出很多的小案例,所以说呢,先给第一个案例起个名字,零一下划线初10V,就是你第一次去建V,那这里边当然得创建一个HTML文件初始v.atml。那我得引入GS呀,所以说新建个文件夹GS,然后我把刚才下载这两个啊,全都给它放进来,同学,我之所以哪俩是一会儿要给你形成一个对比,要正常用,我直接用第一个用就得了,一会儿要形成一个对比吗?折叠起来好在这里边写一些固定的结构,把名字给它复制过来,初始比。那甭说别的,是不是得引入这个JS呀?好走点点杠,GS下的先引入谁呢?开发版写好注释这一步叫做引入view。
07:04
那我引入view了之后,他能怎么着呀?各位说一下,当年你学习JA query的时候,如果你引入的是JA query,全局多了两个人,一个是叨乐福,一个是j query这个关键词。那么如果你引入的是,那你这儿呢,就多了一个人,就是view这么一个内置的,你可以说它是对象,也可以说它是函数,因为函数本身就两个身份嘛,一个是当做函数,一个是当做对象,所以说同学我就直接说吧,如果你引入了view,全局就多了一个view这么一个构造函数,那怎么去验证呢?右键打开。页面上肯定什么都没有啊,我们切到控制台刷新一下各位,出现了两个小提示,不叫错误啊,它不是红色的啊,就是两个小提示,首先看第一个他说什么呀。请你下载VI的开发者工具,达到一个更好的开发体验啊,也就是说他推荐你在chome浏览器上安装官方所推出的开发者工具,一会儿我们再安装,然后再说这个是什么意思?
08:08
我就直接翻译了啊各位,他说你正在运行一个开发者版本的view,请你确信你在生产环境里面不要这样做。那他的意思就是,哎呀,你悠着点,我发现你引入的V u.GS体积有点大呀,里边还包含着很多的警告呢,是吧,有一些警告的提示都在里边呢,那你这个东西没有上线吧,上线你可别用这个不太好,所以说同学都是两个善意的小提示啊,那这个东西肯定是影响我们一会儿我们再解决,首先我们验证一个东西,我引入了这个VGS到底多没多那个大写的V,然后V这个构造函数呢,敲回车走,有没有OK,可以的,那如果你要不引入,那就不用看了,那肯定是没有这东西对吧?回来解开。OK,朱老师,那接下来呢,接下来就处理处理这俩小东西吧,啊首先说说第一个咋处理,很简单,你把V的开发者工具下载下来,这个警告就没有了,那怎么下载呢?两种方式,如果是在国外的小伙伴,可以非常流畅的访问谷歌应用商店,如果在国内的小伙伴诶,那可能就访问不了了,是吧?哎,那我们先看看如果正常的去谷歌应用商店,该怎么安装VIVO的开发者工具呢?来到这儿,这不有安装吗?选择第一个view开发者工具走你。
09:31
这能点的啊,来走。你就来到了他的github主页,然后他说了,那工具啊长这样特别好用,然后下边啊有三个链接,我们要点的,注意各位,是这个你不是在firefox,不是在火狐上,你是在Chrome上,所以点这个,但是不要点后边那个蓝色的,后边蓝色的是开发者工具的测试版,是我们在讲解5U3.0的时候才用的,哎,那我们现在学的是不是2.0啊,所以说你点左边这个好了,点击。
10:01
那如果你身处国外呢,是很流畅的就能访问到谷歌网上应用商店是吧,然后你点击添加就可以了,但是鉴于呢,很多同学是没有办法访问谷歌,哎这个应用商店的,那我提前呢,给大家准备好了这个东西的安装包,那需要你做的就是来回到这个里边。点击管理扩展程序。然后默认呢,你的这个开关开发者模式是关闭的,我这之所以打开是之前我打开的,你的是处于关闭的,你第一步把它打开。随后呢,你注意把浏览器最小化。回到我给你的资料里面。有一个叫做其他。这里边有一个view,开发者工具,点CRX摁住,找到浏览器,松手,他问你要添加吗?你说添加就可以了,诶,你的开发者工具就出现在这儿了。然后呢,默认呢,它会隐藏起来,最好你点击这个点这小图钉,把它固定在这儿,OK,这个时候回到我们刚才写的这个案例,你刷新一波各位,第一个警告是不是没了,不再告诉你安装view开发者工具了,为啥呀,因为已经安装了吗?说老师他怎么用呢?它为什么不亮呢?这都是后续的事儿,说说为啥不亮,你连一行view的代码都没有写,它当然不亮了,对吧?哎,一会儿呢,咱们在写的时候它就亮了,然后再说这个,其实这个东西吧,同学不算啥毛病,人家提示的挺对的。
11:29
就怕你在生产的时候引入了这个文件,那你生产环境啊,那你肯定得用那种压缩的呀,说老师,但是我不想让他在这儿一直提示我呀,烦人呀,那怎么关呢?回到文档里面,注意了,我要用这个选项了,叫API。我打开API之后呢,看这里有一个全局配置,首先我们先读一下这句话,读view.con是一个对象,包含view的全局配置,可以在启动应用之前修改下列属性,首先我们验证一下view身上的这个config对象到底存不存在。
12:07
回到我们的代码当中,刷新一波view con,诶,有没有各位有这里边儿所有的东西都是对view进行一个全局的配置。全局的配置就是一次修改,到处都可用,我们关注的是这个选项,同学,别的吧,你先别关注,咱慢慢来啊,看这个啥意思。Production有生产的意思,那么tap这个T什么意思呀?小提示,所以说你看默认它是开启的状态。那说老师我能不能把它关闭呀?可以的,回到文档里面,Production tap到底是干嘛的?在这儿已经有说明了,我们直接点击这个走。他首先会告诉你是view2.2.0新增的这么一个属性,哎,其实同学哪个版本新增的这个吧,我们也不太关注了,它的类型是一个布尔值,默认值是帧,那么如果你把它改成false,那么就阻止了U在启动的时候给你生成刚才那个提示,对不?哎,那我们怎么办呀,把它复制过来回到我们代码当中。
13:15
哎,你得稍微的呢,写一段脚本,写上view.con全局配置点这个东西改为false,那就把它这个提示呢就关闭掉了,写好注释吧,走,把官网的这个复制过来,写好注释,OK,这个时候回到我们的页面当中,各位刷新都没有了,好,那咱们就算把view的开发环境搭建完了,我们一共做了三件事儿,各位第一件事儿下载了一个开发版本的view,第二件事儿安装了这个开发者调试工具,那么第三件事儿关闭了它特别烦人的那个提示,好了,那这一小节呢,我们。
我来说两句