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 相关文章推荐
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
jQuery解决iframe高度自适应代码
Dec 20 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
angular多语言配置详解
May 16 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
微信小程序 地图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 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
python中 logging的使用详解
2017/10/25 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
python实现dijkstra最短路由算法
2019/01/17 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
Python实现结构体代码实例
2020/02/10 Python
python调用百度API实现人脸识别
2020/11/17 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
租房合同协议书
2014/04/09 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书