介绍 Vue.component (& # 39; inputtext # 39;,, {
,,,,,道具:,{
,,,,,,,& # 39;输入# 39;:{
,,,,,,,,要求:真实
,,,,,},pname:, {
,,,,,,,要求:真实
,,,,,}},
,,,,,模板:,& # 39;& lt; div> & lt; input 类型=皌ext", v-model.lazy=笆淙隱pname]“祝辞& lt; button @click=癷nit",在选择& lt;/button> & lt;/div> & # 39;
,,,,,数据:,function (), {,
,,,,,,,return {
,,,,,,,,myModel:,“ray"
,,,,,,,}
,,,,,},
,,,,,
,,,,,方法:,{
,,,,,,init: function (), {
,,,,,,,,var 研制=提示(“输入数据!“,,,,);
,,,,,,,,this.input [this.pname]=研制;
,,,,,,,}
,,,,,}
,,,,}) & lt; script 类型=皒-template", id=癿yTemplate"比;
,,,& lt; div 比;
,,,,,& lt; table 边界=?“,宽度=?00“比;
,,,,,,,,& lt; tr>
,,,,,,,,,,& lt; td> name
,,,,,,,,,,& lt; td>
,,,,,,,,,,,,& lt; input-text :输入=皃erson", pname=皀ame"祝辞& lt;/input-text>
,,,,,,,,,,& lt;/td>
,,,,,,,,& lt;/tr>
,,,,,,,,& lt; tr>
,,,,,,,,,,& lt; td> age
,,,,,,,,,,& lt; td>
,,,,,,,,,,,,& lt; input v模型=皃erson.age"比;
,,,,,,,,,,& lt;/td>
,,,,,,,,& lt;/tr>
,,,,,,,,
,,,,,,& lt;/table>
,,,,,,& lt; table 边界=?“,宽度=?00“比;
,,,,,,,,& lt; tr>
,,,,,,,,,,& lt; td colspan=?“在
,,,,,,,,,,,,& lt; https://www.yisu.com/zixun/a href=" # " @click=癮ddRow(“项目”)“class=" btn btn-primary ">添加
道明>
<文本:输入="项目" pname="学校">
道明>
<文本:输入="项目" pname="年">
道明>
<@click=" removeRow(“项目”,指数)”>删除
道明>
表>
var app8 =, Vue ({new
,,,,模板:“# myTemplate",
,,,,数据:{
,,,,,,人:{名称:““,年龄:0,
,,,,,,,项目:[],
null
null
null
null
null
null
null
null
null
null
null
null
null
null
怎么在VUE中利用组件实现双向绑定?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
<强> 1。VUE前端简单介绍
VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS不同,他在初始化时对数据增加了获取和设置方法,在数据设置时,在数据属性上添加监控,这样数据发生改变时,就会触发他上面的观察者,而ANGULARJS是使用脏数据检查来实现的。
另外VUEJS入门比ANGULARJS简单,中文文档也很齐全。
<强> 2。组件实现
在使用vue开发过程中,我们会需要扩展一些组件,在表单中使用,比如一个用户选择器。
在VUEJS封装时,可以使用组件和指令。
在VUEJS中有v模型这个感觉和ANGULARJS类似,实际完全不同,没有ANGULARJS复杂,他没有象ANGULARJS的ng-model的viewtomodel和modeltoview特性,而且这个v模型只能在输入复选框选择等控件上进行使用,而ANGULARJS可以扩展ngmodel实现他的渲染方法. .
另外我在使用vue指令时,实现双向绑定,这个我研究了自定义指定的写法,可能还是不太熟悉的原因,还没有实现。
我改用组件来实现:
在vue实现组件时,他使用的是单向数据流,在这里我们使用对象来实现双向绑定。
在上面的代码中,有两个属性:
输入,pname其中输入是一个数据对象实例,pname:只是一个字符串。
模版代码:
& lt; inputtext :输入=癷tem", pname=皊chool"祝辞& lt;/inputtext> & lt; inputtext :输入=皃erson", pname=皀ame"祝辞& lt;/inputtext>
组件使用代码,这里绑定了,人的数据,pname为绑定字段。
JS实现代码:
