day03【项目前端相关基础知识一】/11-尚硅谷-谷粒学院-前端技术-vue入门

下面啊，咱们开始讲这个voe，首先啊，对voe我先做一个最基本的介绍，然后咱来学习voe到底应该怎么去用啊，我这里边列出了voe中最常用一些用法，都是咱们后面会直接用到的东西。那咱们看一下啊，首先我在课件中写到viewe，读成叫view，或者说view啊，都一样，然后它是什么呢？这里写到是一套用于构建用户界面的渐进式框架，因为它的主要作用是用于构建用户界面，另外它是一个框架啊，这叫vouee，说的简单点啊，咱们在之前的Java web阶段之前我也提到过这点，咱们学过JSP，学过JSTL，学过这个EL表R式，用这些，比如咱们用javascript能发送al请求，得到数据，在我们的页面中用那个JTL，比如for each便利，然后EF比R取值，最终数据可以显示。当时咱web阶段是那么来做到的，要用到很多技术，既有GST，又有GSTL标签库，又有养老表式，又有什么其他东西，但是现在我们用vouee之后，这些技术都可以不用，因为它里面就包含了编那些东西，你可以理解为之前的些功能。

咱现在用vouee都可以做到，但Vue的做法比之前更加方便，更加简单啊，这是咱要说的vouee，而vouee中也有更多强大的功能，所以咱们现在对于我们的前端开发中，Voe用的是很多的，因为它能够快速构建出咱们的用户界面，包括你之前那个JPJTL也要表示过程，它都可以做到，这叫vuee啊，是目前用到很多的框架。但是针对这个前端框架给大家推提点啊，在目前的市面上有很多类似于vuee前端框架就有很多很多，只是说vuee应该是目前比较流行的，但是它不仅肯定不仅限于VE，但是如果说你以后公司中啊用到其他的前算框架，其实用法跟vuee应该说都差不多，不会有太大区别啊，所以咱们选举vuee对于我们的项目中使用啊，这个各位知道。

你就知道它是一个用于构建页面的一个框架，我们之前JSTL式一些功能用它都可以做到啊，这叫vuee。那这个做了一个介绍，大家知道啊，然后这里边有个官网啊，咱就不看了啊，各位课下可以把这网站打开看一看，它的官网上一些基本描述啊，然后咱们这个说完之后，下面呢，咱先写一个Vue，一个最简单的入门，让大家知道VE中一些最基本的特点，或者voe一个最基本的开发过程该怎么去做，就咱们先写个voe的一个入门案例啊，咱先感受一下这东西该怎么去用。啊，那我来画个图啊，咱讲vuee。就vouee啊，刚才写到是一个用于构建页面的一个前端的一个框架，然后咱下面就来写一个vuee这么一个入门的案例啊，大家来感受一下voe这个使用方式，那怎么做我写一下啊，写一下它的步骤，首先第一步操作啊，咱们肯定是先建一个H墙文件，那这位置我来创建一个啊。

我在这里边，比如说为了明显，我就再来建个文件夹，咱就叫VE。SIM啊，专门创建，然后在里边呢，我建个文件，比如说我就调这个啊，咱就来一个零一啊，就是VE这个入门点HTML啊，建这么一个HTM文件，这是我们做的第一个啊，然后进完之后呢，咱需要在里边啊，写上这么一段HTML代码，因为这么写更加清晰啊，就是写一段HTM代码，那代码怎么写，我说各位是否记得啊，但是现在呢，因为咱们用了这个VSQ的这个工具，里边有个快捷键能帮咱们生成出那个H代码啊，有个快捷键能生成。

那快捷键是什么呢？咱直接在里边输入一个叫感叹号，你看啊，比如现在我再演一遍，输入感叹号，下面有个提示，然后你点它。这个A代码就给咱生出来了啊，我再演示一遍啊，输入个感叹号，然后你点上面这个代码就有了，这是一段条代码，所以咱们把这个页面先创建啊，这是它的第一步。就是建一个页面。层写一下啊，创建一个HTML页面，然后咱使用那个啊，就是使用Vs code啊，它那个快捷键。啊，快捷键来生成一段H代码。它的快捷键啊，就是你写个感叹号就可以生成啊，快捷键就是一个感叹号，这是我们的第一步操作啊，咱刚才已经快要做到了，比如各位给他自己实际去试一下啊，然后这步做到之后，下面咱做一下里边的第二步操作啊，给大家写一下第二步。

那第二步我们要怎么做呢？给大家说明啊，咱们在之前呢，应该都学过这query会应该都学过啊，只是说可能很久你忘记了，但是咱肯定是学过的，而咱用这块的时候，不知各位是否记得啊，要用query首先要干什么？我说各位是否清楚啊，咱是不是要在页面中引入一个这块那个KS的库文件呀，是不是要引入啊，这是咱们当时做法，而现在一样，你要用vuee也是这么做啊，第二步就是咱需要在页面中需要先引入一个vuee的这么一个JS文件。它就类似于咱那个给query，因为给query有一个文件，Voe中也需要有一个文件，这就是他的第二步操作啊，那这个文件咱都会引入，这文件呢，就是咱可以到它的官网上去下载，但我这里边给大家已经提供出来了啊，在哪里呢？就是在我这个。

资料里边有一个叫前端相关资源，然后在里边一个地方叫voe啊，这里边有vouee的这个JS文件啊，咱把这个直接拿回去可以了，这个大家已经听出来了啊，就是咱们用这个vouee或者这个都可以啊。你一个是压缩的，一个是普通的啊，你把这个需要做个引入，这是咱的第二个操作啊，那这个咱就给它引下啊。怎么引入呢？首先第一步为了方便，我把这文件我用这个了啊压缩的先给它复制到我们当前这个文件夹中来，但是这个复制啊，有个小问题啊，你直接这里粘贴复制过来，你需要给它复制到那个文件夹中啊，那我们找到啊这个文件夹，我这个应该是在，呃，应该是在E盘。然后是work vs1010，然后咱是这个voe DEMO在这里边我们做个复制啊，就这个文件叫voe mean.js把这文件拿过来，然后拿回来之后咱们在页面中把这个文件给它就引进来，就引一个JS文件。

那怎么引啊，应该是我们Java所中学到的啊，咱们加上一个script标签，然后标签中呢，加个属性叫做src，在src里边加上你文件那个路径和名称，因为咱们是在同一个目录，我就叫voe命点加S啊，这一步就做了一个引入，这是我们做的第二步操作，把JS文件引入到你这个里边来。啊，第二步我把这个啊给大家。接过来啊，你知道它有这么一个步骤。这个啊做到了啊，这是第二步操作，咱们就。完成了啊。然后这个完成之后呢，下面咱开始写的就是一段voe的代码，而voe的代码可以说也是一个比较固定的结构啊，那我们来先来大概看一下啊，然后再写代码，首先怎么写呢？你要写代码中第一部分，在你页面中先加上一个div啊，当然规一定是div，你需要加个标签，只要在标签中加个ID值，这个目的是什么呢？就是为了你的内容在里面进行显示，就规定你的内容在什么地方显示，咱需要加一个标签，一般我们用的都是div div个。

然后加完之后，下面写一段这所代码啊，就这段代码啊，那我来写一下啊，咱写的步骤，这算是一个入门的过程啊。咱现在写第三步。第三步怎么做呢？在我们的LT页面中，我们创建一个div标签，然后这个div的标签里边。咱们添加上一个啊，就添加一个那个ID的属性啊，这是第三步，那大来写一下啊，在这里边，比如现在我在这个位置，我就加上一个。

Div的标签，然后在div中呢，加上一个ID的属性，里边起个名字，这个名字随便起啊，比如我就叫APP啊，这个再给它加上，这是我们做的第三步。啊，这不是必须的啊，要是你不加他的话，你这个内容没有地方显示，咱加他的目的为了你能够显示你那个具体的内容的地方。啊，这是第三步啊。给大家画一下啊，然后这步做到之后，咱进入到第四步，也就是我们最核心步骤，第四步咱就要编写voe的那个代码，这个代码是一个固定的一个结构。啊，那我们写一下这个代码啊，咱们看怎么来做啊，咱先看一下啊，它的做法就是在扎标签中，咱们newgo voe，然后里边有这么一个部分啊，这个我就直接注过来了啊，然后咱们解释一下，因为结构是固定的啊，当然里边有更多属性，咱讲到中后边会依次往里边加。

我小位置啊，写一个javascript这个标签，然后里边加上这么一个结构，那结构说一下怎么是固定的啊，第一步谬will这是不变的，然后括号大括号，在大括号这里边。你注意啊。这个是一个固定结构，然后在里边有这么一部分，首先这个EL是必须的，然后这个EL什么意思呢？大家看啊，这里写了一个叫井号APP，这APP是什么？就是它，它就表示啊，得到你这个div标签，然后向里边写那容，而它的底层用的就是咱们之前学那个给块RY，不是各位是否记得啊，Dollar符号括号，然后加个井号APP底层就这么做到了，通过这个ID取了一个标签，只是现在在VE中直接EL井号APP这个名字跟他要对上加里这里写A，这里也写A啊，这是一个范围。

然后写完之后，下面还有一个属性叫date，这里边表示啊，可以定义一些初始值，比如说类似于我们Java中定义变量啊，这个是里边是随便写的。就是说这个结构固定的。然后在里边你可以随便写内容，比如说我这里边我写了一个叫message，叫hello vee啊，这是我们写的那个具体内容，这就是voe的这么一个基本结构，我们就是这么来做啊，所以大家记住这个结构。我把这个啊给大家复制过来。是一个固定的这么一个结构。这里啊。就是它啊，所以咱们写了这个第四步啊，然后洗完之后，现在我强调啊，最后咱要看个效果，那怎么看效果呢？给大家说明，咱们在Java web阶段，我们是不是学过叫EL表达式啊，就是咱们当时啊，应该这么写的Dollar符号括号，比如里边加个什么什么名字啊，EL表达式，把什么值取到啊，打括号，然后加上EL表达式，但是现在呢，我们这里边在voe中也可以取值，取什么值呢？比如刚才我在date中，咱定义一个名字是不是叫message。

值是不是叫hello will啊，就是一个名称和值，那我现在根据message把这hello wille可以给它取出来，那怎么取？这里给大家说明啊，在咱们的VE里边有这么一种表达式，它这个跟E表式的作用有点类似，但是它不叫亚表式，它叫什么呢？我写到这个位置啊，就咱说的最后一步。我们第五步，我们可以使用一个东西，它叫这个名字啊。大家看这词它叫做差值表达式啊，这是它一个描述，跟咱说的也要表达式有点类似，我们使用差值表达式就可以获取到你那个贝塔里边。

我们定义的那个值啊，用它可以得到这叫差值表达式，而表达式怎么写，然后各位记住啊，它的写法比较特殊一点啊，这么来写。就是你写两个大括号。然后里边加上就是你要获取那个值的那个名称，比如说我们现在想得到hello，它的名称叫message，里边就想个message啊，这是第五步，用差值表示可以去里面的值啊。主要这个东西，那咱们来给它最终试一下啊，我就在里边加叉表示啊，就这么来写，直接把这值取到。啊，就这个啊。那大来写一下啊。给加个注释，加个差值表示就是两个大括号里边你加个。Message message，它就是对应这个hello view，你这么做，根据名称把值取道，类似于咱们外部阶段学那个就是yellow表达式啊，跟它有点类似，所以voe基本结构就这么多啊，这是一个基本写法。

我再重复一遍，然后大家看效果啊，它的做法就是第一个咱先建个页面啊，咱直接弄个感叹号能生出来，第二步引入voe的JS文件，这个文件我在资料中提供出来，各位给它复制过来，但是复制的话，你直接在这里边复制不了，需要复制到它的文件夹中，在文件夹中复制过来，然后复制之后页面中引入JS文件，引入之后咱加个div，为了显示内容，加完div之后，下面写这么一段voe代码，是一个固定结构new view e里边就是取到你这个值，At中定义你这个。就是基本的数据，比如这是名称，这是值，那我们取这个值，通过差值表式可以取到啊，就这么一个结构，那咱们来试一下效果啊，我们来执行。转到页面中，大家啊，看我的页面中，在页面中这位置输出的是不是叫hello will，而这hello will是不是就是我们定义的Mac这个值啊，就是这么一个效果啊，所以咱们通过它把这个我们就完成了啊，就是一个最基本的一个入门的这么一个操作。

啊，这是voe的这么一部分。也就是一种比较固定的写法啊，大家知道啊，就是第一次写的时候可以可可能觉得啊，这稍微麻烦一点，但是等你写作之后会发现它的结构都是固定的，而我们后面其实主要需要写的就是协议怎么取值，怎么往里面设置值啊，其他地方就不需要做成变化。就是这么一个基本例子啊。然后这张图我先保存一下啊。就咱说的B。六个啊，就是VE这么一个。入门的案例。这个啊，我们就做了一个说明啊，所以大家把这个案例能给他弄出来啊，就是里边基本结构啊，这些不能少啊，当然这里边还有一个细节啊，因为咱们写这种前端代码，它不像咱后端前端代码写的过程中啊，特别灵活，在这过程中就是这里边的顺序，其实无所谓，你在上在下都可以，比如我这个行放到上面，这放到下边都可以啊，这没有什么特别要求，因为它没有这种关系啊。

这个我们完成了啊。