36、前端基础-Vue-介绍&HelloWorld

前面呢，我们带着大家快速的熟悉了一下ES6里边的一些语法新特性，接下来呢，我们再来快速的学习下view u，当然感兴趣的同学呢，也可以去鼓励学院来学习VU更详细的内容。那说VU之前呢，我们来先说一下MVVM思想，首先呢，我们来说这个M指的就是模型，V呢指的是视图，举一个例子，我们这有一个页面，页面上呢要显示一个天气信息，那这一块呢，就是我们这个页面视图，我们想要显示天气，那这个天气从哪来呢？我们往往是给后台发一个请求，要来天气数据，然后呢，把它显示在这儿，那我们这个M呢，指的就是我们model数据，那我们以前想要把这个数据放到页面的这个位置，假设我们用的是解克瑞，我们是这么来做的，首先发一个AJ请求要到数据，然后呢，我们要在给这个位置显示东西，先用比如do夫小括号等等各种选择器，先找到这个元素，把它里边呢给它里边添加也好，比如open。

啊，给里边添加元素，给里边或者remove移除之前的内容，再怎么办，或者empty清空，然后我们要做一堆的盗墓增删改操作，如果这个元素很复杂，那我们这一块呢，就要写大量的内容，这是第一部分，第二部分假设呢，我们这个数据呢，发生了变化，那我们实时的在这呢也要进行修改，包括呢，我们还希望假设页面，诶我们这有一个表单，我们正在收集数据，那表单的数据呢，稍微有变化，我们把这个数据呢，就要实时的收集过来，那每次要收集呢，其实我们都是要找单，找到这个表单元素，用杰克瑞找到这个元素，点Y6，点点Y6，每次想要用都要点Y6，再重新获取，这样整个操作呢，其实是非常麻烦的，那有了这个MVVM，其实呢，就是这样。我们唯U呢是这么来考虑的，首先呢，这是我们页面的视图元素，这是我们全部的这个数据，想要把这个数据跟视图呢，我们是通过这个view model来绑定起来，它可以做什么事，比如我们这个模型里边的数据有一些变化，我们这个view model里边呢，封装了一些指定操作，它会自动的用这些定操作把我们这个视图界面改掉，包括呢，我们这个视图界面，比如我们给表单里边填了一个内容或者什么东西，这个内容呢，就会被我们这个叫盗墓的监听器自动的把内容重新设置到我们这个数据model里边。所以说呢，我们开发人员只需要关注我们的数据要放到哪个视图上，我们无需太多的来关注我们中间的这个怎么放，也就是我们不需要找到元素点，End的方法掉一堆，所以说呢，我们从繁琐的倒操作中就解放出来了，我们只需要把关注点放在model。

上，但这个呢，简单了解一下，我们呢，接下来用一个例子大家来体会一下，那我们维优框架其实就是来简化中间的这一部分操作，从而实现只要我们数据发生了变化，我们这个页面就跟着变，包括呢，页面修改了什么内容，我们数据也跟着变，那么对于5U的简介呢，诶这一大堆，哎，我们后来体会才能知道，首先呢，要学习5U，大家去看他的官网，以及官方的这些教程，这个呢，官网写的教程是非常的清楚的，诶我们直接搜索VOU来到他的官网，CN5U gs.org。

好，在这里面呢，我们只需要在这来点教程，大家呢也完全可以按照这个教程来快速的学习VU，那我们呢就来创建一个工程来测试五当我们唯U学习的版本是VU2版本，那一呢跟二的差别还是比较大的，现在呢用的也不多了，好，我们在这呢，打开Vs code的，我们打开文件夹，我们专门创建一个我右学习的文件夹。好，我们在这呢，就叫V2好。接下来呢，怎么来使用V，用这些前端框架跟我们后台框架其实是差不多的，我们后台想要用一个框架，先要导包，那前端呢就先得导入它的相关GS文件以及样式文件等等各种的，那我们呢就先得把我U导进来，我们可以看照官方文档，这一块呢有一个安装，我们可以按照这一块来导，当然导的话呢，我们来推荐使用这个NPM来导，我们也可以直接用script标签来引入，引的时候呢，诶把这个GS复制来，那我们就可以来用view u了，当然我们现在学了node n PM，我们就直接用它来帮我们安装好，我们使用NPM，我们只需要呢给当前工程安装一下view右，但当前工程呢，要用NPM，我们首先来到我们的控制台，我们要做的第一件事是使用NP来初始化我们这个项目杠Y，让他一路确定。

我们这个view项目一初始化以后呢，这就有一个package，杰森代表呢，它是一个NPM来管理的项目，好，接下来呢，我们用n PM install view来，我们来安装上view，这个依赖好安装上以后呢，在node models里边就有view，我们就安装上了，然后呢，我们接下来创建一个文件来测试一下，比如index htm，然后呢，我们叹号我们想要用view，那当然就是要用script标签来引入view，怎么引呢？我们就在node models里边，诶就有我们这个点点杠，Node models里边m view磁盘里边来找到VUGS就行了，好，这就是我们引入了VUGS。

接下来呢，我们先来体会一下他的hello word，比如呢，我这有一个div，这里边呢有一个H11，里边呢要显示一个谁谁谁，嗯，比如非常帅好，而且呢，这个谁谁谁是动态的，如果以前用杰克瑞，我们需要先获取到H1元素，把它里边原来的问本内容拿到，然后呢，我们将这一块动态改掉，可能还需要牵扯到字符串的截取，拼串等一堆操作，那现在看用view怎么做来写一个script。

那用5U呢，我们先来这么来做，来声明一个对象，哎，我们就叫呢，VM，哎，你看啊，我把它叫VM，这个VM是什么呢？就是new一个VU，我们相当于创建一个VU对象，而我们让VU对象来管控这个div，那么接下来呢，我们就可以用VU简单的功能了，那我也想要管控div，怎么写呢？我们在5U对象里new的时候呢，我们给它传一个对象，这个对象里边呢，首先有第一个属性叫EEL呢，就是element元素的意思，我们让这个view对象管控哪个元素，我们呢，可以给整个div起一个ID，起一个ID，比如呢，我们就叫APP好，然后呢，我们想让它管控这个元素，那么就写一个双引号井号，诶，这不就是ID选择器吗？APP好，现在呢，我们这个5U实例就管控了这个元素，那这个元素这一块呢，要是动态的，那有一些数据相当于给这个元素上要。

绑定一些数据怎么办呢？我们将所有的数据写在无忧对象的另一个属性里边，叫data啊，由于呢，我们可能未来有很多的数据，所以呢，我们可以写一个大括号，代表呢，这个数据是一个对象里面有很多的KK我们都能用好假设呢，第一个我们这呢有一个人名，那这个人名呢，我们假设就起一个属性名叫name，它的值呢就叫张三。那我们想把这个人名显示到这儿，那以前呢，用杰克瑞得先找这个元素怎么着，我们现在不用这么麻烦了，我们只需要在叉叉叉这我们使用我又提供的差值表达式，诶，双大括号，然后呢，我们直接写name，它的意思呢就是从数据区里边取出name放到这，好我来保存一下open with live sor来看一下效果，诶我发现呢，这有一个张三非常帅，而且更帅的操作在这儿，我F12打开控制台，好，我在控制台里边看一下，首先呢，我们这个对象啊叫VM，那我们接下来呢，我们就在控制台，我写一个叫VM里边看啊我们VM里边呢，我们有一个name，就是它的这个数据区域一个name，而且我们这样name呢，它实时的显示是张三，我给他改成。

李四，我们回车看一下，诶，我们发现呢，页面跟着动了，那如果是杰克瑞可没有这个效果，所以呢，有了5U，我们就实现了数据变，页面跟着变，当然页面变，想要数据变，那页面能变，那就是我们那些表单能动态输入，我们后来再说，我们把这个称为双向绑定的过程，而我们现在呢，这是一个单向，我们数据变，页面跟着变。这么强大的功能，我们仅仅需要让VU这个实例来管控我们整个元素，那元素里边的所有东西我们都可以用到VU以后更强大的功能，更简化的语法，有了它至少节省我们以后页面开发70%的代码。