32-尚硅谷-尚医通-前端知识点-Vue-入门案例

大家好，欢迎继续收看上硅谷视频课程，我们继续来学习前端的相关基础知识。在前面内容中呢，给大家讲到了ES6中的基本语法，我们分别演示了包括里边的变量定义、常量定义以及模板字符串、对象对象拓展、运算符以及箭头函数等的使用。那我们下面继续学习前端中的另外一个知识，因为咱们在后面项目中要用到这个知识，那这个东西是什么呢？它就叫做voe，或者读成叫V，所以下面我们就来学习voe中的一些基本知识。然后首先给大家介绍一下这个vuee它到底是什么，包括咱们学vuee的时候，主要学习里边的这些东西，就是它的基本的指令。那我们下面先看一下vouee到底是什么，给各位自我介绍，这段话呢，是他一段历史，我就不在这里边给各位读一遍了，各位感兴趣可以看一下，然后咱们看它的核心部分，Voe呢是一款流行的javascript计算框架，就是它本质上就是扎va，它的目的是什么呢？

大家看到为了简化我们的外部开发，而vuee所关心的核心是MVC模式中的视图层，它同时也能方便的获取数据更新，实现视图与模型的交互。所以大家知道vouee是一个扎随的线能框架，用它能够更方便的实现我们页面的这些计换操作，所以咱们现在就来讲这个vouee，而voe是目前一个很流行的框架，它这个流行度比这个安拉、JS，包括j query都要流行很多，所以咱们选取它作为我们的项目使用。那voe怎么用呢？首先呢，带着各位咱们先写一个voe的一个快速入门，让大家感受一下vouee到底该怎么去使用，那我们来看一下。

然后现在呢，我在这里边，比如说我先建个文件夹，我们就叫vuee或者叫view，然后在vuee里边呢，我们给它创建一个H条文件，这单调零一就是。入门点HTML把它创建。然后创建之后呢，在里边写上HTM的基本代码，然后写完之后在里边来实现vuee的操作，那vuee怎么做呢？给各位强调，咱们之前呢，各位都学过j query，那我问各位。你说这块咱该怎么用。首先，你要做什么事情？我觉得各位应该知道啊，咱们首先是不是要引入这块那个库文件呀，然后在里边再写上是不是这块代码，而voe跟它一样，第一步咱们需要先引入uee的JS文件，然后在里边按照V的结构写代码，那我们下面来做一下这个具体操作，我在里边写一下，首先第一步。

我们先引入。Voe的。文件。然后这个文件呢，我在这里边给各位已经听好了，或者说你到它的官网能下载到，然后我这个资料中有一个简单相关，里边有个vouee，在里边有vuee的JS文件，咱可以用它的这个版本，也可用它的压缩版，比如说用这个vuee命点JS，把这个文件给它入制到我的当前的项目中来，比如给它做一个复制。直接给它拿回来，但是这个复制呢，从这个v code咱们没法直接复制，所以我现在找到我这个工作区的位置，我的工作区应该在这里，然后咱把那文件直接复制过来，就是这个voe问S，然后复制之后咱把文件在我的页面中给它就引入进去，那我来做一个引入。

我们就写个。的标签，然后在里边呢，加上一个SRCSRC中加上这个VE命点JS这个文件的路径，所以这样的话我们就引入了，然后引入之后咱们就写一下voe的代码，我们看该怎么去做。各位看一下我的课件中，其实做法很简单，首先第一个呢，就是你先new一个UE，然后在里边指定它的属性名字和省值，首先第一个属名字叫EL，然后里边你看啊加一个叫井号AAPP，这什么意思呢？就表示你voe的内容要显示到是位置，所以咱们需要写个div，里面加个ID，然后它取到你的ID值向里边写内容。

然后写完之后，咱们可以来第二个属性叫date date中的定义，我们页面中使用一些变量或者一些名称，并用它的值，比如说我这名称叫message，值叫hello view，所以咱们可以把这个变量对应的值在因文中显示，用里面一种表达式的形式把它做到，所以这是一个基本结构。那我下面给各位我就来写一下，首先在里边我们先溜上一个。不。啊，VE。然后扭上之后呢，在里边有它这样的属性，我们先写第一个属性叫E，然后加上它的值，值里边呢，取到你那个div那个路径，比如说我叫P，咱在上面的加上一个div，我叫这位置div。然后里边我加个ID，我们叫AP，它就根据ID把这取到，然后取到之后还可以有第二个属性，我们叫date date里边的加上它那个就是定义的变量的名字，还有变量的值，那咱们写第二个这个date。

我来一个大括号，比如说我的名字，我就叫message。然后它的值我就叫hello VO，这样的话我们就完成一个定义，然后完成之后呢，咱们现在就可以在我的div里边来取一下这个master中的值，那怎么取呢？在voe中呢，有一个表达式。这表达式给大家写一下，它一个词叫做。差值。表达式，它的写法就是两个大括号里边加上你那个变量的名字，而这么做的话，咱就可以把这个ma用的值取出来，并且在页面中做个显示，所以这就是关于voe的一个基本的入门，咱们就是这么来完成。

所以各位把这个他知道。然后这个给各位我再重复一遍，然后咱们做一个最终的一个测试。它的做法就是呢，首先我们在页面中先引入Vue的文件，然后第二步呢，我们在里边就可以。编写voe的代码。然后在代码中呢，咱们首先new u在里边指定你要显示位置，就是根据ID把这值取到，然后date中定义它的变量和它的值，在这里边我们通过差值表达式能取到这个变量对应的值，这样的话就完成了voe的一个最基本的入门，咱们把它就做到了。然后做到之后，现在我把这页面咱们来运行一下，看一下效果。大家看啊，目前在我页面中是不是显示的内容是不是叫哈voe啊，所咱看到这样的话，就把这个内容就是显示，咱们也完成了voe的一个最基本的入门。

所以各位把这效果能做到，然后这过程中呢，我这里写到，其实他这底层的就是一个盗墓操作，只说vuee把咱们之前繁琐的盗墓操作给咱做的封装，用它可以用很简洁很方便的方式把这过程做到，这个我们就完成了关于一个最基本的入脉力。然后入案例完成之后呢，咱后面呢，给各位就演示voe中的其他操作，主要演示它的相关的指令，但是演示指令之前，我们先做件事情，咱就来啊，做这么一个事情，抽取一个代码片段。什么叫代码片段呢？给各位说一下啊，比如说各位应该记得我们刚才呢，创建一个A条文件的时候，比如我随便写一个二条文件，然后在里边呢，我们加上一个感叹号，然后一点是不是给我们生成代码，就是这是由外code中给咱们自带的一个代码片段。

而我们现在也可以自己写个代码片段，就是把我们的这段代码可以的升值，也就是加上voe的代码，那我下面把代码片段给各位来写一下，大家看怎么做啊，首先你点文件点上首选项，然后选一个叫用户片段，在里边的选这个叫新建全局代码片段。各位看啊，这些都是我之前创建的，因为创建了很多，咱们现在点那个新建全局，然后在里边呢，写上你那个代码片段的名称，名称我们固定是用这个后缀名。所以咱们把它写上，这是代码片段的名称，我把这个名字我们就直接拨过来，那我重新点文件首选项用户片段，新建全局代码片段，把这写过来，因为我这已经创建过了，比如咱们给它改个名字，我叫view t9。

然后咱们退车，现在就创建了，创建之后呢，在里边讲你的一个结构，结构就是这段内容，我把这段内容给各位就直接复制过来，然后咱们写到这里边。写完之后，现在代码片段就做到了，然后做的过程中大家看个地方，这个地方。这是什么意思呢？就是咱们后面我们用的话，我们在页面中直接输入vet ML，然后代码片段就能生出来，而不需要每次写这个代码，所以现在这个咱们就完成创建，然后完成之后我们来试一下这代码片段，我在页面中输入VEHTML，然后咱们一点。代码是不是出来了，是不是就是我们写这构最基本结构包含。

HTRL的包含vuee的部分是都有了，所以这就是关于代码片段抽取，为了咱们一会儿写代码更加方便，所以现在咱就把VE是什么，包括录入案例，包括代码片段的抽取，我们就演示完成了。