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 操作select相关方法函数
Dec 06 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
vue-cropper组件实现图片切割上传
May 27 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
python计算牛顿迭代多项式实例分析
2015/05/07 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
python调用百度REST API实现语音识别
2018/08/30 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
什么是.net
2015/08/03 面试题
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
歌颂祖国的演讲稿
2014/05/04 职场文书
作风建设演讲稿
2014/05/23 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android