02_尚硅谷_Vue_基本使用

好啊，我们对有一个基本认识以后呢，下一个我们要做的事情就是要去使用一下了啊，做一个简单的效果啊来我们把这一个效果呢，给它打开，大家应该有感觉，前面应该做过类似的效果。就上面有一个输入框，下面有一个文本，它的特别之处在哪？输入框在变化的过程中，下面内容在什么同步变化？对吧，哎，我们就要去参照这个效果来做。好，我们的扣的有这么多，我们要去啊，为了简化时间，我们已经创建好了一个项目，就这个啊，KC给它移动到我们的这里来。好，我们来去建一个文件夹，叫view，因为view有很多项目。把它放在这里。

好给它打开看下C，把我们的web打开一下。啊，这里面一共有13个测试的一个点啊，我们一个个来。Open。好，最好也把那个编码那个GS给他设置一下，到时候我们用E6对吧，大家不用选这个啊，这个我们现在不用是吧，我们选六就可以。来，从第一个hello word开始，我现在就写了一个简单的页面放在这里，我们要做这一个效，那首先我肯定要把页面是不是搞出来呀？来，先来一个整体的div，来一个上面应该是个什么input，下面应该是一个P标签啊，这个是固定的哈，谁这个是动态的是吧？

有没有看到，好，那下面我们要用U来做，首先我得干嘛呀。是不是引入view？好，在这里面我先建一个文件夹，叫GS。来，You，刚才我们见过吗？来看一下我们的这个里面啊，Feels view选哪个，This选它是不是就可以啊，我们现在用的U的版本呢，是2.x的版本，是二点最新的版本。啊，二年级和一年级呢，差别比较大，不过现在基本上都是用二零，所以大家不用太关注这个事了，嗯，就这一个好，我现在吧引入啊，怎么引点点退格吧，记得提示啊，尽量提示。

没问题是吧，那也要去写一些我们的GS先放的。好，现在我们先打开一下。那现在肯定是没有效果的，对不对啊，现在肯定没效果，我希望一上来它就能显示俄他硅谷啊，这里面显示俄塔硅谷，那下面自然是不是也是显示二硅谷。好，这个该怎么做了，其实大家要学习view啊，有一个非常好的东西，就是它有一个什么呢？教程，它的教程做的非常好。啊，基本上我们的课件呢，是基于它的教程来做的。OK，这里面不有安装，告诉我们怎么去安装view对吧？啊OK，好，怎么样去呃使用它，它有一个基本的一个介绍和使用啊，就是右是什么，前面已经说过了，我不再去强调了啊后面呢，就有一个A。

他是不是有简单例子啊，这例子呢，跟我们要做的效果不太一样，但是我们能看到一点东西啊，看到点东西啊，譬如说他写坚持要写个这东西，我们来读一下看看，把它copy比过来，不管他。好，我们来读。他一上来就溜了一个view，就创建一个view实例呗，那view这个勾的函数从哪来的，肯定是他是不是向外暴露的，这没问题是吧？好，接着创建这个实例的时候，他要传一个什么。传来的配对象，这种对象我们称它为什么呢？啊叫配置对象。能不懂，里面就是一些配置的，什么叫选项，能不懂，选项用英文怎么说。选项用英文怎么说我吧。

能不懂好，那看看这个一个看啊看懂就行了，其实没什么难度，这个。E井号AB，这是个什么？选择器对不对，那也就是说我们这个地方，它选择器是不是用来查找某一个标签呢，大家可以推测一下，你说我给谁加一个ID。给谁？给整个div，因为我要管理整个部分对不对，能懂不，你给P不够啊，到时候我的这个input是不是也要有响应的，好来那就给它加一个什么。ID等于。APP没问题是吧，好，下面这里。它写的是一个date date什么意思？来先说一下这element的，应该是element意思吧。

你的什么意思元素嘛，把这个说清楚啊，这个它的值是什么，是不是选择器，选择器最终是不是查找我这个view管理哪一个区域啊，来管理哪一个区域，这个date翻译过来就叫数据。其实就是我们MVVM里面哪个东西。是哪个东西就是M对吧，能不能那个V是谁。V是谁？这个就是V。我们不FVM吗？能不懂？那VM是谁呢？我们不是一共有有这么三个三个东西吗？MVVM，对吧？OKM现在已经知道了，是这个对吧？啊，那个V呢，是上面这一部分显示的对吧？VM是谁呢？其实就是六出来的这个什么。

实力，我一般不会叫这个名字，而且我一般都是写的这个。能不能看到啊，它的使命就是一个啊VM对象。好，这个message里面date啊，现在我不叫了啊，我换一个名字，我叫user nameme。好，我写个什么呢？我最终要显示，是不是显示硅谷啊。有没有看到，好来看到，而我这个地方就非常简单了，我直接写啊，因为咱还没有太去讲语法，而这一个看到。你们的工具都会有提示啊，都是以V开头的一些指令很多大家看到认识，说实话这什么。是判断是否显示隐藏了啊，这个也是用来做显示隐藏的啊，后面还有很多啊，还有很多一些相关的一些东西啊，我们这一次用哪一个呢？大家看一下啊。

大家不用写V，只要写个那个我们的那个指令零后面的这一部分就行，看懂了吗？啊，OKV-model，我写个什么名字。我什么名字，Name？能看到吧，那就说他们俩是不是关联起来了，也就是说他们俩是不是都跟我的这个数据属性是不是相关联，我们来看一下，看看我们这个写法，因为语法没有太学，我们先看一下结果，来刷新一下我们当前的这一个一刷。是不是有了？来关键问题了。可不可以，是不是可以？也就是说，我们并不要写太多东西吧？哎，这个这个控制变框我还没做呀，它怎么自动的实现呢。

其实我们以前说过，我们现在其实这种编码方式都是一种什么呢？声明式编程。流程需要我们控制吗？不需要，我们只按按照它的语法要求去写一些对应的声明式代码就可以。后面呢，我们再慢慢看他是如何来做到这一点的。那整个我们来看一下啊，整个第一步呢，我们要去引入view JS这个库，第二步我们要去创建一个view对象，里面有两个配置选项，一个是E，一个是date，而date的值是个什么类型？对象。啊，其实后面我们要说它还有一种另外一种类型，我现在暂时不用管啊。还有一个叫双向数据绑定的指令叫什么啊，VGA model。还有一个显示数据用什么两个大号啊，叫双大号表达式啊，后面慢慢再说。

啊，再一个呢，大家需要去看一下这个图。哎，这里面我们要还有一个工具可以用。大家记得我们开发RA项目的时候，是不是有工具啊啊，它也有大家需要去啊，右键把这一个呢给它另存为保存到文件。这前面是不是说过呀，网上文件以后呢，给它拖到我们当前的。是不这个扩展程序里面来呀，啊确定以后，就这里面多了一个选项。这个选项非常关键啊，你看着看这里啊。现在他是灰的，说明什么没有用到。这个以后我们去找项目的时候非常有用。那再来你看。什么意思？是不是有用到啊，那有用到怎么去查看呢。

审查，接着我会多一个选项叫什么？六哎，这里面有一个route，这一个route代表一个什么呢？代表你创建了一个VM对象。能不能创建了一个VM对象，来看着这个里面是不是有数据，好，你看我在改变这个数据。是不是实时的更新能看到啊。它还有别的功能，后面我们再慢慢说啊，这个工具大家都要用上啊。好，最后一个来看一下这个结构。还是刚才说的MVM，首先M第一个M是谁，是不是这边的，那在我们当前情况来说是谁？我们是不是有一个选项配置，叫什么date date里面是不是很多数据，而这些数据谁来使用？

谁可以直接用啊。能不能看到我们的view view是什么？是不是我们的页面？你看我data里面假设我有一个刚才是不是有一个user nameme，我的username在页面里面是不是直接可以访问啊好，那。要想实现现在这个效果，需要依赖于谁呀？是view model，不是model啊，是view model对吧？啊OK，而它里面大家看到这个图里面，它说了两个东西啊，一个是什么。这个翻译。数据绑定所说的数据绑定是什么意思呢？啊OK，大家看一下我们的这个效果来。这里面还有一个啊，我把这个也说了，这个叫什么，这个好说是不是监视对吧，就监视我试图的改变吧，大家想想看啊，我来问一个问题，你说我把这个F删掉，它为什么能变呢？它怎么变的呢？

它有什么过程，首先他肯定要监视这个输入框的变化。这实际上用一个监听就可以，有一个监听叫input监听，大家可能平常用的少。Input的经历什么时候触发了？就是一旦你改变了输入框的内容，它就触发。这个能不能懂，那他一改变那个间接回调函数里面做些什么事呢。他会把这个数据。保存到这个什么。Date里面来能不能看到，那最终用户看到的是是不是我这个地方变了。能不能看懂？呃，我做了什么吗？好像没有做什么，对不对，我是不是就写了一个表达式user。对吧，呃，这个数据是不是自动从内存里面跑到了什么。是不是页面这个是不是代表内存里面。

的一个数据，而这一个是不是页面里面的数据显示的数据。对吧，而这一个操作啊，需要两个东西，一个是动监听，再一个就是很重要一个东西叫什么。数据绑定。这么弄？那你说一下数据绑定啥意思啊。就数据能够自动的从内存中显示到什么页面上去，但是要想实现数据绑定它内部是不是得做很多工作呀，啊，这个得知道啊，至于怎么做的，后面我们再再去跟大家去讲啊。因为我们有一部分啊，是专门来去研究那个业源码里面，它的数据绑定是如何来去做的啊，后面呢，再慢慢的去说啊。好，这个里面，而这个啊，View model是谁呢？到底是吗？

不是他是他的什么实力，我们一般叫一个什么名字，叫VM，这个名字是叫的比较好的，叫VM会比较好一些。而这一个是我们的页面，你要搞清楚个人的是谁啊，还有一个这个是谁date。这样是不是很清晰了，我的模板页面啊，我的date，还有一个什么管理者VM，而VM里面啊，有两个重要东东西，一个叫动静听，一个叫什么数据绑定。这就是这个图啊，也是大家需要去能够理解，最重要能跟面试官交流的东西啊。其实简单的使用呢，并不难，那下面的时间呢，就是大家自己要去做一个简单的使用，看看大家能不能把它写出来，自己写一下。