vue中render函数使用attrs绑定id、class、style、事件(5)
1.h函数的三个参数
第一个参数是必须的。
类型:{String | Object | Function}
一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。
是要渲染的html标签。
第一个参数div 是表示创建一个div的元素
第二个参数是可选的。
类型:{Object} 主要是当前html中的各种属性。
如attrs,class,style等
在开发时。建议传,实在没有传的时候,传入 null
第三个参数可选的。
类型:{String | Array | Object} children
虚拟子节点(vnodes),当前html标签的元素。
使用attrs属性就可以绑定id
render函数如何绑定class 使用关键字class
render函数如何绑定style 使用关键字 style
export default{
data(){
return{
}
},
render(h){
return h('div',{
attrs:{
id:"box"
},
class:{
'demo':true
},
style:{
'color':"red"
},
},
"这是一个div元素"
);
}
}
// render函数中如何绑定一个事件
// on: {
// 'click': function(event) {
// console.log(event)
// }
// }
// render如何添加事件修饰符 ~ 只会执行一次
// on: {
// '~click': function(event) {
// console.log(event)
// }
// }
这下面的方法这一个没有被实践过 不知道
// on:{
// 'click':function(event){
// event.stopPropgation();//阻止默认事件
// event.stopPrevent();
// event.target===event.target.current //点击的当前元素
// }
// }


vue中render函数使用attrs绑定id、class、style、事件(5)的更多相关文章
- vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下
vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下 renderHeader: (h, params) => { return [ h('Rad ...
- vue中watch函数的用法
vue中watch函数: 不仅可以判断路由变化(上篇博客有介绍),还可以判断数据的变化 (1):首先写watch函数 (2):在data里定义值 (3):在methods里写方法 (4):使用值
- 终于搞懂了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 ...
- vue之Render函数
(1)什么是Render函数 先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如‘特性’是一个& ...
- Vue中MVVM模式的双向绑定原理 和 代码的实现
今天带大家简单的实现MVVM模式,Object.defineProperty代理(proxy)数据 MVVM的实现方式: 模板编译(Compile) 数据劫持(Observer) Object ...
- Vue中render: h => h(App)的含义
// ES5 (function (h) { return h(App); }); // ES6 h => h(App); 官方文档 render: function (createElemen ...
- vue中render: h => h(App)的详细解释
2018年06月20日 10:54:32 H-L 阅读数 5369 render: h => h(App) 是下面内容的缩写: render: function (createEleme ...
- vue中的$props、$attrs和$listeners研究 [包装iview组件]
$props:当前组件接收到的 props 对象.Vue 实例代理了对其 props 对象属性的访问. $attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 ...
- 关于 Vue 中 h() 函数的一些东西
最近在项目上需要一个信息弹窗,来显示信息.一开始只让它弹出了文字,而且只有一条信息.而给我的需求是多条文字和图片,而后我使用了element ui中的 Notification 通知组件来显示.当然, ...
随机推荐
- Java中观察者模式与委托,还在傻傻分不清
摘要:本文通过对比Java中观察者模式与委托,希望能够让开发者分清二者的区别和联系. 本文分享自华为云社区<Java中观察者模式与委托的对比>,作者: 小小张自由--张有博 . 代码背景 ...
- 用 docker 部署 folkmq 消息中间件
docker run -p 18602:18602 -p 8602:8602 noearorg/folkmq-server:1.0.19
- Kubernetes(K8S) 介绍
Master Api Server 统一入口,以 Restful 方式,交给 etcd 存储 Scheduler 节点调试,选择 Node 节点,做应用部署 Controller Manager 处理 ...
- 【Java爬虫】如何通过 API 递归分页爬取网页数据
前言 在最近的互联网项目开发中,需要获取用户的访问ip信息进行统计的需求,用户的访问方式可能会从微信内置浏览器.Windows浏览器等方式对产品进行访问. 当然,获取这些关于ip的信息是合法的.但是, ...
- 动作捕捉系统验证OPT追踪井下无人机的性能
井下无人机长时间在恶劣环境下执行勘测.救援任务,通讯系统可能会陷入两难的境地--传输高精度坐标伴随着大量耗能.为解决这项难题,中国矿业大学计算机科学和技术学院陈朋朋教授团队提出了一种基于超宽带(UWB ...
- C++ 20 标准协程入门教程
基本概念 (是什么) 协程(coroutine): 是一种特殊的函数,其可以被暂停(suspend), 恢复执行(resume).一个协程可 以被多次调用. 协程(coroutine): 分为stac ...
- Codeforce :466C. Number of Ways (数学)
https://codeforces.com/problemset/problem/466/C 解题说明:此题是一道数学题,若平分分成若干种情况,应当整体(sum)考虑,对sum/3进行分析.它是区分 ...
- 【每日一题】2.合并回文子串 (字符串处理 + 区间DP)
题目链接:Here 遇到这种数据范围较小的计数问题应该优先考虑dp,本题就是如此. 那么应该怎么样考虑转移呢? 首先最后C中的那个价值最大的子串一定是由字符串A的一个区间和字符串B的一个区间合并得到的 ...
- Tomcat 优雅关闭之路
本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/ZqkmoAR4JEYr0x0Suoq7QQ作者:马运杰 本文通过阅读Tomcat启动和关闭流程 ...
- vue <a>标签 href 是参数的情况下如何使用
想在页面中使用a标签打开一个新页面进行跳转 例如:msgZi.blogAddress 的值是 https://www.baidu.com 正确的写法: <a :href="goBlog ...