4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/19-尚硅谷-云尚办公系统-前端基础知识-Vue入门和生命周期.mp4原创

各位同学大家好，刚才呢，我们完成了第一个基础知识ES6的学习，下面我们来学习第二个内容，View view。那在这个wave里面呢，我们主要讲解以下几个内容，第一个我们写一个入门案例，让大家回顾一下wave的基本使用，然后第二个说明它的生命周期，第三个讲一个技术发送请求，当然在wave里边呢，还有它相关的指令，这个因为是外部阶段的知识，咱们重点来讲这三部分，那咱们先看第一个啊入门，首先we呢，或者说叫viewe啊，类似于我们说的V这个读音，它是一个用于构建用户界面的渐进式框架，也是目前一个主流的计算框架，咱们项目中基于他进行开发，那咱们下面呢，快速写一个入门案例，我在这里边给大家写一下啊。首先我建个文件夹，就叫这个。

我们做过创建。然后在里边呢，我来创建一个文件。入门点HTML创建之后，在里边生成相关代码，然后在这位置加上标签。这是一个基本的结构。然后结构完成之后，我们来怎么来做呢？我们来看一下啊，首先第一部分因为咱要we，所以咱们需要在页面中引入we的相关的JS文件，那咱们通过标签进行引入，所以第一部分我们来做一下啊，我在资料里边呢，给大家提供了这个JS文件，或者说你到他的官网下载一下，那我现在把这文件复制到当前的文件夹中来，咱们找到文件夹应该就是这个。在里边进行复制，复制之后呢，在页面中我来引入这个J文件，加上L标签，然后加上SC，加上这个文件就是。

点上点次这个咱们就引入了，然后用之后下步怎么做呢？咱们需要在这个页面中啊加上一个标签，这标签给它加一个属性叫ID，它的作用是什么呢？咱们一会儿相关内容就在里面进行显示，这ID比如起个名字我或者名字二部分，然第三部分在里写上核代。那咱们来写一下啊。首先怎么做？咱们妞上一个view对象。啊，这个对象。在里边加上这款属性，第一个属性叫EL，表示你内容要在什么地方进行显示，因为咱们目前啊，看我这里，我目前是不在这个div中，这个ID是APP中显示，所以加上它的值井号，APP表示你的就是显示的位置或者用的范围，然后第二个我们加上一个date，就是定义我们在里边要显示这个初始的或者说页面。

中显示的模型数据，咱们加个date在里边进行定义，那我来写一下啊，比如说我起个名字就叫这个。然后加上一个值就叫哈。View。这样的话我们就完成定义，完成定义之后，在div标签里边呢，咱们可以用一种表达式，就是两个大号的，它叫差值表达式，根据名字到中定义的这个，比如你看我现在加个，那把这个就可以到这就是E或者说V中一个基本的入门结构，那这个写完之后，咱们下面做个访问，我们来一下这个效果。啊，咱们来做个测试啊，我先刷新VI。

店页面，大家看页面中是不是显示了hello VI，所以现在这个入门案例我们就完成了，大家跟着我一起来回顾一下它的基本使用。而通过案例我们也发现啊，这个里边呢，并没有繁琐的盗操作，不像我们用一些框架中，你需要得到你的某个标签，再往里面进行操作，它里边没有这个操作，所以它更加的方便，更加简单，也是目前一个主流的框架，我们项目中基于它进行前端开发。这个我们就说到这里。然后这个之后我们继续来看啊，在这个view里边呢，有很多核心部分，咱们就说一些比较常用的部分，当然还有更多部分，各位可以关注上硅谷古里区外或者B站或者山谷教育公众号来关注Java外部课程中有关于we的更详细讲解，咱为了满足项目使用来讲解我们这个内容。那下面呢，看第二部分啊，就是关于他的生命周期。

什么叫生命周期呢？就我这wave从创建到销毁的过程，大家看这张图里边啊，第一部分我是不是new这个wave，然后在里边首先经过这个create的方法，然后在里面进行页面渲染，在经过这个的方法，包括update，最后再经过有一个完整的生物周期，那这里边呢，我强调啊，我们在开发中主要用到的应该就是两个方法，最常见一个叫create。还有一个叫的就是一个在页面渲染前执行，一个在页面渲染后执行，那我这里边呢，通过一个例子给大家演示一下这个效果，关于VI物的生命周期。那咱们来看一下啊，我在这位置呢，再来建个。页面。咱们是第二个。H，然后里相的是一样的，我就把这个复制了。

首先啊，这个结构我就直接拿过来，你跟它是一样的啊。大家看啊，我加上一个div里边，然后引入这次文，在里边加上一个基本的结构啊，这是我们写到的啊，然后这个过程中大家注意啊，我下面这么来做，在里边呢，加上两个方法，我就直接写一下啊，第一个方法叫create。注意啊，名字不要写错。然后还一个方法叫。这是两个方法，而两个方法什么意思呢？我们先说第一个方法叫create，它表示在你的页面渲染之前执行，什么叫渲染前，比如说我现在啊，大家看啊，我页面中是不是有那种啊，当你内容显示之前会先执行，然后什么意思，在面渲染之后执行，我页面有了那种显示就都已经看到了，这个时候会执行monkey的方法，一个叫渲染前，一个叫渲染后，这是最通俗理解。

然后在里边为了更加明确，咱们写的更完整点啊，还是加个差值表达式，加上这个。Message。然后在这个中咱们分别做一些输出。加上logo啊，比如加上第一个我们叫。然后下一个咱们叫。这个直接改一下啊，另外为了更明确，我在里边呢，给它加上一个断点，这个断点加的方式啊，跟Java中不太一样，Java中呢，我们是直接用idea工具，这里边加上一个叫第八个，跟Java中的断点是类似的，然通过它为了看着更明确。所以现在这个小例子就完成了，那我们来看一遍啊，加上create，加上create表示在页面渲染前执行，Mount的表示在页面渲染之后执行。

那下面呢，咱们试一下这个效果，看它到底是怎么样的，我们来试一下啊，这个首先你看啊，我现在一点。是不是进入了，而我点完之后，大家发现啊，在我的这里边啊，就是我现在的这里边，你发现这个位置是不是它里边有一个提示，表示当前你的执行已经暂停了，因为它有了断点，而大家看啊，在我目前这里边页面中没有内容吧，是不是一个叉表示，所以我们现在什么意思，它理解为就是我在页面渲染之前，这个方法目前已经执行了，它就到了这个端点。那咱们往下来看啊，我一点。你看啊，页面中是有那种，然后它到哪里，是不是到这个位置。Mounted表示页面渲染后执行，咱们再执行结束，最终输出create mounted，这就是we的生周期，各位重点记两方法，Create说的通俗点啊，你要显示数据，咱create中一般是调接口得到数据，在你显示之前先有数据，然后页面中才能显示。mount表示数据显示之后它会进行执行。

这就叫VI的生命周期，所以以上啊，咱就说了两部分，一个是入门案例，一个是生命周期。