VUE JS使用组件实现双向绑定的示例代码

1.1 .简介。VUE前端

VUE JS是一个简洁的双向数据绑定框架，性能超过了ANGULARJS。原因是实现机制不同于ANGULARJS。初始化的时候给数据增加get和set方法，设置数据的时候给数据属性增加监控，这样当数据发生变化的时候，就会触发其上的观察器，而ANGULARJS是通过脏数据检查来实现的。

另外，VUEJS入门比ANGULARJS简单，中文文档也很全。

2.组件实现

在用vue开发的过程中，我们将需要扩展一些组件以便在表单中使用，例如用户选择器。

组件和指令可以用在VUEJS封装中。

VUEJS中V-MODEL的感觉和ANGULARJS差不多，但是和ANGULARJS完全不一样。它没有ANGULARJS的ng模型复杂。此外，这个v-model只能用于诸如input checkbox select之类的控件，而angularjs可以扩展ng-model来实现它的render方法。

另外，我在使用VUE指令的时候，实现了双向绑定，我研究了自定义指定的编写方法，但可能还是比较陌生，还没有实现。

我使用组件来实现：

Vue.component('inputText '，{ prop s : { ' input ' : { required d : true })，pname : { required d : true } }，Template : ' div input type=' text ' v-model . lazy=' input[pname]' button @ click=' init ' select/button/div '，data: function(){ return { my model 3: ' ray ' } }，methods: {, '');this . input[this . pname]=RTN；}}})当vue实现组件时，他使用单向数据流，在这里我们使用对象来实现双向绑定。

在上面的代码中，有两个属性：

Input，pname其中input是一个数据对象实例，pname:只是一个字符串。

模板代码：

脚本类型=' x-template ' id=' my template ' div表格边框='1 '宽度=' 400 ' TR tdname/TD TD input-text : input=' person ' pname=' name '/input-text/TD/TR tdage/TD TD input v-model=' person . age '/TD/TR/表格边框='1 '宽度=' 400 ' TR TD colspan=' 3 ' a href=' # ' @单击=' AddRow '(items)Class=' BTN '

JS实现代码：

var app 8=new Vue({ template : ' # my template '，data : { person : { name : }，age:0，items:[] })，methods : { addrow : function(name){ this . person[name]。push({school: ' '，year:''}) }，removeRow:function(name，i){ this.person[name]。拼接(I，1)；}} }) app8。$mount('#app8 ')这里我们实现了子表的数据添加和删除。

界面效果：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。