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


Posted in Javascript onJanuary 10, 2017

1.VUE 前端简单介绍

VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据set时,在数据属性上添加监控,这样数据发生改变时,就会触发他上面的watcher,而ANGULARJS 是使用脏数据检查来实现的。

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

2.组件实现

在使用vue开发过程中,我们会需要扩展一些组件,在表单中使用,比如一个用户选择器。

在VUEJS 封装时,可以使用组件和指令。

在VUEJS中有V-MODEL 这个感觉和ANGULARJS 类似,实际完全不同,没有ANGULARJS 复杂,他没有象ANGULARJS的 ng-model 的viewtomodel和modeltoview特性,而且这个v-model 只能在input checkbox select 等控件上进行使用,而 angularjs 可以 扩展 ngmodel实现他的render方法。。

另外我在使用 VUE指令时,实现双向绑定,这个我研究了自定义指定的写法,可能还是不太熟悉的原因,还没有实现。

我改用组件来实现:

Vue.component('inputText', {
      props: {
        'input':{
         required: true
      },pname: {
        required: true
      }},
      template: '<div><input type="text" v-model.lazy="input[pname]"><button @click="init" >选择</button></div>',
      data: function () { 
        return {
         myModel: "ray"
        }
      },
      
      methods: {
       init:function () {
         var rtn=prompt("输入数据!", "");
         this.input[this.pname]=rtn;
        }
      }
     })

在vue实现组件时,他使用的是单向数据流,在这里我们使用 对象来实现双向绑定。

在上面的代码中,有两个属性 :

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

模版代码:

<script type="x-template" id="myTemplate">
    <div >
      <table border="1" width="400">
         <tr>
           <td>name</td>
           <td>
             <input-text :input="person" pname="name"></input-text>
           </td>
         </tr>
         <tr>
           <td>age</td>
           <td>
             <input v-model="person.age">
           </td>
         </tr>
         
       </table>
       <table border="1" width="400">
         <tr>
           <td colspan="3">
             <a href="#" @click="addRow('items')" class="btn btn-primary">添加</a>
           </td>
         </tr>
         
         <tr v-for="(item, index) in person.items">
           <td >
             <input-text :input="item" pname="school"></input-text>
           </td>
           <td >
             <input-text :input="item" pname="year"></input-text>
           </td>
           <td >
             <a @click="removeRow('items',index)" >删除</a>
           </td>
         </tr>
         
       
       </table>
   {{person}}
    </div>
  </script>
<inputtext :input="item" pname="school"></inputtext>

<inputtext :input="person" pname="name"></inputtext>

组件使用代码,这里绑定了 item,person 数据,pname 为绑定字段。

JS实现代码:

var app8 = new Vue({
     template:"#myTemplate",
     data:{
       person:{name:"",age:0,
        items:[] 
       }
     }
     ,
     methods: {
       addRow: function (name) {
        this.person[name].push({school:"",year:""})
       },
       removeRow:function(name,i){
         this.person[name].splice(i,1) ;
       }
      }
     
    })
    app8.$mount('#app8')

这里我们实现了 子表的数据添加和删除。

界面效果:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
详解jQuery-each()方法
Mar 13 jQuery
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
微信小程序 地图map详解及简单实例
Jan 10 #Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 #Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 #Javascript
jquery 正整数数字校验正则表达式
Jan 10 #Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 #Javascript
JS遍历对象属性的方法示例
Jan 10 #Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 #Javascript
You might like
PHP 程序员的调试技术小结
2009/11/15 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
cssQuery()的下载与使用方法
2007/01/12 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
python创建线程示例
2014/05/06 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
python实现简单名片管理系统
2018/11/30 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
Internet体系结构
2014/12/21 面试题
廉政文化进校园广播稿
2014/10/20 职场文书
党员年终个人总结
2015/02/14 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL