vue的v-model指令原理分析
<!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指令原理分析的更多相关文章
- Vue双向绑定的实现原理系列（四）：补充指令解析器compile
补充指令解析器compile github源码 补充下HTML节点类型的知识: 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 N ...
- Vue.js 源码学习笔记 -- 分析前准备1 -- vue三大利器
主体 实例方法归类: 先看个作者推荐, 清晰易懂的 23232 简易编译器 重点: 最简单的订阅者模式 // Observer class Observer { constructor (d ...
- Vue数据绑定和响应式原理
Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
- vue我的总结+转原理
我的总结 vue:1 mvvm模型,model,view,viewmodel,自底层向上,逐渐增加的模式2 .vue文件 包含html css js 有最近设计原则,将自己需要的放到最近,2 组件化 ...
- vue2.0 双向绑定原理分析及简单实现
Vue用了有一段时间了,每当有人问到Vue双向绑定是怎么回事的时候,总是不能给大家解释的很清楚,正好最近有时间把它梳理一下,让自己理解的更清楚,下次有人问我的时候,可以侃侃而谈. 一.首先介绍Obje ...
- java多线程系列(五)---synchronized ReentrantLock volatile Atomic 原理分析
java多线程系列(五)---synchronized ReentrantLock volatile Atomic 原理分析 前言:如有不正确的地方,还望指正. 目录 认识cpu.核心与线程 java ...
- 转 vue实现双向数据绑定之原理及实现篇
转自:https://www.cnblogs.com/canfoo/p/6891868.html vue的双向绑定原理及实现 前言 先上个成果图来吸引各位: 代码: ...
- 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令
最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...
- vue的双向数据绑定实现原理
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
随机推荐
- Zookeeper入门(五)之Linux环境下Zookeeper安装
本文参考地址为:http://www.mamicode.com/info-detail-2243059.html1.安装wget http://archive.apache.org/dist/zook ...
- CountDownLatch和CyclicBarrier的比较
1.CountDownLatch是线程组之间的等待,即一个(或多个)线程等待N个线程完成某件事情之后再执行:而CyclicBarrier则是线程组内的等待,即每个线程相互等待,即N个线程都被拦截之后, ...
- 关于MySQL中查询结果的count和from后的条件与where后的条件对比
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 ...
- “fatal error: hdf5.h: 没有那个文件或目录”解决方法
問題一: Installing Caffe without CUDA: fatal error: cublas_v2.h No such file: 在Makefile.config中修改,將CPU_ ...
- P3373 【模板】线段树 2 （未完待续）
P3373 [模板]线段树 2 强烈安利这个大佬 超赞!!! 题解 本来以为这个题拿着线段树1的板子改改就好了,但是发现事情并没有那么简单,改了两天... 我们看到这个题其实涉及啦乘法和加法两种运算, ...
- golang context学习记录1
1.前言 一个请求,可能涉及多个API调用,多个goroutine,如何在多个API 之间,以及多个goroutine之间协作和传递信息,就是一个问题. 比如一个网络请求Request,需要开启一些g ...
- c#端口扫描器wpf+socket
布局如下 <Window x:Class="PortTest.MainWindow" xmlns="http://schemas.microsoft.com/win ...
- "Developer tools access" 需控制另一个进程才能继续调试 解决方案
解决方案: 打开终端输入下边命令: DevToolsSecurity --status 查看状态 DevToolsSecurity --enable 输入密码,修改为enable,即可用 DevToo ...
- 借助marquee实现弹幕效果
HTML标签marquee实现滚动效果 .基于此,实现简易版 弹幕: HTML <div class="right_liuyan"> <marquee id=& ...
- stringbuffer.tostring引发的 Java heap space
今天在测试“生成报告“功能时,出现了这个问题,java抛出java.lang.OutOfMemoryError: Java heap space: 由于开发使用的tomcat是统一配置的,而且其他地方 ...