vue在render函数中如何实现v-model和事件绑定(4)
1.h函数的三个参数
第一个参数是必须的。
类型:{String | Object | Function}
一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。
是要渲染的html标签。
第一个参数div 是表示创建一个div的元素
第二个参数是可选的。
类型:{Object} 主要是当前html中的各种属性。
如attrs,class,style等
在开发时。建议传,实在没有传的时候,传入 null
第三个参数可选的。
类型:{String | Array | Object} children
虚拟子节点(vnodes),当前html标签的元素。
export default{
data(){
return{
}
},
render(h){
let that=this;//为了防止this的指向发生改变
console.log("render中的this", this);//Proxy {}对象
return h('input',{
// wa你想咋个命名就怎样
wa:{
value: that.value,//获取值
},
// 事件on,用来监听input事件
on:{
'input':function(event){
that.$emit('input',event.target.value)
}
}
}
);
}
}
在使用的页面中
import aa from "./myrender"
<aa v-model="name"></aa>
{{name}}
data(){
return{
name:"",
}
}
components:{
aa
}

vue在render函数中如何实现v-model和事件绑定(4)的更多相关文章
- 使用React.Fragment替代render函数中div的包裹
1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...
- 终于搞懂了vue 的 render 函数(一) -_-|||
终于搞懂了vue 的 render 函数(一) -_-|||:https://blog.csdn.net/sansan_7957/article/details/83014838 render: h ...
- vue 定义全局函数,监听android返回键事件
vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...
- MVVM设计模式和WPF中的实现(四)事件绑定
MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- MVVM设计模式和在WPF中的实现(四) 事件绑定
系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中的实现(三)命令绑定 MVVM模式解析和在WPF中的 ...
- vue之Render函数
(1)什么是Render函数 先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如‘特性’是一个& ...
- vue监听页面中的某个div的滚动事件,并判断滚动的位置
在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点, ...
- js 函数定义的两种方式以及事件绑定(扫盲)
一.事件(例如:onclick)绑定的函数定义放在jsp前面和放后面没影响 二. $(function() { function func(){}; }) onclick通过如下方式绑定事件到jsp中 ...
- angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)
angular js 中模板的使用.事件绑定以及指令与指令之间的交互 相应教学视频地址(需FQ):v=aG8VD0KvUw4">angularjs教学视频 <!doctype h ...
- WPF中使用System.Windows.Interactivity实现事件绑定的替代方法
一.问题描述 对于 Button 等控件,在 MVVM 中我们能通过 Command 绑定解决 Click 事件.具体如下所示: <Button Margin="10" He ...
随机推荐
- iOS 应用上架的步骤和工具简介
编辑 APP开发助手是一款能够辅助iOS APP上架到App Store的工具,它解决了iOS APP上架流程繁琐且耗时的问题,帮助跨平台APP开发者顺利将应用上架到苹果应用商店.最重要的是,即使没有 ...
- 火山引擎 DataLeap:3 小时分享,体系化讲透企业数据治理如何做?
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 数据治理伴随着数据全生命周期的进程,涉及事前规范检查.事中监控管理.事后优化复盘等过程,关键重点领域包括数据质量的 ...
- Kubernetes(K8S) Deployment 升级和回滚
创建部署详见 Kubernetes(K8S) Deployment 部署 Pod 传统应用升级,一般是V1.0的jar包,有一个应对 1.0 的 shell 启动脚本.升级时,传 2.0 的 jar包 ...
- 页面滚动,打包,appium工具
''' 移动到元素element对象的"底端",与当前窗口的"底部"对齐: 我们需要将页面下拉一个滑轮 ''' for y in range(3): js = ...
- 【Vue day01】前端发展介绍 Vue的快速使用 插值语法 指令系统之文本指令、事件指令、属性指令
目录 前端发展介绍 Vue框架入门 M-V-VM思想(重要) 组件化开发 单页面应用 Vue的快速使用 前期准备 快速使用 对象与标签绑定 查看Vue对象 插值语法 三目运算符 指令系统之文本指令 v ...
- Spark Final-Examination Note
重点 4567,Special 4,5 3道编程题,分值 35(基本书上,不超纲) 选填各 20分,简答 5 题/25分,编程题 3题/35分. 简答题参考每章课后习题 第 1 章简答题 1. 请阐述 ...
- [kuangbin]专题九 连通图 题解+总结
kuangbin专题链接:https://vjudge.net/article/752 kuangbin专题十二 基础DP1 题解+总结:https://www.cnblogs.com/RioTian ...
- mysql8.0环境搭建linux
本文主要介绍如何在linux环境(64位)下搭建mysql8.0的数据库环境 1.到指定目录下下载安装包 [root@minio3 ~]# cd /usr/local/src [root@minio3 ...
- 元素scroll系列属性
scroll翻译过来,就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小.滚动距离等. scroll系列属性 作用 element.scrollTop 返回被卷上去的上侧距离,返 ...
- Canvas原生绘制树状结构拓扑图
其实当前Web库实现Canvas绘制树状结构的组件很多,而且功能也很强大,但是难免有些场景无法实现需要自己开发,本文主要是提供一种思路 先附一个不错的拓扑图开发地址:https://www.zhihu ...