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)的更多相关文章

  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. React Native 打包 App 发布 iOS 及加固混淆过程

    React Native 打包 App 发布 iOS 及加固混淆过程 摘要 本文将介绍如何使用 React Native 打包并发布 iOS 应用到 App Store,并介绍了如何进行应用的加固和混 ...

  2. PPT 表格设计

    顶级商业图表在哪找 https://www.mckinsey.com.cn/ 麦肯锡 图表 https://www.cbnweek.com 第一财经 https://data.163.com/ DAT ...

  3. Windows 2016 安装 Docker

    打开 PowerShell Windows PowerShell 版权所有 (C) 2016 Microsoft Corporation.保留所有权利. PS C:\Users\Administrat ...

  4. 第04讲:Flink 常用的 DataSet 和 DataStream API

    Flink系列文章 第01讲:Flink 的应用场景和架构模型 第02讲:Flink 入门程序 WordCount 和 SQL 实现 第03讲:Flink 的编程模型与其他框架比较 第04讲:Flin ...

  5. 用ChatGPT 玩转哔哩哔哩

    用ChatGPT 玩转哔哩哔哩 哔哔终结者 BibiGPT 哔哩哔哩 BiliGPT,一款智能AI工具,帮助用户一键总结 哔哩哔哩视频内容,非常省心,软件基于GPT-3.5 AI,如果无法使用,可以使 ...

  6. Educational Codeforces Round 94 (A - D题题解)

    https://codeforces.com/contest/1400/problem/A Example input 4 1 1 3 00000 4 1110000 2 101 output 1 0 ...

  7. vue3引入使用svg图标

    vue3使用svg图标 安装 // 通过命令安装2个插件 npm i vite-plugin-svg-icons -D npm i fast-glob -D 在vue.config.js中配置 //v ...

  8. vue学习笔记 二、环境搭建+项目创建

    系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...

  9. java进阶(15)--DecimalFormat、BigDecimal

    一.DecimalFormat(数字格式化) 1.数字格式化的表示: (#) 代表任意数字 (,)代表千分位 (.)代表小数 (0)代表不够时补0 2.示例

  10. SV 数据类型-2

    动态数组 数组定义的时候不用给定数组元素个数 动态数组实例 例1 队列