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 相关文章推荐
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 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中的时间处理
2006/10/09 PHP
用php和MySql来与ODBC数据连接
2006/10/09 PHP
隐性调用php程序的方法
2009/03/09 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
详细讲解JS节点知识
2010/01/31 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
webpack打包单页面如何引用的js
2017/06/07 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
实例讲解python函数式编程
2014/06/09 Python
python实现超简单端口转发的方法
2015/03/13 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
20个常用Python运维库和模块
2018/02/12 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
旅游管理毕业生自荐信范文
2014/03/19 职场文书
英文求职信范文
2014/05/23 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
办公室卫生管理制度
2015/08/04 职场文书