Vue3.x从入门到项目实战 12.Vue初体验 学习猿地原创

来，咱们再开始看封装实力。全局配置实力封装，为什么要用实力封装，什么叫实力封装？先明白这两个概念啊，也就是我们在做一个项目的时候，你不一定说所有的项目就这一，不能说所有的项目就这一个项目，不一定就用这一个接口，对吧？当然了，呃，我喜欢就用一个接口，然后呢，把所有的请求其他接口里边都写到我这个自己后端的封装成统一的接口，对外给我那前端加载这一个就行了，那如果后端不是你开发的，你们是合作开发的，那再有呢，有的时候呢，会有多个服务器对吧？但是多个服务器也可以都封装到统一的后端接口里边给我们调过来啊，但是呢，往往呢，开发不规范，它不是这样的，你比如说我们在一个项目里边有可能需要多个接口地址。

比如说在这项里边，那我想呃，通过比如说微信登录对吧，我是不是得调用微信登录的接口啊，那我想呃，通过支付宝支付，微信支付是不是得调用微信支付宝的那个接口啊，那本身项目的数据你从这来，那支付宝的那些接口怎么的，是不是也得单独再请求啊，当然了，咱说这些也可以封装到这个接口里边，给我们返回一个对吧，也可以怎么的。写在前端去用都可以。所以说在一个项目里边有可能请求多个，再有呢，咱们后边做，如果你在公司里边做的项目比较大的话，那后端的分通常都是分布式的结构，也就是数据库都是什么，呃，后台有可能说有十几个服务器，或者几十个服务器OK才能跑得动，所以呢，那不同的服务器提供的接口的地址有可能是不一样的，当然了也可以统一对外用负载均衡之类的是可以解决的，但是咱不说那么多，就意味着在一个项目里边有请求多个接口的情况。

对吧，你就这么记是不是就好理解了，那有请求多个接口情况，那你这块基础的设置了，那就意味着我所有的请求的时候都得用这个接口，对吧？那你这块接口机地址呢，你还不能说写多个，写多个的话，你用一个数组，那也不知道什么应用，用哪个也不方便，所以它通过创建实例的方式，什么叫创建实例的方式这个意思。比如说通过什么呢？通过这个你可以cost声明一个实例。命名什么都行，比如说请求商城的，那咱们实例叫ew shop的商城的，对吧，然后呢，我还可以创建一个，比如说请求支付宝的，对吧，创建实例，这实例名就是变量名，随便起啊，通过ius这个对象里边使用create去创建，OK，这里边也是配置文件里边写的是配置，那咱说是配置就什么格式啊，是不是杰森格式啊。

对吧，是接线格式这里边儿就有了，比如说URL，那通过这个实例我们去请求的时候，比如说请求的是哪个接口呢？那假如说咱们前边。这个我们用的是这个接口，嗯。那我们在这里边儿，我们就得用上。呃。我把这个改成嗯，这个点api.api我这块好像写的不对，应该也是best ul吧。看一下这里边儿，你看创建实例best u写错了啊，基础的。

嗯，可以这样，URL是单独请求，就固定请求的URL是用那个time out超出时间，呃，这个4000吧，不一样的这个实例，这就相当于你生成了一个新的，生成一个新的对不对，那如果你在有另外一个，当然了，这里边方法或者什么的话，你都可以在这里边指定啊，投信息啊什么的都可以啊，对吧。创建了这个实例，就相当于创建了另外一个阿两个对吧，原来直接阿是一个，那你用这个也是一个，OK，或者是你在创建另外一个实力，再创建一个，创建几个都行，对吧？原来有一个人帮你忙，现在有两个人帮你忙了，对吧？不同的人对外联系的，有的是联系政府部门，有的是联系一些大厂企业，对吧。用的是不同的都可以啊，然后呢，我们比如说在这块。

直接用这个调用的时候，你看是可以的，他访问的谁啊，访问的是呃，这个实例对吧，那如果我用这个，比如说ew shop，那点get请求的时候，同样的地址啊，点N，嗯，错了，Res里边直接res. DAta.log这样，然后这个地址。因为他们两个的根地址是不一样的，但其实数据是一样的啊，你看都是这样的，但是呢，这个本身的阿西是用咱们默认那个阿西对象找的是它基础目录下的，而这个呢，找的是找一个X啊，这个找的是另外一个shop API，一个是api.shop一个shop api2个接口，OK。

这里边儿我也直接点点贴吧，你就看看这数据能不能拿出来就行了。你看数据都能拿出来。看到了。都是可以的。所以呢，通过不同的实例，这样的话，我们就可以有多个这样的基础地址去设置了，所以很简单，这就是创建实例。看。来，咱这回再回过来看一下这个概念啊，你看后台接口地址有多个，并且超时时间不一样，那我们不可能在RCL中把每个后台请求的域名地址都拼接到URL中，对吧。所以呢，如果直接用很很繁琐，那就可以直接用这个，那它这里边有BAUL，有timeout URL，有方法，有头，有参数，有数据，可以这么指定。

都可以啊。这个那再看两个概念，就是咱们后期项目里边都能用上的啊，当然它功能也很多啊。你看。它这里边儿还有两个拦截器，一个叫做请求拦截，一个叫做响应拦截，什么叫请求拦截，什么叫响应拦截啊。给大家画个图，这个也是很重要的一个概念啊，你要会了，这个能节省很多代码，你比如说呃，我们这是服务器。这是浏览，这是客户端，那客户端里边呢，有阿西。这块有ourselves对吧，那我们用它请求服务器是怎么走的，对不对，那服务器处理完对不对，请求一个接口是不是数据得给我们返回啊，数据返回叫做响应OK。

那什么叫做请求拦截，就是请求服务器的时候，我拦截上一下，在这块处理一些事情。OK，什么叫响拦截数据回来的时候再给阿肖，之前我在这块拦截，在这块处理一些事情。听着吧，这就是请求拦截和响应拦截，那就说这个怎么用，有什么区别，用途可大了啊。你看请求拦截的时候，什么时候用请求拦截，你比如说我们在看API的时候，API的时候。好多，比如说个人中心里边是不是需要授权把token带过去，更新用户信息是不需要token对吧？支付的时候是不需要token对吧？地址管理的时候是不是都需要token，想想是不是好多地方都需要token呢？对吧，那ton是通过什么过去的，是不是通过头信息带过去的。

对吧，而不是在体里边通过参数带过去的，通过投信带过去的，那不管通过什么带过去的，只要是每个接口都需要把客户端的他的一些什么跟个人用户相关的一些东西想带给服务器，那怎么办呢？我在每一个API里边，这里边写吗。如果在这里边，每一个接收的参数里边，在这里边写显得多麻烦，对吧？那万一ton变了，或者是你的结构发生变化，那你有1000个地方请求，那你得改1000个地方，对吧。很麻烦，所以怎么办呢？那就统一用拦截器，只要是我这里边没写的，我先拦截一下，对吧，看他缺什么，我给他补上什么，这个拦截，拦截那一道，然后再发过去，OK，是这样的一个呃，一个过程啊，咱就拿这个呃，Token为例，OK，咱试一下，当然了，咱这里边没有ton，我就不给写完整代码了，叫项目写完整代码，只告诉大家写过程，看一下什么是拦截器啊，你看我这里边有请求，那拦截器呢，你得你得看什么。

你比如说呃，我用这个对象创建拦截器，还是用这个对象创建拦截器，那如果你用这个对象创建拦截器，那就用这个对象的，它会拦截，如果用这个对象创建的，这个对象会拦截啊，那比如说咱们就。你这个吧，E w shop啊，因为现在咱们有两个对象，相当于有两个人帮你忙，对吧，有两个对象，那假如说有两个对象ew shop点通过它可以创建，然后你可以通过谁啊，也可以通过这个X，就咱们这个原生这个不是创建实例的去创建都可以啊，因为它都是阿西奥斯对象，那我就用这个去创建这个呃，拦截器。

那比如说怎么拦截呢，使用这个你看。对吧，用这个，然后呢，请求拦截。多了个E，这是请求拦截，然后有个use使用。看到了这个实例对象创建拦截器啊，记住我是给这个实例对象创建的，不是给阿西创建的啊，所以这个里边它会拦截那请求。这个对象里边拦截器，然后请求拦截又使用，那在柚子里边我们需要有一个，呃，它通过它并不是直接通过这个配置文件去设置的，它里边需要传一个回调函数，回调函数，那回调函数呢，我们就传个参数叫con吧，也是配类似于配置文件，OK，那咱们就直接写什么，直接写这个呃，Con就行了。

那它需要有两个方法，一个是config。传第一个函数回到函数一个呢是什么？如果有错误的情况下，我们怎么办呢？也要请求的时候有错误的时候怎么办，对吧？这是两个拦截器，OK。那这里边儿咱们要知道。请求的时候。错误有必要处理吗？你是把数据都发出去了对不对？错误就在服务器端判断了，不在那处理，所以请求拦截器，我们通常写这个。请求拦截器通常写这个，那错误这里边函数里边我们写什么呢？对吧，你什么都不用写没关系，对不对，如果想写的话，那你就是用promise，直接就错误再交给他上层处理一下就完了，你比如说retain一下promise promise。

呃，Pro promise里边点，比如说E，呃里边的错误，直接把这错误抛给上一层对吧？谁使用它就接受这个错误，想处理就处理，通常就这样的一个语句，这就是我们请求拦截器的时候，也就是从这块发给服务器的时候，对吧。他是缺东西，我们需要给他补东西，通常都补什么呢？在这里边你比如说咱们的talkingn就不给，就给大家一个一个敲了，这里边你看。这个ton我后期再给写啊，因为在这写的话，我还得先把登录的数据什么都拿过来，因为咱程序没有上下文，所以你没有办法，那拿过来也就意味着在这块补过去，所以呢，只要是我请求，那他都会执行这里代码我打印一下，呃，银行井号吧，那银行井号我现在只要这块你能看到我打印就行，然后我是不是用通过这个实例去创建的，好，那我在这里边。

通过它我调用一次，两次，三次，四次，五次不同的接口都可以，你只要调用一次，它这块就会拦截，就会走一遍，这里边走，这里边是不是这条宇宙是哪音，好，那我们现在看一下。看到了吗？我调用了几次，这里边儿怎么的，就给我打印了几次。调用了几次，这里边就会打印几次，这个井号打印这么多次，OK，但这有个呃，有个错误，这个token这块没用token啊。呃，We to talk，也就是你想放行，他为什么错误数据没返回来，为什么没返回来是什么，你得让他怎么着，你都拦截上了对吧？你就像一个比如说现在疫情进小区是不是拦截上了，拦截上得看什么呀，你戴没戴口罩对吧？怎么扫码是不是得拦截，拦完截是不是得放行啊，不放行是不是堵在这了对吧？所以得放行，那怎么放行，如果补完东西之后，你这块直接返回这个参数，这个参数就是别人请求的时候带的所有的配置，所有的项，你直接放行，Return返回这个就行了，所以这是一个写在函数里边这条语句别忘记。

不然他不放行，他就卡在这儿了。你看。这回数据就都有了，没有错误了，对不对就放行了。所以这块一定要执行这个放行对吧，拦截放行放行才可以啊，所以在这个地方，那我们就可以使用一些token，你看每个发送请求的时间，把token在这里边给它补上，那是不是所有只要经过这个拦截器的请求，不管什么接口在这里边是不是都把ton加上了。

对吧。都把逃坑给加上了，这样的话都有授权了。所以拦截他给他个身份，就这意思就不用写在每一个请求里了，每个请求里边都不用动，对吧，通过拦截器来处理是不是很有必要，所以你要不会这拦截器，咱们用户登录对吧，你就没法做。知道吧，当然我这里边就不写套餐代码了，在项目里边我再给你写。就类似于这样，因为咱们有上下文，你获取不到这个token对吧，然后token获取到，如果存在写上，然后放行就行了，这是请求拦截器，那响应拦截器就是什么？就是数据发回来的时候，我在这拦一下。那想要数据发回来的时候拦他干嘛对吧。

数据发回来拦他干嘛，就我说了，假如说一个人出去了，对吧，去购物了，回来的时候是不是又到小区门口了，小区门口这块是不是开始拦截啊，对吧？扫码登录对不对，如果你是黄码弹窗了怎么办？是不是在这儿处理啊。那如果你不用响应拦截器的话。请求拦截器有这作用，如果你不用响应拦截器的话，你想想会发生什么情况呢？就是一些错误码，因为不同的错误有不同的提示到不同的地方，比如说用户请求对吧，没登录给打回来了，告诉他没登录对吧，有个提示，然后呢，你存参数存的不全，告诉你参数有错误，有个提示，所以呢，根据我们程序的状态码，会给我们提供很多种不同的提示，也就是在我们这个里边你看。

状态满下边四往后这边是不是全是错误啊。对吧。那不同的错误是不是给用户不同的提示啊。那不同提示在页面上提示怎么提示，那你就得在响应拦截这块抓取到它的，因为所有的接口返回都会被这个响应拦截器给拦截，给拦截的话就把它这个状态码给拿出来，状态码拿出来判断，如果状态码是什么对吧，我们就干什么干什么对不对，就这样OK。所以我们用的是响应这个，呃，拦截拦截器去处理啊。然这块一样，那我假如我也写在EWSH这个里边，EWSH这个实体里边也使用拦截器，那里边就得是响应的了，对不对，然后点use看用提示的咱们代码能确保它不错，OK，然后这里边呢，也有两个，也有两个。

参数一个呢，是什么响应回来的所有的什么响应回来的所有的这些呃，数据之类的东西，OK。那这块就是res响应响应I is吧，这块然后呢，有一个错误e or。错误信息。那想象一下。回来的时候，咱们是不是根据错误给他不同的提示啊，不然拦截它干嘛，对不对，正常的咱就不拦截是不是就完了。正常不拦截，那这里边正常不拦截，那我们直接返回这个res这个数据就可以了，把这数据怎么直接放行，正确的就直接放过去，对不对，那直接放过去呢，你也可以有一个简单的方法，怎么呢？我直接点date什么，我但是尽量别这么写啊，我只是给你举个例子，直接放回的是什么是date。

那这里边这请求想的时候，你就不用点data了，因为直接就代表的是这个对象，I直接代表的就是这个对象，因为我这块响应回来的直接是不是对，那下边这几种写法就都错了。但是尽量别这么写啊，我只告诉你它可以这么写，为什么尽量别这么，不要这么写，你这块这个就代表这个了，因为我在这块直接返回来就是代表date的，你这就不用再date一下了啊，但这不行，这个因为用的阿奥没用这实例，我用date实例看到了吗？结拦截。为什么说不用这个去处理啊，你想想它这个里边是不是有的时候还得访问一些res里边可不光是date呀，里边是不是还有一些头信息啊，什么状态什么之类的，对不对？那你想判断是201怎么办，状态码什么怎么办？你根本读不到状态码啊，因为状态码是这个呀，Res里边的什么这个是状态码啊，对吧？而你如果直接返回date了对吧，那它就直接代表date数据，而这里边的直接点这个是读不出来的了，是读不出来没有这状态码的了，清楚吧，所以呢，不要这么干啊。

听懂吧，也就是你想清洗一下数据在这块，我只告诉你这块有这个作用，对吧，那你直接就OK了，听懂吧，你直接点data吧，然后直接你看这块直接is，就是那个代表那date数据就行了，那我们先看一下是不是。因为咱就这一个数据啊，把这个注释掉，咱不用这个了，就掉这一个数据，呃，在。两遍三遍，调用三遍，然后这里边我们也打印一下LG打印，呃一行钢线吧，就看一下调用几次，它并没执行到。

诶等等，不是浏览器执行，咱们用node执行啊。请求拦截响应拦截，你看这块都是数据没有，你看拦截线对吧，响应的时候线。看到了吧，咱掉了三次呢，往上看。打印的都是数据的部分，你看线是不是有了。所以呢，你看这个数据有其他乱七八糟的数据吗？是不是就不存在了，直接就是什么date这个数据对不对。它就代表这个了，那如果我这块把这个去掉，你看那就是什么返回是什么，它这块什么也没处理对吧，那你这块就是什么东西。那这块咱们一处理一打印的时候调用三次，那这个他什么都打印了。看吧，你看这些一杠开头的。

行了，就这意思啊，所以呢，咱们在这块响应的时候，这个正确的，咱们直接就这一个放行就完了，对吧，也就门槛他，你比如说他进小区了，健康宝正常对吧，然后呢，呃，24小时之内的核酸都正常，那就过吧，对吧，人与不干，但是他如果有错误想回来，咱们通过这块判断错误的，所以在这里边咱们就通过判断什么呢？不同的E，你比如说里边的咱说错误处理得通过有个响应里边的stas OK得通过它如果判断这个状态码等于什么200，呃，它错误的一般不是二百二百是成功的对不对，错误的，比如说404对吧，然后我们这块怎么的页面没找到500什么样的，那就根据你这些状态码的一个提示。

对吧，408422429对吧，不能提示，比如说验证错误啊，什么什么错误对不对，然后。把提示信息用一个小弹框给用户提示就行了，所以在这里边咱们会有大量的判断，那这样所有的错误都有提示了，所以你现在看别人的网站，诶，为什么错误提示的提示的那么准确，提示的样都一样，对不对，它不是在每一个里边写的，那写起来太累了，对吧，它是统一写一个错误处理的方式。所以响应拦截在这块起的作用。怎么写啊，我在项目里边教你写，OK，你可以随便加话，因为咱们现在还没学唯E那些提示的弹框啊，对吧，咱们还没学你这块只能直接对吧，写一下就行了。所以你要知道在这里边要写的功能是什么，对吧，提示和提示，但是你呃跳转的话一般怎么写在后不器会写在路由里边叭，如说没登录啊，登录失败啊，这些都可以给他提示，但登录失败要跳转到哪，那是写路由里边的事儿啊，咱先不管那个。

好。到这为止，学这些东西，阿肖告诉你够了。OK，就这么多就够了啊，后期咱就是把它的封装起来就行了。你不管多复杂项目，也就用这么点知识。听懂吧，也就用这么点就完了，不用说看手册里边密密麻麻的这一大堆东西啊，你有兴趣研究的话，你就一个一个去看看好吧。有兴趣研究的话，你去看看，所以呢，学会了这个技术，那以后写就是逻辑的事，就是如何，比如说存token呢，对吧，如判断呢，出弹框呢，对吧，就这点事嘛，然后就一个一个请求，怎么存参数的事就OK了，OK，所以学完这个相当于你项目，假如说你能把这些都写完，项目相当于封装了，写完了1/3了，因为你知道数据怎么获取了，对不对，其实咱写项目做前端工作啊。

嗯嗯，做后端工作最重要的是数据库的增删改查，解决效率的问题，做前端的工作其实是你大量的工作，除了你拿把数据拿过来，大量的你都在写样式，80%的时间你再写CSS，对吧，然后呢，他有一些特效CSS完成不了的，哎，用GS1完成，再把数据一摆，就这么点事。前端就很明了，知道吧，所以大部分都是CSS的工作量，那个太多了。嗯。好吧，这个阿小就这些不用再学太多，就这些就足够了，你要想学太多的话，就找着手册对不对，或者找着文档就行了，然后自己做做实验，要了解一下这个结构就懂吧，开始vuee了。其实。

咱们现在学的像ES6A ourselves，呃外PE load，什么line size对不对，这些都是学框架前的准备，前边咱学那些东西，你不光学VUE有用，对吧，你在学什么？你在学react，学UNAPP，学微小程序都用得上。OK，都一样的东西，这叫呃，Web框架，呃，之前的通用技术。当然前面学的基础都算通用技术，那学没学完呢？学没学全呢？没学全对吧。还有什么呢，你比如像TS啊，就typescript，但是那可用可不用清楚吗？可用可不用，新手那个用那个呢，有可能你还掌握不好。对吧，本身的这个类型的这种用法都没用好的话，你用typescript，那就有可能说更用不好了，所以那个可用可不用的东西，因为像vuee和vuee的什么包装的框架，以及vuee里边用到的，呃，像UI啊，那些组件库，其实它都是基于TS去写的。

都是用TS写的，但是TS也是打包的时候给我们转成了什么JS代码，所以其实就是JS写的，对吧，但是他说都是用TS写的，所以那个东西咱们还没讲，什么时候讲呢，学完vuee的时候再讲就更好一些了，不然那个东西不太好，呃，其实就是基本语法，没什么不太好理解的，就是什么，呃，你不太习惯，OK，因为两种编程风格嘛，两种编程风格啊，就是强制类型而已，让我们代码更健壮一些，那个呢，放在后边讲，而你学其他人的这个vuee的课，他们会怎么讲呢？他不会像我这样把所有你需要学框架之前的东西统一的讲，它都基本上大部分都融在对吧，Vuee里边的，讲讲vuee，完了啪，讲讲wepa，讲讲vuee，哎，讲讲ourselves，讲讲vuee，再讲点什么ES6，这样的话就感觉vuee很难学。

其实VE本身很简单的一个东西。对吧，超级简单的一个东西啊，用它开发也简单，学起来也简单，来认识一下vuee OK，那呃，Vuee全家桶指的是什么意思呢？呃，Vuee它有很多个模，也是有很多个模块组成的，比如说学vuee，呃，你学它除了学它基本语法，你得学它状态管理，那后期你现在不用理解什么状态管理啊，咱没讲到呢，状态管理学它的路由技术对吧？然后呢，学它的组件，然后学它的什么common，呃，组合API，然后学什么后端渲染等等等等，它是分成每一个功能的，对吧？那它属于这一家的成员，所以叫做全家桶，那咱们呢，为什么把这个定义成vuee全家桶呢？就是因为咱们要把这个全家桶，这个家里的成员每一个都给你介绍一遍，都让你用一下，这就。

去千家桶。对了吗？另外呢，学vuee现在咱学的是VUEE3这个版本，嗯，他跟二的版本呢，还是有很大差距的啊，但是几乎二的东西95%以上东西它都是兼容的，你离不开那升级版本，除了他用呃TS重新重写了一套之外。嗯，最主要的是在效率上提高了，使用起来变简单了。OK，加了很多东西，比如说组合HT什么setup那种啊，对不对，那些东西让你更简单了，在学V2，所以现在你是个好时代呢嘛，对吧，你在早学两年，你学的都是那些V12，学V2你会复杂在哪，你知道吗？就是配置文件。

有十几个，好像我都说少了。对吧，才能把这个VE3的环境配起来，哎哟，我天太费劲了，而VE3它讲究什么零配置。零配置，所以你学它就很简单了，比学我觉得比学解块RY booru那感觉都容易，就这意思啊，当然了，这些这这个前端的东西就是有一个最大的一个特点。什么呢？就是更新太快，他跟学别的不一样。对吧。别的呢，因为。呃，前端的核心的技术就是HTMMRC加的，没任何其他东西，HTMC，而咱们学这个东西，有可能说你一个月就把RTMC加就学完了，而假如课程你要学一年，而其他的时间在学什么，像vuee，呃，尤雨西写的对不对，是一个框架，Angel拉JS框架，这框架那框架，包括解query，包括boot，对不对，你能叫上名的，除了T加S的都不算官方的东西。

都是第三方提供的。对吧，那第三方提供100个，那想想100家100家一年有有一半去更新升级版本了，是不是你都需要，假如想用人家的是不是都得去学呀。所以说学前端是学个面，学别的语言对吧，他是学个线，按线去学就好多了，而且按面去学面上对吧，多点它一起升级。对吧，像V13这个东西对吧，所以我在开发的时候，你看我大部分时间，我其实还是在用那个。呃，VV3和VV2之间的切换你知道吧。这个还是比比较痛苦的啊，因为老项目太多了，新项目我现在都在用VV3啊，老项目那个，因为以前就是我们大部分的做网页级的项目都是用那个v err啊，就是呃，后端东西我们都是用react，就这样的一个一个一个结构啊去完成了，就看它生态嘛，像VU3非常好，对不对，但是老项目你没有必要全切过来，你花的项目开发周期对吧，用户都交付了，钱都给了，然后你再重新再开发一遍，对吧，给他升升级没那必要，升完级效果还是这样的，所以呢，老项目维护VVVR还得是VVR，所以像前面说了，我这node我都不敢升级，一升级的话其他东西就会变啊。

那咱们了解一下will这种高级框架，记着学完will这种语法模式，这几个高级框架几乎用法差不多，思想必须它是统一的，都什么呢？你比如说react对吧，思想都是统一的，Voe里有的功能都有，有的voe也差不多有，然后微信小程序开发。

所以你学完它，你得学微小程序，当然微信小程序它有自己的那个，呃，开发工具啊，那个微信小程序开发工具就叫微信小程序开发工具，然后呢，也可以像学UNAPPUNAPP呢就是基于微的一个语法，和微信小程序的那个语法在一起的，就可以开发APPOK。所以学will还是比直接学学，呃，React它是有好帮助的，比这个呢，呃，它也是中国人开发的嘛，有语气开发的，嗯。来看一下，呃，Will。它的读音类似于这个，要知道这个其实读VE都不对，因为view是视图，MVC模式中有一个view是视图，就前端界面那种UI的地方，对吧，所以它取了一个谐音就叫will。

那咱读白了三个字母voe will的话，怕别人误解，反正我读读什么无所谓了，你你别别人说，别人读will你不知道是什么就行，然后呢。它的官网和教程可以打开啊。发下手就对过了。这官网虽然它是呃中国人开发的，但是呢，这个域名呢，都是国外的啊，所以大家要学会什么，建议大家科学上网，不然的话你打开GIHUB都会很慢，对吧，有可能打十次的话，有八次都是失败的。诶，再回回过来啊。为什么说我建议你打开这个官网和这个教程。

做实验的时候，因为最新最新的版本对吧，我不一定全用过，对吧，他有可能有差距，有的语法它就会有有变化，天天变就有那种感觉，天天变啊，你今天用，就算我今天把它弄明白，比如说明天能用，那有可能说又变了。所以这个前端东西就就是这样的啊，所以你要盯着点这个这个呃文档。看。就查啊，也没变化，咱就不查了，就是按我给你总结的，不然呢，文档也比较乱，然后呢，呃，有一些东西你就直接搜索就行，除了我讲的这些东西，在用的时候去搜索就可以啊，嗯，不用盯着手册去从头到尾，因为后边你大体的知道了一些小的细节，对吧，你一搜诶就有压力，挺好的。他的特点，你说说这些介绍这些理论的话，都是为了什么，为了假如说你面试啊，对吧，题的时候要知道，你比如说渐进式，那什么是渐进式啊。

渐进就逐渐的去往里加对吧。就跟这个图片一样，开发根据需求对吧，逐渐递增所需要的方式，你比如说我开发一个页面，哎，就开发了，那我需要什么，我需要两个页面，诶我再加上路由，那我多个页面都需要登录的状态，哎，我加上状态管理对吧，逐渐加功能渐进式的，所以呢，全家桶嘛。对吧，需要一功能加一个，需要功能加一个，需要功能加一个就行了，就这意思，然后。呃，重要的两个核心概念。非常非常重要的两个核心概念啊，也就是在我们。嗯。Vuee里边。VE里边最重要的就是什么，不是do操作方式了。

你不学这些高级框架，这些高级框架都不是盗墓的方式了，都叫做虚拟盗墓。后边我给大家讲一讲什么虚拟盗墓。倒模的方式，咱说了文档对象模型任何一个点。比如说我想把。这里边儿反选这个字，我想把它什么编出。变绿，如果用样式操作的话，你得用选择器找到它给样式，如果想用程序鼠标一放上去变成这个对不对，那你就得什么鼠标放上去事件，然后是不是得找到这个对象，然后调用这个对象里边的什么什么属性样式属性把它变颜色呀，对不对，这是倒的方式，找到对象操作这个对象，这是盗墓的方式，虚拟盗墓它不是这样的。虚拟DOM呢，它是呃，相当于在内存里边虚拟出来一个临时的一个这样的一个do啊，这个后边咱就详细讲，先不在这说了，最重要就是什么响应式数据绑定这个。

呃，前边你不管是用DOM做过开发，还是用解块做过开发，那些都是基于DOM的。嗯，基于盗的特效呢，就是我想让它比如说一个呃，一个球在页面上滚来滚去，那我就得操作它滚来滚去，每次滚动一下，我得刷新一下页面啊，或者是更新一下它的位置啊之类这么去做，而VE这种它有个响应式数据绑定，诶这个非常的了不起。有人说，什么叫做非常的了不起啊？也就是GS数据变化。那页面上的。这个模板中的数据，它就会跟着变化，这就叫响应数。那模板上数据变化，JS的数据也会变化。它俩相当于是类似于一个引用的关系，所以有了这种应式，大家现在不理解没关系啊，一会儿我给大家稍微做做实验，大家就清楚了。有了这种响应式，那任何一个特效写起来比原来我给你可以说容易五到十倍。

你可以随随便你找以前你写的用DOM写的特效。有了数据响应的话，你会方便五到十倍。清楚吗？这就是大家爱用它的一个原因，因为所有的特效，如果用盗墓那种操作方式，无非都加上定时器，怎么处理啊，改变它的位置啊，改变它的颜色呀，对吧？而我们这个只要在程序的改变页面它就变了，这就显示页面变了，程序它就变了，OK，可以是双向绑定。另外。这是响应数据，写某一个小特效特别重要。另外，组件。这个东西太好了，你以前在写程序的时候，当时说虽然程序的核心是HTML，它是一个模板文件对吧，然后呢，CSS，然后GS3个组成。

那三个组成，你把一个页面是当成一个组件了。当成一个组件，这样的话不好分割，不好处理，对不对。而我们在。这些高级框架里边，不光是vuee里边啊，现在讲究的是组件式开发。基于组件的开发，也就任何一个小的特效都是独立的HTML，独立的CSS，独立的javascript。好处在哪儿？你做好一个组件，你可以到处去使用。所以呢，你写voe工作就是编写一个一个小组件。OK，那就方便多了，这个讲组件的时候，一旦我教你写会几个组件，你再想想啊，总之用了voe和react，你前面的编程方法就不爱用了。也就是现在。你比如说现在我写项目，你要我不用VOOE不用框架，还用几块那种写法，诶还用不这样那种写法，真的懒得去写清楚吗？如果有客户有这样的需求，这活我都宁愿不接。

所以大家也知道，学完这个前面的方法就可以忘掉了，就是时代的进步已经过时了，原来的东西已经过时了，OK，就像现在大夫去看病，就是这个大夫看病，在医院里边什么望闻问切，那是以前的方式，现在过去就化验做仪器，对不对？现在想象一下。那种以前的看病方式已经过时了，现在大夫离开仪器，他已经不会看病了，对吧？是一样的，时代进步以后，根本也离不开仪器，而且到处哪个医院它都有仪器。听懂吗？那框架也是一样的，现在既然所有的项目都改成这种方式了，以前项目会逐渐的淘汰，完全会淘汰，包括小项目，你用vuee也行。OK，那咱来稍稍体验一下，了解一下这个真正学vuee没有说用这种，呃去去弄的，但是别人教你用这种，我觉得那瞎教他是。

加大了你的理解度和复杂度，用这种方式，所以咱们这种方式去体验一下什么叫体验，就是不是用NPM装，也不用脚手架那种，就像以前开发方式那种用法，知道吗。这样没有这么用的，这样做不了大的东西，做个小页面啊，一两个页面啊，这么用还可以，OK多了不行。那看一下怎么个吸丁方法，那就像装解块呀，或者是什么其他的方式一样，找一个boot吸丁，当然西丁有很多啊，这个找个vuee。嗯，你看vuee是一套用于构建界面的，我现在没有NPM装啊，如果用NPM装的话，我得到NPMJS那里边去找对不对，这个good的系列我想复制一个系列就也不要你用外派，也不要你用什么NPM就可以直接写简单vuee的就这种啊，实际开发不用的，只是体验用的啊，你看它用于大型框架。

然后这里边你看VE，现在这里边能看到他的最新版本是3.2.37对不对，那咱就找一个，呃。3.237找一个浏览器的。Global。这个试一下。所以在做一个项目的时候，那我们在这地方。使用这个，然后我们呃建一个index index.html项目结构都没有啊。然后在这里边加一个script script，然后RC把这个拿过来，这样vuee就有了，你在这个页面就可以用了，就这意思，OK，是不是感觉挺方便的，对吧，这样就可以用了啊，那在这里边用的时候，那我们首先呢。

当然我不不确定这个能不能用啊，因为它这里边好多版本呢，那先怎么的做一个div，看一下原理啊，然后起个ID，我们叫APP用vuee的话，那整个页面的所有的都是用JS去写程序去响应的啊，只要写一个APP在这块，那我是不是就得写一段什么，呃，就得写一个。呃，有这个是不是就得有JS啊，我得把APP给绑定这块啊，现在咱还我不用这给你写组件，就看我程序怎么能运行起来就行了啊。然后写一个呃，Script程序在这里边，如果在A2的时候，我正好不有一个。

什么模板嘛，这里边写程序吗？ID是不是这个对不对，如果在VUE2里边的时候，通常都是这样，什么cost创建一个APP，等于使用什么new一个VE这样，然后呢，咱说里边写什么，写它的配置文件。在这里边写它的配置文件。OK，然后配置文件里边得绑定什么。得跟这个得绑定上啊，这里边操作是类似虚拟盗，是这里边的内容啊，所以呢，得绑定它V2里边叫什么呢？叫EL好像是对吧，然后井号APP这样去用，就跟这个绑定上了，然后在这里边有的数据上面显示之类的，就是这样，那现在。我注意点咱不这么写，在UEE3，咱们现在用的是VUEE3这个版本，VE3呢，那也是什么，也是cost创建一个什么APP这个对象，然后呢，呃，使用VE里边有一个方法，有一个叫C，它这没提示，呃有提示了，Create create创建A。

好像不对呢，创建APP我先给你写这格式吧，是通过这种方法创建一个APP的，也就是创建咱们每个呃项目都叫做APP嘛，对吧，每个项目都叫APP创建APP，然后这里边写的就是什么数据JSJS写在J森里边，都写在这个里边，然后呢，写的这个程序处理哪个模板处理它，所以它是用什么，它是用挂载的方式，看用挂载的方式，Mon挂载什么呢？挂载到这里边。

井号APP，也就是把这个。而TML这个模板就挂载到什么这个JS程序上了，所以在这里边我处理的时候，在这里边处理写程序的时候，其实就处理挂载点的这里边的模法，那这里边能写什么，这是咱学voe基本语法里边要学的啊，看你比如说里边得写dat数据，诶数据我这里边是接森格式，我这写的是一个方法，OK，然后呢，在VV3里边不能直接在这里边写阶层格式，而是这是一个方法，方法里边要写上return返回的阶层格式才是写的数据，以前的方法是直接data冒号这样去直接写数据，而现在就是V12的写法啊，V3好多都是什么？

写到一个方法里边，再返回的阶子这里写数据，那什么是数据啊，就是因为就是这个数据mesl，我随便写一个，比如说这是一个字符串，你看这是一个字符串数据，那就意味着什么，你看响应式的这块不是返回一个变量吗？那。这个地方它就变化，Mess用这个写在模板里边，Mess可以加多个，你看BRESS看到了吧。然后我们访问一下。我现在是直接写到HTM页面里的啊，直接写到RTM里边直接访问就可以。看这块儿是不是就把这两个字符串给我们显示了。显示了，而且我现在可以操作这两个诶。

摁错了，摁F12啊，按F11去了，你看在控制台里边。我是不是创建了一个对象，什么对象是不是APP，那APP这个return返回来的数据，这个数据就相当于是APP的成员属性，所以呢，我可以APP对象点去访问这个属性，对吧？那你看这块我这块你看页面会不会变化啊，你看p.mess是不是就能访问它，哈喽，你看上面就变成哈了，看到了吗。所以这就叫形式，我改变的是GI的程序，程序变了，页面就变。对了吧，那我这里边app.mess我这一个变量我改成100。你看上面就变成100了。看到没？这就是想的数据。这个对象也就是写在date数据里边的返回的这个就相当于是APP里的成员属性，那成员属性有一个可以，我可不可以有两个呀。

对吧，M0可以啊，对吧。那。一个对象里边可以有，因为这写在这个配置文件里边啊，就挂载点挂在这儿的，所以呢，咱们这个数据里边就得在挂载点里边，这里才有效，你写在外边是没效的啊，我也不给你说了，那这里边是阶层格式，不能用分号啊，得用逗号，那这里边有成员属性，没有成员方法呀，有啊。所有的方法你要写在什么方法要写在。这个里边杰森，然后这里边可以写很多方法，你比如说万方法，然后to方法，这里边比如说log，我打印一行一。

这里边呃，Log我打印一行二，我完全写的接森格式，所以我在讲ES6跟大家说过，阶层格式非常的重要，对吧，里边怎么定义方法，怎么定义东西对不对。One和two，那这俩怎么调用呢？你比如说我在这块加一个。嗯，加一个按钮吧，BOT to按钮对吧，呃，Y点击这个加个这块可以加事件，用click就可以，艾符click点击的时候调用Y。啊，然后点击to的时候，我就用to。这个方法就相当于乘以方法，那可以在这调用，我还可以怎么调用呢？刷新一下啊，看是不是one two APP，是不是这个对象app.one方法回车。

你看是不是打一行一对吧，app.two方法是不是打一行二，所以呢，写在这个里边的代表的是成员属性返回的这成员方法，那成员属性里边能不能访问成员方法呢？可以，当然这两个点按钮也是一样的，看到了吗？在上面可以调用它的，那成员属性可不可以反问成员方法呢？比如这不写零嘛，那我这块写一个呃数呃写一个是ad相加的一个方法吧，我点击一下将这个数相加，成员属性访问传方法是不是用Z次啊z.nu我加加你看。就行了，然后比如说我再来个减减减减基减减方法逗号啊，然后我在这块只要这加的话，我将这4.num减减，因为我只要操作这里边数据，这里边数据变化页面上用到这个数据是不是就变化，那我在这块再加一个按钮压加一个。

嗯，Bottom错了。那个BT to这块，然后加号，然后这块来一个。呃，数量数量这个是nu，然后在btto。拿过来这啊。然后BOT ton，然后来个减号，加号的时候我直接点击调用on click，不是click啊，调用什么这里边的方法ADD加减的时候我调用这个方法，先不用管这密码，它现在是体验啊，G减你看。

我加加的时候，我不是改变这个，没操作这个，我是不是只要这个方法操作这个变化，它变化了这个值就变化成相当于乘以方法里边操作成员属性嘛，那这个变化了我一点加加的时候响应是数据，也就是这里边数据变化，那这就变化，这变化下边就变化，可以是双向绑定的，但我现在没有双向绑定。你看这块加看到了吗？是不是特效就有了变化，所以不用刷新页面，什么都不用对吧？就可以了，那你在这块下边你还可以打印。非常的方便，写特效那操作样式也是一样的，只要是值加变化就变化了，那后期咱们写好多特效的时候，都是一两条代码就可以搞定一个特效的，对吧？如果用道的方式，那你要操作怎么绕很大的个弯，而这个呢，就是太直白了。

所以用这个体验一下响应数据，体验一下这个，但这里边不光是这两个方法里边能有十多个成员，咱说只要是配置项是不是都是固定的，这些都是固定的，对吧，有十多项的清楚吧，而不止这两项啊。好吧，这就是咱们这个，呃，内容体验一下，了解一下什么是vuee，还有我跟大家说了，你这样可以，现在你看这我写单个页面，按以前的开发方式用vuee是不是就可以写程序了，比引用解块RY写程序是不是还是还方便呢？对吧，但是这样做不了工程化，做不了大东西，你做个单一的页面什么玩玩还行啊，没有这么玩的，那它的优势也发挥不出来，什么组件化的优势啊和什么什么的优势啊都发挥不出来，如果想更好的去应用它，那咱们就得用到什么脚手架的方式，那才是真正的学VEOK，所有工程化的，然后他的全家桶才能一个一个的用上。

这也都可以，但是会很麻烦，你建个组件啊或者什么的，特别的麻烦啊，所以你看手册也好，或者看别人讲的也好，都在这里边儿，什么包含什么创建模板，模板又引用，模板又嵌套，哎，太累了，对吧，你又学懵了，然后呢。实际开发又用不到，所以咱就这个就过了，因为咱已经学了wipa了，所以直接上这个，他就是封装pad，那你就能把vuee学明白了，OK。