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 加载时自动调整图片大小
May 28 Javascript
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
常用的js方法合集
Mar 10 Javascript
js评分组件使用详解
Jun 06 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
微信小程序 地图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中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
Python多层装饰器用法实例分析
2018/02/09 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
岗位职责范本
2013/11/23 职场文书
企业总经理岗位职责
2014/02/13 职场文书
战友聚会主持词
2014/04/02 职场文书
青春演讲稿范文
2014/05/08 职场文书
火灾现场处置方案
2014/05/28 职场文书
嘉宾邀请函
2015/01/31 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
处理canvas绘制图片模糊问题
2022/05/11 Javascript