day05/上午/089-尚硅谷-尚融宝-MVVM

好，接下来呢，我们来解释一下MVVM这个概念，那么首先呢，我们得知道我们刚才安装的那个插件在哪能找到，那我们在这个位置呢，右键open with the life server啊，将当前的这个页面呢，还是在我们的谷歌浏览器当中打开啊，然后接下来呢，F12。F12之后呢，在这个位置大家看，如果你安装了插件的话，那么所有的view页面呢，就会有一个view的这样的一个工具，我们点开它。点开它之后呢，在右侧左侧哈，有个叫做root的这么一个节点，这是我们比如上下文环境当中的一个根节点，我们点击它，点击它之后呢，在右侧大家看就出现了一个data塔啊，这样的一个数据模型的一个定义，那这个data的数据模型的定义呢，就是我们初始化的时候，在页面当中定义的这两个数据模型，一个是company，一个是site，好，然后这个数据模型呢，它就会正常的被渲染到我们的页面当中，当然了，如果页面当中，比如说刚才我们讲到的第一个文本框，我们输入内容，比如说111，我们看看有没有影响到数据模型。

是不是没有啊啊，所以呢，这个呢，就是数据模型的定义呢，会渲染页面的这个组件内容，但是页面的组件内容的修改呢，不会反向作用于数据模型，所以这个还是之前我们所说的单项数据绑定啊好，那接下来呢，我们再来看第二个文本框，第二个文本框呢，当我给他输入内容的时候，大家看啊，这面改变了，这面是不是也改变了，所以说呢，就是我们的数据模型的内容呢啊，它影响到了我们的页面的内容啊，或者是说我们页面的内容呢，是根据我们数据模型渲染出来的，那反过来呢，如果你对页面当中的内容呢进行了修改，那么它会反向的作用于数据模型啊，因为它已经反向的作用于数据模型了，所以页面当中的其他依赖于数据模型展示的内容呢，也会做相应的修改啊，所以这个呢，就是双向数据绑定，那么结合着我们刚才所做的这个解释呢，我们再来看一下这个图。

啊，首先呢，我们在我们的这个view当中呢，定义数据模型，这个数据模型呢，我们就管它叫做model，那个model啊，Model叫做数据模型plan javascript object啊，叫做简单的javascript对象，对吧？好，然后接下来呢，这面就是我们的HTML页面，HTML页面呢，我们管它叫做view叫视图啊，然后视图里面实际上是什么呀，是一些盗墓元素，所以这面比如说这个A标签，这是一个倒元素，然后这个input文本框，这也是一个倒元素啊好，然后接下来这个视图和模型他们是怎么样这个进行互相转换的呢？我们有一个叫view model的这样的一个呃，处理器哈，然后这处理器里面呢，包含两部分内容，这两部分内容呢，有do listener，所谓的do listener呢就是。

嗯，道母监听器还有一个呢叫data bandings，那这个呢叫做数据绑定组件啊，那我们呢，用数据绑定组件将模型当中的数据绑定到视图当中啊，那么在view model当中呢，还有一个道M监听器，盗墓监听器呢，负责监听视图当中的变化，视图当中的倒元素的内容一旦发生了变化，它会把这个变化监听到，然后在反向的作用于模型当中，所以呢，我们就管这个呢叫M啊。呃，V对吧，VM啊，所以这个整个的一个体系叫MV。VM啊，所以这就是MVVM的概念啊，叫双向数据绑定的概念，所以这个一般情况下，他们前端出去面试的时候，可能就这种基本的概念嘛，就比如说他考考你一下，呃，不认的a op是啥意思呀，就是这种哈，就比较重要的概念啊，我们出去的时候一般不会有人问这个关于前端的这些问题的，就是顶多就会问你，你做没做过，会不会做，能做到什么程度，对不对啊，但是这个概念的话呢，在前端还是比较重要的一个概念，所以呢，希望大家能够理解，那么再强调一下，这个里面主要就是有一个道M监听器，有一个数据绑定，呃，这个组件啊，好，这个是MVVM的一个概念。