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 ...
随机推荐
- 谁说Redis不能存大key
摘要:推荐使用GaussDB(for Redis)搞定"大key"存储,从根本上解决社区版Redis使用风险. 本文分享自华为云社区<华为云GaussDB(for Redis ...
- maven中引入CDH依赖包,Cannot resolve org.apache.hadoop:hadoop-hdfs:3.0.0-cdh6.3.2
POM文件加入仓库 cloudera https://repository.cloudera.com/artifactory/cloudera-repos/ 修改MAVEN配置文件 nexus-ali ...
- Java异步编程详解
在现代应用程序开发中,异步编程变得越来越重要,特别是在处理I/O密集型任务时.Java提供了一套强大的异步编程工具,使得开发者能够更有效地处理并发任务.本篇博文将深入探讨Java中异步编程的方方面面, ...
- 微信小程序 wx:for 遍历 Map集合
如果要在微信小程序wxml中对ES6的Map集合进行wx:for遍历,如下: let map = new Map(); map.set("a",[1,2,3]); map.set( ...
- 数据探索之道:查询Web API数据中的JSON字符串列
前言 在当今数据驱动的时代,对数据进行探索和分析变得愈发关键.Web API作为广泛应用的数据源,提供了丰富的信息和资源.然而,面对包含JSON字符串列的Web API数据时,我们常常遇到一个挑战:如 ...
- SpringBoot 项目实战 | 瑞吉外卖 优化篇 Day01
该系列将记录一份完整的实战项目的完成过程,该篇属于优化篇第一天,主要负责完成缓存优化问题 案例来自B站黑马程序员Java项目实战<瑞吉外卖>,请结合课程资料阅读以下内容 该篇我们将完成以下 ...
- Codeforces Round #677 (Div. 3) (A - E题题)
1433A. Boring Apartments #include <bits/stdc++.h> using namespace std; int main() { int t; cin ...
- 使用aop去自定义注解,实现用户在请求的时候记录下来,如日志功能等
首先搞清楚aop的几个概念: AOP即是面向切面,是Spring的核心功能之一,主要的目的即是针对业务处理过程中的横向拓展,以达到低耦合的效果. 「切面(Aspect)」:一个关注点的模块化.以注解@ ...
- vue 搜索框模糊查询 + 优化(节流) + 关键字高亮
实际效果: 防抖 事件响应函数在一段时间后才执行,如果在这段时间内再次调用,则重新计算执行时间:当预定的时间内没有再次调用该函数,则执行doSomeThing方法. 应用场景: scroll事件滚动触 ...
- Gradle 出现 Could not resolve gradle
Gradle 在进行 sync 的时候会出现 Caused by: org.gradle.internal.resolve.ModuleVersionResolveException: Could n ...