1.h函数的三个参数

  1. 第一个参数是必须的。
  2. 类型:{String | Object | Function}
  3. 一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。
  4. 是要渲染的html标签。
  5. 第一个参数div 是表示创建一个div的元素
  6. 第二个参数是可选的。
  7. 类型:{Object} 主要是当前html中的各种属性。
  8. attrsclassstyle
  9. 在开发时。建议传,实在没有传的时候,传入 null
  10. 第三个参数可选的。
  11. 类型:{String | Array | Object} children
  12. 虚拟子节点(vnodes),当前html标签的元素。
  1. export default{
  2. data(){
  3. return{
  4. }
  5. },
  6. render(h){
  7. let that=this;//为了防止this的指向发生改变
  8. console.log("render中的this", this);//Proxy {}对象
  9. return h('input',{
  10. // wa你想咋个命名就怎样
  11. wa:{
  12. value: that.value,//获取值
  13. },
  14. // 事件on,用来监听input事件
  15. on:{
  16. 'input':function(event){
  17. that.$emit('input',event.target.value)
  18. }
  19. }
  20. }
  21. );
  22. }
  23. }

在使用的页面中

  1. import aa from "./myrender"
  2. <aa v-model="name"></aa>
  3. {{name}}
  4. data(){
  5. return{
  6. name:"",
  7. }
  8. }
  9. components:{
  10. aa
  11. }

vue在render函数中如何实现v-model和事件绑定(4)的更多相关文章

  1. 使用React.Fragment替代render函数中div的包裹

    1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...

  2. 终于搞懂了vue 的 render 函数(一) -_-|||

    终于搞懂了vue 的 render 函数(一) -_-|||:https://blog.csdn.net/sansan_7957/article/details/83014838 render: h ...

  3. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  4. MVVM设计模式和WPF中的实现(四)事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  5. MVVM设计模式和在WPF中的实现(四) 事件绑定

    系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中的实现(三)命令绑定 MVVM模式解析和在WPF中的 ...

  6. vue之Render函数

    (1)什么是Render函数 先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如‘特性’是一个& ...

  7. vue监听页面中的某个div的滚动事件,并判断滚动的位置

    在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点, ...

  8. js 函数定义的两种方式以及事件绑定(扫盲)

    一.事件(例如:onclick)绑定的函数定义放在jsp前面和放后面没影响 二. $(function() { function func(){}; }) onclick通过如下方式绑定事件到jsp中 ...

  9. angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)

    angular js 中模板的使用.事件绑定以及指令与指令之间的交互 相应教学视频地址(需FQ):v=aG8VD0KvUw4">angularjs教学视频 <!doctype h ...

  10. WPF中使用System.Windows.Interactivity实现事件绑定的替代方法

    一.问题描述 对于 Button 等控件,在 MVVM 中我们能通过 Command 绑定解决 Click 事件.具体如下所示: <Button Margin="10" He ...

随机推荐

  1. 谁说Redis不能存大key

    摘要:推荐使用GaussDB(for Redis)搞定"大key"存储,从根本上解决社区版Redis使用风险. 本文分享自华为云社区<华为云GaussDB(for Redis ...

  2. 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 ...

  3. Java异步编程详解

    在现代应用程序开发中,异步编程变得越来越重要,特别是在处理I/O密集型任务时.Java提供了一套强大的异步编程工具,使得开发者能够更有效地处理并发任务.本篇博文将深入探讨Java中异步编程的方方面面, ...

  4. 微信小程序 wx:for 遍历 Map集合

    如果要在微信小程序wxml中对ES6的Map集合进行wx:for遍历,如下: let map = new Map(); map.set("a",[1,2,3]); map.set( ...

  5. 数据探索之道:查询Web API数据中的JSON字符串列

    前言 在当今数据驱动的时代,对数据进行探索和分析变得愈发关键.Web API作为广泛应用的数据源,提供了丰富的信息和资源.然而,面对包含JSON字符串列的Web API数据时,我们常常遇到一个挑战:如 ...

  6. SpringBoot 项目实战 | 瑞吉外卖 优化篇 Day01

    该系列将记录一份完整的实战项目的完成过程,该篇属于优化篇第一天,主要负责完成缓存优化问题 案例来自B站黑马程序员Java项目实战<瑞吉外卖>,请结合课程资料阅读以下内容 该篇我们将完成以下 ...

  7. Codeforces Round #677 (Div. 3) (A - E题题)

    1433A. Boring Apartments #include <bits/stdc++.h> using namespace std; int main() { int t; cin ...

  8. 使用aop去自定义注解,实现用户在请求的时候记录下来,如日志功能等

    首先搞清楚aop的几个概念: AOP即是面向切面,是Spring的核心功能之一,主要的目的即是针对业务处理过程中的横向拓展,以达到低耦合的效果. 「切面(Aspect)」:一个关注点的模块化.以注解@ ...

  9. vue 搜索框模糊查询 + 优化(节流) + 关键字高亮

    实际效果: 防抖 事件响应函数在一段时间后才执行,如果在这段时间内再次调用,则重新计算执行时间:当预定的时间内没有再次调用该函数,则执行doSomeThing方法. 应用场景: scroll事件滚动触 ...

  10. Gradle 出现 Could not resolve gradle

    Gradle 在进行 sync 的时候会出现 Caused by: org.gradle.internal.resolve.ModuleVersionResolveException: Could n ...