vue class绑定 vueclass绑定

今天乐乐来给大家分享一些关于vueclass绑定方面的知识吧，希望大家会喜欢哦

vue class绑定 vueclass绑定

vue class绑定 vueclass绑定

1、大家可以先看下这个流程图有一个印象即可，接下来再看具体实现时相信思路会清晰很多：1.vue 双向数据绑定是通过 数据劫持 结合 发布模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；2.核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；（1）Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）（2）简单地说，就是用这个方法来定义一个值。

2、当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；这样我们就能实现js的双向数据绑定，也对这个方法有初步的了解 ；这个例子实现的效果是：随着文本框输入文字的变化，span中会同步显示相同的文字内容；这样就实现了 model => view 以及 view => model 的双向绑定。

3、通过添加keyup来触发set方法，而set再修改了访问器属性的同时，也修改了dom样式，改变了span标签内的文本。

4、1.实现效果先来看一下vue双向数据绑定是如何进行的，以便我们确定好思考方向2.任务拆分拆分任务可以让我们的思路更加清晰：（1）将vue中的data中的内容绑定到输入文本框和文本节点中（2）当文本框的内容改变时，vue实例中的data也同时发生改变（3）当data中的内容发生改变时，输入框及文本节点的内容也发生变化3.开始任务1——绑定内容我们先了解一下 DocuemntFragment（碎片化文档） 这个概念，你可以把他认为一个dom节点收容器，当你创造了10个节点，当每个节点都插入到文档当中都会引发一次浏览器的回流，也就是说浏览器要回流10次，十分消耗资源。

5、而使用碎片化文档，也就是说我把10个节点都先放入到一个容器当中，我再把容器直接插入到文档就可以了！浏览器只回流了1次。

6、注意：还有一个很重要的特性是，如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。

7、举个例子：可以看到，我的app中有两个子节点，一个元素节点，一个文本节点但是，当我通过DocumentFragment 劫持数据一下后注意：我的碎片化文档是将子节点都劫持了过来，而我的id为app的div内已经没有内容了。

8、同时要主要我while的判断条件。

9、判断是否有子节点，因为我每次appendChild都把node中的个子节点劫持走了，node中就会少一个，直到没有的时候，child也就变成了undefined，也就终止了循环。

10、来实现内容绑定我们要考虑两个问题，一个是如何绑定要input上，另一个是如何绑定要文本节点中。

11、这样思路就来了，我们已经获取到了div的所以子节点了，就在DocumentFragment里面，然后对每一个节点进行处理，看是不是有跟vm实例中有关联的内容，如果有，修改这个节点的内容。

12、然后重新添加入DocumentFragment中。

13、首先，我们写一个处理每一个节点的函数，如果有input绑定v-model属性或者有{{ xxx }}的文本节点出现，就进行内容替换，替换为vm实例中的data中的内容创建Vue的实例化函数效果图如下：我们成功将内容都绑定到了输入框与文本节点上！4、实现任务2——【view => model对于此任务，我们从输入框考虑，输入框的问题，输入框如何改变data。

14、我们通过keyup，input等，来获取到的value，然后通过Object.defineProperty将获取的的value，赋值给实例vm的text，我们把vm实例中的data下的text通过Object.defineProperty设置为访问器属性，这样给vm.text赋值，就触发了set。

15、set函数的作用一个是更新data中的text，另一个等到任务三再说。

16、首先实现一个响应式属性的函数。

17、一旦有赋新值就发生变化然后，实现一个观察者，对于一个实例 每一个属性值都进行观察。

18、改写编译函数，注意由于改成了访问器属性，访问的方法也产生变化，同时添加了，把实例的text值随时更新实例函数中，观察data中的所有属性值，注意增添了observe最终我们改变input中的内容能改变data中的数据，单页面却没有刷新4、实现任务3——【model => view】通过修改vm实例的属性 该改变输入框的内容 与 文本节点的内容。

19、这里涉及到一个问题 需要我们注意，当我们修改输入框，改变了vm实例的属性，这是1对1的。

20、但是，我们可能在页面中多处用到 data中的属性，这是1对多的。

21、也就是说，改变1个model的值可以改变多个view中的值。

22、这就需要我们引入一个新的知识点：/发布者模式发布模式（又称观察者模式）定义了一种一对多的关系，让多个观察者同时某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。

23、1举个例子transition: all .3s ease;：之前提到的set函数的第二个作用 就是来提醒者 进行noticy作，告诉他们：“我的text变了！” 文本节点变成了者，接到消息后，立马进行update作回顾一下，每当 new 一个 Vue，主要做了两件事：个是数据：observe(data)，第二个是编译 HTML：nodeToFragement(id)。

24、在数据的过程中，我们会为 data 中的每一个属性生成一个主题对象 dep。

25、在编译 HTML 的过程中，会为每个与数据绑定相关的节点生成一个者 watcher，watcher 会将自己添加到相应属性的 dep 容器中。

本文到这结束，希望上面文章对大家有所帮助。