ng中的下拉框动态加载数据，完成双向绑定

如图所示，完成一个下拉框

我们可以ng-model双向绑定一个变量，ng-init初始化一个0，下拉框初始化就默认是value为0的选项

这里有两种方式

1、ng-repeat

js中 $scopefruitList 是请求服务器获取的数据

2、ng-option

关于ng-option更多参考

>

在使用vue的时候给我最大的感受就是双向绑定实在是太方便了吧，这次来谈谈我的理解。

一：MVVM模式;

    说到vue的双向绑定首先联系到的就是MVVM(Model-View-ViewModel)模式了，如下图所示，当试图发生改变的时候传递给VM,再让数据得到更新，当数据发生改变的时候传给VM,使得试图发生改变；

    MVVM模式是通过以下三个核心组件组成，每个都有它自己独特的角色：

         Model  - 包含了业务和验证逻辑的数据模型

         View  - 定义屏幕中View的结构，布局和外观

         ViewModel  - 扮演“View”和“Model”之间的使者，帮忙处理  View  的全部业务逻辑

二、vue数据双向绑定原理

vue的数据双向绑定主要通过ObjectdefineProperty()方法来进行数据劫持以及发布者-订阅模式来实现的，

vue是怎么实现数据劫持的呢？vue实例话的时候会去遍历所有的属性，给这些属性添加get和set方法进行数据劫持；

以上就是mvvm实现双向绑定的思路了，那么具体怎么实现呢？

我们开头的时候说到了，要想实现数据的双向绑定首先就要通过数据拦截来进行监听数据的改变，这个时候就要设置一个监听器Observer来进行监听，如果属性发生改变的话就告诉订阅者Watcher看看是否需要改变，同时的话订阅者可以有好多个，我们就用一个订阅者管理器(Dep)来管理这些订阅者。紧接着我们还要有个指令解析器来对每个节点进行扫描和解析（解析节点的指令如v-on）,把他们初始化成一个订阅器Watcher,并且绑定相应的函数，Watcher会对比前后两个的数值是否发生变化，然后确定是否通知视图进行重新渲染；

以上的可以具，体归纳为：

1实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

数据改 ， 视图更

视图改， 数据更

使用v-model实现

v-model默认绑定value属性， 所以v-model只能在表单使用

虽然ObjectdefineProperty通过为属性设置getter/setter能够完成数据的响应式，但是它并不算是实现数据的响应式的完美方案，主要缺陷有

解决方法

3无法监听数组变化

关于 v-model 指令的修饰符有：lazy、number、trim。它们主要是给 v-model 指令起到一个辅助作用。官方文档

在默认情况下，v-model 在每次 input 事件触发后，会即时将输入框的值与数据进行同步，如果你不希望这样的话，可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无被 parseFloat() 解析，则会返回原始的值。

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

>

用户访问View，用户发出交互到Actions中进行处理，Actions中通过setState对State进行更新，State更新后触发View更新。可以看出，View层不能直接修改State，必须要通过Actions来进行 *** 作，这样更加清晰可控

实际上v-model只是v-bind:value 和 v-on:input的语法糖，我们也可以采取类似react的单向绑定。

vue的v-model在 *** 作表单是，显得很简单，我们不用去写繁琐的onChange事件去处理每个表单数据的变化，但是双向绑定也会导致数据变化不透明，不清晰可控。优点和缺点共存，有时候一个人的优点也是一个人的缺点，道理都是相通的。

虽然vue有双向绑定v-model，但是vue和react父子组件之间数据传递，仍然还是遵循单向数据流的，父组件可以向子组件传递props，但是子组件不能修改父组件传递来的props，子组件只能通过事件通知父组件进行数据更改，如图所示：

优点是所有状态的改变可记录、可跟踪，源头易追溯; 所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性

相比之下，元老级框架AngularJS却不一样，它允许在子组件中直接更新父组件的值

准确来说两者并不是一回事。单向数据流也可有双向绑定，双向数据流也可以 有双向绑定

但是很多资料混为一谈

引用来源

1vue双向数据绑定是通过 数据劫持 结合 发布订阅模式 实现的，数据和视图同步，即数据发生变化，视图跟着变化，视图变化，数据也随之发生改变

2核心：ObjectdefineProperty()

参数：

obj :要定义属性的对象。

prop :要定义或修改的属性的名称或 Symbol 。

descriptor :要定义或修改的属性描述符。

简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；

以上就是关于ng中的下拉框动态加载数据，完成双向绑定全部的内容，包括:ng中的下拉框动态加载数据，完成双向绑定、vue父子组件数据传输以及实现父子组件数据双向绑定、浅谈Vue的双向绑定等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！