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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
jquery tab插件制作实现代码
Jun 22 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
深入理解js中this的用法
May 28 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 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 和 MYSQL
2006/10/09 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
php实用代码片段整理
2016/11/12 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
python实现中文分词FMM算法实例
2015/07/10 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
pymysql 开启调试模式的实现
2019/09/24 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
在python中做正态性检验示例
2019/12/09 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
如何在Python对Excel进行读取
2020/06/04 Python
python 如何停止一个死循环的线程
2020/11/24 Python
Python基于template实现字符串替换
2020/11/27 Python
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
土木工程应届生求职信
2013/10/31 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
党员示范岗材料
2014/12/19 职场文书
给老师的感谢信
2015/01/20 职场文书
重温入党誓词主持词
2015/06/29 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers