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 相关文章推荐
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
浅析Ajax语法
Dec 05 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
解决vue props 拿不到值的问题
Sep 11 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/12/04 PHP
PHP实现下载功能的代码
2012/09/29 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
Python获取任意xml节点值的方法
2015/05/05 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
365 Tickets英国:全球景点门票
2019/07/06 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
神路信息Java面试题目
2013/03/31 面试题
职业生涯规划书基本格式
2014/01/06 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
《故乡》教学反思
2014/04/10 职场文书
管理提升方案
2014/06/04 职场文书
运动会通讯稿300字
2015/07/20 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python