<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

<div id="app">

  <div>使用v-on:input="change" :value="num": {{num}}</div>

  <input type="text"v-on:input="change" :value="num">

  <p>使用v-model给input绑定变量num2: {{num2}}</p>

  <input type="text" v-model="num2">

  <p>使用document.getElementById('input').oninput: 打印输入的数值： <span id="result"></span> </p>

  <input type="text" id="input">

</div>

<script src="https://unpkg.com/vue"></script>

<script>

  new Vue({

    el: '#app',

    data: {

      num: 1,

      num2: 1

    },

    methods: {

      change(e) {

        this.num = e.target.value

        console.log(this.num)

      }

    }

  })

  document.getElementById('input').oninput = function(e) {

    document.getElementById('result').innerText = e.target.value

  }

</script>

</body>

</html>

　　运行结果：

　　

参考文档： http://www.jb51.net/article/113112.htm

官方文档：http://cn.vuejs.org/v2/guide/components.html#使用自定义事件的表单输入组件

vue的v-model指令原理分析的更多相关文章

  1. Vue双向绑定的实现原理系列（四）：补充指令解析器compile

    补充指令解析器compile github源码 补充下HTML节点类型的知识: 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 N ...

  2. Vue.js 源码学习笔记 -- 分析前准备1 -- vue三大利器

    主体 实例方法归类:   先看个作者推荐, 清晰易懂的  23232 简易编译器   重点: 最简单的订阅者模式 // Observer class Observer { constructor (d ...

  3. Vue数据绑定和响应式原理

    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...

  4. vue我的总结+转原理

    我的总结 vue:1 mvvm模型,model,view,viewmodel,自底层向上,逐渐增加的模式2 .vue文件 包含html css js 有最近设计原则,将自己需要的放到最近,2 组件化 ...

  5. vue2.0 双向绑定原理分析及简单实现

    Vue用了有一段时间了,每当有人问到Vue双向绑定是怎么回事的时候,总是不能给大家解释的很清楚,正好最近有时间把它梳理一下,让自己理解的更清楚,下次有人问我的时候,可以侃侃而谈. 一.首先介绍Obje ...

  6. java多线程系列(五)---synchronized ReentrantLock volatile Atomic 原理分析

    java多线程系列(五)---synchronized ReentrantLock volatile Atomic 原理分析 前言:如有不正确的地方,还望指正. 目录 认识cpu.核心与线程 java ...

  7. 转 vue实现双向数据绑定之原理及实现篇

    转自:https://www.cnblogs.com/canfoo/p/6891868.html vue的双向绑定原理及实现 前言 先上个成果图来吸引各位: 代码:                  ...

  8. 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

    最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...

  9. vue的双向数据绑定实现原理

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

随机推荐

  1. HTMLHint 配置文件

    HTMLHint 工具可以对 HTML 代码做静态代码检查,从而保证 HTML 代码的规范和质量.HTMLHint 工具内置 23 条规则,建议在 .htmlhintrc 配置文件中将规则尽可能都打开 ...

  2. DeepFaceLab参数详解之Batch-Size的使用和取值！

    Batch-Size简称BS. 这是一个非常常见的参数,所有模型都具备的一个参数. 这其实是深度学习中的一个基础概念.要说理论可以说出一大堆,大家可以先简单的理解为一次处理的图片张数.为了防止吓跑小白 ...

  3. Computer Network Homework2’s hard question

    Computer Network Homework2’s hard question 2. What is the signal which is used to modulate the origi ...

  4. nodejs之fs 模块

    1.fs模块函数 * .fs.stat 检测是文件还是目录 * .fs.mkdir 创建目录 * .fs.writeFile 创建写入文件 * .fs.appendFile 追加文件 * .fs.re ...

  5. Oracle中生成随机数的函数

    在Oracle中的DBMS_RANDOM程序包中封装了一些生成随机数和随机字符串的函数,其中常用的有以下两个: DBMS_RANDOM.VALUE函数 该函数用来产生一个随机数,有两种用法: 1. 产 ...

  6. C# Selenium FireFox 接入阿布云

    业务需要购买http隧道,发现阿布云还行,使用Selenium本来想要用谷歌浏览器的,但是发现不能直接设置账号,所以选用火狐. 按照官方JAVA示例的改编,其中WebDriver实例化不能直接添加Fi ...

  7. ALV SCRIPTFROM 内容比较全的一个例子

    REPORT  ZQM_PRT04. *----------------------------------------------------------------------* * TABLES ...

  8. nanomsg安装和测试

    最近在构建一个中间层的通信架构,本来想用dbus,在实验过程中发现dbus对于国产系统支持版本比较低,安装比较麻烦,今天无意中看中了nanomsg,尽管没有dbus那么强悍的生态,但基本能满足需求. ...

  9. JS中document对象 && window对象

    所有的全局函数和对象都属于Window对象的属性和方法. 区别: 1.window 指窗体.Window 对象表示浏览器中打开的窗口. document指页面.document是window的一个子对 ...

  10. 问题记录 | 记录PIL中Image.save的一个坑

    Image.save然后open数值是会变的 我找了一个下午终于找出问题所在,PIL的Image库中把图片resize了之后存在本地然后再读进来,与直接resize后的数值是不一样的. data_va ...