day05/上午/084-尚硅谷-尚融宝-第一个vue程序

好，那接下来呢，我们来看一下，首先呢，我们先创建一个view例子的这么一个文件目录，比如说我们该写零五了吧。啊零五啊，我在这个地方创建一个目录叫05VIEW，然后接下来呢，我们在这个里面呢，呃，要引入VIVO的脚本，那刚才我们说到了这个view呢，它是呃有一个脚本33K哈，压缩之后，所以我们呢，就必须得把这个脚本呢，从官方网站上呢，把它下载下来，那这个我已经下载下，下完了我就不去下了，所以呢，我们直接打开我们的文件夹。资料第一部分，然后这块呢有个view，然后view里面呢有两个文件，一个呢是压缩文件，一个呢是未压缩的文件，那么这个你就选一个就可以了，那我呢选择未压缩的啊，我们把它拖到我们的。

没有目录中。好，这个呢，就是VIVO的一个程序了，那我们直接把它关掉就可以了啊。好，这个呢是第一个步骤啊，我们先把view的脚本库给它获取到，第二个步骤呢，就是我们要创建一个文件，这个文件呢，我们创建一个HTML文件，那后面呢，我们会举一系列的例子，所以呢，这个我们就写零一吧，hello.html，接下来呢，我们把HTML文件的基本结构给它创建出来，然后呢，我们先把我们刚才引入的这个。不呢，给它引入到我们的目录当中啊，没点GS好，然后呢，我们右键运行一下。平行下之后看F12啊，然后呢选择二啊，然后呢，刷新一下，看一看这个view是不是正常的被加载进来了啊，被加载进来了之后呢，这块有个304 304是什么？304是使用了缓存啊，正常情况下，如果你第一次加载的话，这块是200，然后呢，因为浏览器它本身有缓存，如果他走了浏览器的缓存的话，这块就是304，好，那么这样的话呢，我们的这view呢，就加载到我们的浏览器的本地，好，那这样的话，我们就可以使用它来进行一个页面的开发了，那么首先呢，我们来看一看。

呃，在我们view当中呢，有几个关键的概念哈，第一个呢，就是我们要创建一个view对象。所以呢，在啊下面这个位置，我们写脚本。那么怎么去创建这个view对象呢？就是new view，大家注意这个V是大写的，然后这个很明显它是一个构造函数啊，构造函数呢，里面的这个参数呢，它接收一个配置对象，所以呢，我们用一个大括号来表示，那么这种在构造函数当中接收配置对象的这种啊，编码方式呢，我们实际意义上之前已经接触过很多了，是不是啊，所以说针对于这种前端的一个编程方式，一种设计方式呢，大家要啊感到不陌生啊就对了，好，那这样的话呢，我们在这个配置对象里面呢，去写一系列的配置，写什么配置呢？首先有一个关键字叫ER，这是固定的啊，不是我们自己随便起的名字，这是一个固定的关键字叫ERER是什么意思呢？它是element的简写，叫做元素，所以这块呢，我们要指定一个元素，那怎么去指定这个元素呢？我们用什么呢？用。

CSS3当中的选择器语法啊，然后指定一个element元素啊，好，CSS3当中的选择器语法，大家最为熟悉的可能就是。ID选择器了，用这个井号啊，来获取页面当中的一个ID等于后面指定值的这样的一个元素，那么很显然这个地方呢，我需要在页面当中创建一个ID等于P的这么一个元素，所以呢，在咱们的body当中，咱们随便写一个元素就行，那一般情况下我们会写div，当然了，这个是没有严格限制，但是呢，约定俗成的啊，默认情况下我们都会写div，好，那div只要它的ID是APP就可以，所以叫APP，那这个APP这个名字呢，也是我们自己定义的啊，那一般情况下我们在写应用程序的时候呢，都会用这个APP这个名字做定义哈，因为每一个页面当中呢，只能有一个element元素啊，被呃一个view对象去啊这样的一个渲染，当然了，你也可以写多个element，比如说这个地方呢，我们还可以写一个APP2。

然后这个地方呢，我们再用一个view，它渲染的呢是APP2这样也可以，所以未来这个里面所渲染的内容呢就在这，这个里面所渲染的内容呢就在这，但是这个我们平时开发没有这么写的，就很少会这样写明白哈，就这语法虽然是成立的，但是不推荐啊，所以呢，我们就这样写就行了，就每个页面当中呢，只有一个APP，然后呢，有一个view，到后面我们真正做项目的时候，你会发现整个应用程序当中就只有这么一个view，对象一个APP，剩下的所有的内容，包括一些页面的跳转，一些子内容，全都是嵌套在这一个VIVO的这个里面的，全都是被这个APP加载进来的，所以这种的我们就管它叫什么呀，叫单页应用啊，什么叫单页应用，整个应用程序就这么一个主页面。

啊，这个是入口的HTML文件，你的应用程序无论多庞大，所有的页面啊，包括它的子页面，包括它的导航等等等等啊，包括它的布局文件全都嵌在这个单页应用的单页里面，然后呢，通过这个我们的呃，Javascript来动态加载进来啊，所以这个就是我们前端代码的一个复杂度啊在这。

好，然后接下来呢，我们来看啊，我们创建完了这个ID，等于APP创建完了这个element井号APP之后要做什么呢？现在呢，我们想在页面上呢渲染一些数据，那么这个数据呢，我们就需要事先定义出来，比如说呢，我们在这个地方呢，定义一个data。然后然后接下来呢，在data后面呢，它应该是一个对象类型的啊，这样的一个数据类型啊，那么我们注意data呢，必须是对象类型的啊，那在这个对象类型的数据类型里面呢，我们会配置若干个数据选项，比如说呢，我想在页面上展示一个页面标题，那你就可以写个title，那注意大家注意这个title是我们自己定义的啊，这个EL和data是预定义的，是关键字啊，然后这个呢，就是你想在页面当中展示什么，那你就定义什么就行了，比如说我想展示页面标题，我就定义title头叫。

好比如说我想展示一个用户，那我就定义优好，那你定义的这些页面当中要展示的数据呢，它是。根据你的需要啊定义的，或者是根据我们的需要，未来我们要从后台获取的，那所以比如说用户这块呢，我要展示的是一个，呃，用户对象，那我们就可以这样写，对吧？啊，比如说username等于Helen，然后呢，Age等于失败啊，所以呢，在这里面我们可以定义非常多的这样的一个页面数据的内容，那这些就是我们页面要展示的内容了，好，那我们怎么把这个内容展示到我们的页面当中呢？我们注意一定要写在这个div里面，为什么？因为当前的这个view呢，它只负责处理当前的这个APP里面的节点内容啊，所以你如果把这个内容呢，如果写在外面的话，那就不成立了，不好使了，必须要写在这个APP里面，那怎么去写呢？首先我们来借助一个最简单的一个数据渲染的方式啊，就叫做差值表达式，或者是呢，我们管它叫声明式。

渲染。好，那怎么去渲染呢，在这个地方我们用。Data塔里面所定义的这个数据模型，比如说抬头我们它写在这，那注意外面呢，是有两个大括号啊，然后这块呢，是一个抬头是这样的，好，这样的话呢，我们就从我们的我们的view对象当中啊，从view对象当中的data数据模型当中拿出来呢，其中一个叫做title的一个数据，然后呢，我们把它渲染在我们的页面当中啊，然后接下来呢，我们来看一下，在这个页面当中呢，我们就有了第一个没有程序对不对，好那么我们这个，呃，渲染过来之后呢，也可以结合一些HTML的语法，比如说这块我们选H1。

那我们这个title呢，就写在了一个标题当中啊好，这样的话，大家看这个呢，就是第一个比程序明白哈，那同样如果你想写这个用户名的话，你也可以在这个地方写，比如说呢，我我要写在这个P里面哈，就是欢迎，欢迎谁呢？那我想欢迎这user，那就是user，然后点username对吧。好，那这样的话呢，我们就啊完成了这个优色数据的一个数据渲染，那我们来看一下这面呢，就翻译了。啊，所以呢，这个就是一个没有程序的一个基本结构了，我们再来简单的回顾一下啊，那第一个步骤呢，我们要建一个HTL文件，然后第二个步骤呢，我们要把GS的这个文件获取到，第三个步骤呢，我们在HTL当中呢，把view GS给它加载进来，第四个步骤呢，我们定义一个script script里面呢，我们要去啊，New一个view对象啊，然后view对象里面呢，首先第一个步骤呢，我们要在这个地方呢去啊，定义一个我要渲染的这么一个数据节点在哪？好，这个是整个这一块，接下来呢，我们就要把这个数据节点定义出来了。

啊，定义完了之后呢，我们就要考虑我们要在这个数据节点里面具体展示什么内容，我们要展示什么内容呢？我们要展示的所有的内容呢，都会定义在data里面，好，Data里面呢，比如说有我们要展示的标题，有我们要展示的用户数据，那我们就依次的把它们都定义出来啊，用这种建制对的形式给它定义出来，定义出来之后呢，在页面当中，我们可以用这种双大括号的形式呢，把后面data塔当中的内容呢，给它渲染出来，好，那这块呢，就是我们整个的一个view，有程序的第一个例子啊。