用vue.js组件模拟v-model指令实例方法

1、问题描述

在使用v-model指令实现输入框数据双向绑定，输入值时对应的这个变量的值也随着变化；但是这里不允许使用v-model，需要写一个组件实现v-model指令效果

<div id="user">
  <input type="text" v-model="username">
  <label>{{username}}</label>
</div>

<script>
  let v = new Vue({
    el:'#user',
    data:{
     username:'zhangsan'
    }
  })
</script>

2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue模拟v-model指令</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="datas">
			<input-model :value="num" @inputchange="num=arguments[0]"></input-model>
			<br>
			<span>
				{{num}}
			</span>
		</div>
		<script>
			Vue.component('input-model',{
				template:`<input type="text" :svalue="cvalue" @input="updateInput">`,
				computed: {
					cvalue() {
						return this.svalue
					}
				},
				props:['svalue'],
				methods: {
					updateInput: function(event){
						let values = event.target.value
						this.$emit('inputchange',values)
					}
				}
			});

			let v = new Vue({
				el:'#datas',
				data: {
					num:'1'
				}
			})
		</script>
	</body>
</html>

3、注意事项

（1）父组件中使用子组件，绑定的inputchange必须小写，不能使用inputChange；

（2）子组件中的cvalue和计算属性中的要保持一致；

（3）子组件中的@input和父组件中的@inputchange没有必然关系；

（4）this.$emit('inputchange',values)中的inputchange要和DOM元素中的input-model一致

（5）父组件将num值通过props属性传到子组件中；子组件通过$emit触发当前实例上的事件，将改变的值传给父组件

内容扩展：

vue.js指令v-model实现方法

V-MODEL 是VUE 的一个指令，在input 控件上使用时，可以实现双向绑定。

通过看文档，发现他不过是一个语法糖。

实际是通过下面的代码来实现的：

<%@ page language="java" contentType="text/html; charset=utf-8"
 pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript" src="vue/vue.js"></script>
</head>
<body>
 <div id="app-6">
 <input :value="person.name" @input="person.name = $event.target.value">
 <input :value="person.age" @input="person.age =$event.target.value">
 {{person}}
 </div>
 <script type="text/javascript">
 var app =new Vue({
 el: '#app-6',
 data:{
 person:{name:"ray",age:19}
 }
 })
 </script>
</body>
</html>
赞 (0)

相关推荐

  • vue.js使用v-model指令实现的数据双向绑定功能示例

    vue.js使用v-model指令实现的数据双向绑定功能示例

    本文实例讲述了vue.js使用v-model指令实现的数据双向绑定功能.分享给大家供大家参考,具体如下: vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过

  • vue.js指令v-model使用方法

    vue.js指令v-model使用方法

    vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过设置属性访问器实现的.例如: var data = { name: "erik", g

  • 详解Vue.js之视图和数据的双向绑定(v-model)

    详解Vue.js之视图和数据的双向绑定(v-model)

    1.使用v-model指令,使得视图和数据实现双向绑定.v-model主要用在表单的input输入框,完成视图和数据的双向绑定. 2.JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"> window.onload = function() {

  • 浅析Vue.js中v-bind v-model的使用和区别

    v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据 最基础的就是实现一个联动的效果 <body> <div class="app"> <span>Multiline message is:</span> <p>{{message}}</p> <br> &l

  • Vue.js中 v-model 指令的修饰符详解

    Vue.js中 v-model 指令的修饰符详解

    1 .lazy v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外).我们可以使用 .lazy 懒加载修饰符,让其只在 change 事件中再加载输入框中的数据. html: <div id="app"> <input type="text" v-model.lazy="content" placeholder="请输入" value="初始值&quo

  • Vue.js 中的 v-model 指令及绑定表单元素的方法

    Vue.js 中的 v-model 指令及绑定表单元素的方法

    我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定. 1 基础用法 1.1 文本输入框(text) 这里演示了在文本输入框上输入的内容,会实时映射到绑定的数据上. html: <div id="app"> <input type="text" v-model="content" placeholder="请输入"> <p>输入框:{{content}}</p

  • vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

    vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

    本文实例讲述了vue.js使用v-model实现表单元素(input) 双向数据绑定功能.分享给大家供大家参考,具体如下: v-model 一般表单元素(input) 双向数据绑定 el:'#box',//这里放的是选择器. 不然会不生效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vu

  • vue.js 实现v-model与{{}}指令方法

    上次我们已经分析了vue.js是通过Object.defineProperty以及发布订阅模式来进行数据劫持和监听,并且实现了一个简单的demo.今天,我们就基于上一节的代码,来实现一个MVVM类,将其与html结合在一起,并且实现v-model以及{{}}语法. tips:本节新增代码(去除注释)在一百行左右.使用的Observer和Watcher都是延用上一节的代码,没有修改. 接下来,让我们一步步来,实现一个MVVM类. 构造函数 首先,一个MVVM的构造函数如下(和vue.js的构造函数

  • vue.js指令v-model实现方法

    V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个语法糖. 实际是通过下面的代码来实现的: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html lang="en">

  • 用vue.js组件模拟v-model指令实例方法

    1.问题描述 在使用v-model指令实现输入框数据双向绑定,输入值时对应的这个变量的值也随着变化:但是这里不允许使用v-model,需要写一个组件实现v-model指令效果 <div id="user"> <input type="text" v-model="username"> <label>{{username}}</label> </div> <script> le

  • 在vue自定义组件中使用 v-model指令详情

    在vue自定义组件中使用 v-model指令详情

    目录 一.前言 1.技术点提前知 二.在自定义的vue组件中使用v-model 1.效果演示图 2.自定义组件代码示例 3.在父组件使用自定义组件 三.优写时刻 一.前言 如何实现在自定义的vue组件中使用v-model,. 起先觉得挺简单,事实也挺简单,但似乎又没那么简单.因为深谈这涉及指令原理.数据绑定实现原理. 1.技术点提前知 要想在自定义组件中使用v-model,使用上其实就简单几步,这里以自定义input组件为例. 关键步骤: 1.props的使用.在自定义的vue文件中,声明父组件

  • Vue.js组件tabs实现选项卡切换效果

    Vue.js组件tabs实现选项卡切换效果

    今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

  • 详解vue.js组件化开发实践

    详解vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

  • 分分钟玩转Vue.js组件（二）

    分分钟玩转Vue.js组件（二）

    .btn-demo { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #19b586; text-decoration: none; border: none; border-radius: 4px; color: #fff !important; text-decoration: none !important; cursor: poi

  • Vue.js组件使用开发实例教程

    组件 组件可以扩展HTML元素,封装可重用的代码,在较高的层面上,组件是自定义元素,vue.js的编译器为它添加特殊功能,在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. Vue.js的组件可以理解为预先定义好了行为的ViewModel类.一个组件可以预定义很多选项,但最核心的是以下几个: 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系. 初始数据(data):一个组件的初始数据状态.对于可复用的组件来说,这通常是私有的状态. 接受的外部参数(p

  • 强大Vue.js组件浅析

    强大Vue.js组件浅析

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创

  • Vue.JS入门教程之自定义指令

    基础 Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令.定义对象需要提供一些钩子函数(全部可选): bind: 仅调用一次,当指令第一次绑定元素的时候. update: 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值:以后每当绑定的值发生变化就会被调用,获得新值与旧值两个参数. unbind:仅调用一

  • Vue.js组件间通信方式总结【推荐】

    平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更重要的是组件之间要进行通信.组件之间通信分为三种:父-子:子-父:跨级组件通信.下面,就组件间如何通信做一些总结. 1.父组件到子组件通过props通信 在组件中,使用选项props来声明需要从父级组件接受的数据,props的值可以是两种:一种是字符串数组,一种是对象.props中声明的数据与组件data函数return的主要区别在于props来自父级,而data中的组件是自己的数据,作用域是组件本身,这两种数据都可以在模板t

  • Vue.js组件通信之自定义事件详解

    Vue.js组件通信之自定义事件详解

    组件通信 从父组件向子组件通信,通过props传递数据就可以了,但Vue组件通信的场景不止有这一种,归纳起来,组件之间的通信可以用下图来表示: 自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件.子组件用**$ emit()来触发事件**,父组件用**$ on()**来监听子组件的事件. 父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的事件. <!DOCTYPE html> <html lang="en"> <head>

随机推荐