29.前端技术-Vue入门和差值表达式原创

各位同学大家好，欢迎继续收看硅谷课堂项目视频课程，下面呢，咱们继续来学习前端中的技术知识。下面咱们来讲解下一个技术，技术的名字叫做view，或者叫view，那我们下面来看，在view里边呢，我们主要讲解以下几个内容，首先在V中的差值表达式，第二个指令，第三个生命周期，第四个路由和组件，那下面我们继续来看一下相关内容。首先第一个各位知道啊，View或者叫view是一个用于构建用户界面的一个渐进式框架，在前端开发中，这框架应用极其广泛，我们项目中就采用VE来实现咱们项目中的前端开发，那下面呢，我们先快速写一个入门案例，让各位感受一下VI的一个基本使用。下面我们来看一下。

首先我在这个位置，我先建一个文件夹，名字就叫we。然后在VE中我来创建第一个文件，我们叫零一入门案例，点HTML把这个代码生成出来，这是我们一个基本创建，然后创建之后在里边怎么做，给各位说它的过程啊，首先第一个因为咱要用一个新的框架，所以第一步要干什么。各位可以想一下第一步做什么，比如说咱们当时讲的买plus，第一步是不是先引入依赖呀，所以目前跟他一样，你要用v voe第一步需要先引入voe的JS文件，这是咱的第一步，那这里边我们来引入一下。这个文件呢，你可以联网去下载，就这是他的官方网址，我这里边已经下载好了，咱们看一下在我资料里边有一个voe，然后里边有一个叫vouee.js文件，咱把这个文件复制过来就可以了，那我们来进行复制。

但是复制中啊，一个小问题，你在这里边点复制，然后在这个位置我们点粘贴，这么做是复制不过来的，你需要在它那个文件夹里边直接复制过去，那我现在就够复制我这个文件夹在D盘。有一个code。然后里边有硅谷课堂，在位置有VE，把它复制过来，这是咱们的第一步，先复制JS文件，然后复制之后在页面中把文件咱们给它引入进来。那我来写一下，加上。里边加上src，因为我的文件和页面在同一个路径，我可以加上一个点杠，Voe JS或者点杠可以省略，因为它是图形目录，所以这就是第一步引入JS文件，然后引入之后我们写第二步，第二步怎么做呢？在这里边呢，你需要建个标签，标签中显示你的内容，就voe中的内容，那标签我来做个创建名字，其实可以随便用标签，咱一般推荐用div标签，因为它会特别方建。

在div中给它加上属性ID，然后起个名字，名字随便起，我就叫APP，就是应用，这个第二步完成，然后第三步咱来编写Java代码，最终我们就实现，那我们来看一下怎么做啊。首先引入文件之后直接上一个vuee。然后在里边加上它的属性和它的值，它里边有固定的几个属性名字，第一个EL。我先写，然后我都做解释。然后里边第二个属性叫做date。

这个咱也加上，另外还有其他属性咱先列出来，后面咱都会用到，比如说里边还有一个叫methods等等，有很多，那我们来看一下啊，先说第一个ELEL什么意思呢？就是指定你voe最终要在页面中的哪个标签中进行显示，咱们要在div中进显示，所以里边加了什么，你加上一个井号，再加上你标签的ID名称，我们标签是APP，把它加进去，这是第一部分执行标签的位置，如果你是别的名字，那跟你名字要保持一致，我这里是APP。第二个是这个date date中干什么呢？定义你的变量，或者说定义你的初始值。那咱们来写一下，比如说现在我加上一个初始的这个变量名字，我们就叫message。然后它的值我随便写一个就叫hello will，这个我们就完成，当然里边可以有方法，咱先做一个简单入门，这个先去掉，后面咱们写到再加上methods，所以这是一个最基本的结构，咱们现在通过这个编写把这个入门结构就完成了，完成之后注意啊，这里边我现在是不是有个这个变量名称和值，我们可以在div中把这值在页面中显示出来，那怎么做用到这么一个东西？

我来写一下。这个东西是什么呢？它叫做差值表达式，通过这个能取到你date中那个变量的值，那咱来写一下啊，注意这个写法，两个大括号里边加上名称，名称是message，这样的话咱一访问，在页面中把hello wee就可以显示出来。咱们看一下最后结果，看他是怎么样的，现在我来访问。

这里边数据是不出来了，Helloe，之前提到过，如果你的浏览器或者系统原因，它没有弹出来也无所谓，你用幺二七点零点零一五五零零点开vuee，点开文件直接也能看到效果。所以目前这个最基本的入门案例我们就完成了，通过案例大家能感受到voe的这个相关特点。同时咱也演示出来这个差值表达式的使用，用于获取date中定义的变量的值。这个赶紧完成。然后大家看一下啊，在我课件中这里也写到了，其实vuee呢，它这个底层给咱们封装了很多东西，就是咱们这个过程，如果你写原生代码，那他用的是这个倒透度，但vuee中他把这过程给我们影实线，如果你原生线法，那你怎么做，先用do得到你D标签，然后向里边再写内容，但是现在通过插值表达式把这过程直接可以获取到，不需要咱们编写繁琐的道操作，这是它的方便的地方。

所以这个我们就完成了，入万力，大家把这过程能自己操作出来，然后这个完成之后呢，下面呢，咱们做这么一个事情啊，其实这个事情可以不做，但是为了后面方便，什么事情呢，咱来抽取一个代码片段。什么叫代码片段？解释一下啊，大家注意，我刚才写代码的时候，输入一个感叹号H条，代码是不是就能生成出来，所以我们现在也可以做成相同效果，因为大家看到啊，这一段代码结构是不是固定的，只要你用vuee都需要引入这次文件，创建DV标签new voe都需要写这个，所以咱可以用相同的方式也抽取一下，比如我输入一个关键字，然后他把代码能生成出来，这就叫抽取代码片段。

那下面再来抽取一下，我说一下怎么做啊，给各位演示，首先第一个过程，你点文件里边有一个叫首选项，首选项中有一个叫用户片段。通过它可以进行抽取，还有第二种方式，点这个齿轮的图标，点一个叫用户代码片段也能进入，两种方式都是一样的，我就这么来做，点它，然后在里边这个位置，你看啊，叫新建全局代码片段，这是我之前讲的东西，默认应该是没有的，那我们新建一个点这个。然后点完之后输入你代码片段的名称，注意名称有个特点啊，就这个。它后缀名是固定的，前面你可以随便起，那咱们把这个复制一下，我来创建一个代码片段，再来创建。输一个名字啊，这之前创建过了，那我重新输入一个啊，这个硅谷课堂。

推车现在创建了，创建之后呢，里边加上模板内容，这模板内容我在课件中都写好了，咱们直接复制过来，其实就是咱们那个HTL代码里边带voe的部分，把这个咱直接ctrl a ctrl c复制，然后咱E保存就完成了，代码片段抽取完成之后，咱们怎么用说明啊。大家看这句话。Prefix。什么意思？是不是有前缀的意思？所以咱们做法就是在页面中输入这个关键字voe，而L它就会生成咱们voe的相关代码，那咱们来试一下，看一下它的效果怎么样。我写一下啊。这个位置代码片段的这么一个测试。HT，注意我的写法啊VE啊，因为我之前建了多个，默认应该是一个，然后你看出来之后，我一点代码出来了，它里边有div，有JS文件，包括有它的基础结构，咱们在里边可以完成咱们后续代码的编写。

所以以上就是咱们做的入门案例，包括代码片段，抽取代码片段，为了一会儿咱们测试方便，所以这个咱就做到了，然后在过程中咱也顺带把这个差值表达式也完成了，一会儿咱们继续演示。Voe中的指令、生命周期、路由和组件。