关于render函数的总结
一般情况下封装一个导航组件的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" v-cloak>
<button @click='exchange_nevigation'>点击切换</button>
<v-anchor :title="title" :level='level'>{{title}}</v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/x-template" id='template1'>
<div>
<h1 v-if="level===1" :title='title'>
<a :href="'#'+title">
<slot></slot>
</a>
</h1>
<h2 v-if='level===2'>
<a :href="'#'+title">
<slot></slot>
</a>
</h2>
<h3 v-if='level===3'>
<a :href="'#'+title">
<slot></slot>
</a>
</h3>
<h4 v-if='level===4'>
<a :href="'#'+title">
<slot></slot>
</a>
</h4>
</div>
</script>
<script>
Vue.component('v-anchor',{
template:"#template1",
props: {
level:{
type:Number,
required:true
},
title:{
type:String,
default:""
}
}
})
new Vue({
el:"#app",
data:{
title:'一级导航',
msg:"一级导航",
level:1
},
methods:{
exchange_nevigation:function(){
var arr=['一','二','三','四'];
if(this.level===4){this.level=1;
this.title=arr[0]+'级导航'}else{
this.title=arr[this.level]+'级导航';
this.level+=1
}
}
}
})
</script>
</body>
</html>
使用render函数的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" v-cloak>
<button @click='exchange_nevigation'>点击切换</button>
<v-anchor :title="title" :level='level'>{{title}}</v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script>
Vue.component('v-anchor',{
render: function (createElement) {
return createElement(
'h'+this.level,
[
createElement(
'a',{
domProps:{
href:'#'+this.title
}
},
this.$slots.default
)
]
)
},
props: {
level:{
type:Number,
required:true
},
title:{
type:String,
default:""
}
}
})
new Vue({
el:"#app",
data:{
title:'一级导航',
msg:"一级导航",
level:1
},
methods:{
exchange_nevigation:function(){
var arr=['一','二','三','四'];
if(this.level===4){this.level=1;
this.title=arr[0]+'级导航'}else{
this.title=arr[this.level]+'级导航';
this.level+=1
}
}
}
})
</script>
</body>
</html>
同上，实现了同样的效果
关于render函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" v-cloak>
<v-anchor></v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script>
Vue.component('v-anchor',{
render: function (createElement) {
return createElement(
//第一个参数是标签，必须填写，形式{String|Object|Function}
'div',
//第二个参数是对应属性的数据对象可以选填
{style:{
height:"100px",
width:"100px",
border:"1px solid black",
background:'yellow'
}},
//子节点,可选填
[createElement('h1',{
domProps:{
innerHTML:'测试'
},
style:{
color:'red'
}
})]
)
}
})
new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
1.render函数的内容必须return出来
2.它包括三个参数
2-1.第一个参数是标签，可以是函数或者字符串或者对象的形式产生
2-2.第二个参数是该标签的数据对象，也可以使用template
3.第三个参数使它的子节点，可以选填，写法和父节点一样
关于render的第二个参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.a1{
color:red
}
</style>
<body>
<div id="app" v-cloak>
<v-anchor></v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script>
Vue.component('v-anchor',{
render: function (createElement) {
return createElement(
//第一个参数是标签，必须填写，形式{String|Object|Function}
'h1',
//第二个参数是对应属性的数据对象可以选填
{
//和v-bind:class一样
'class':{
a1:true
},
//和v-bind:style一样
style:{
fontSize:'100px',
textShadow:'2px 2px 2px black',
textAlign:'center'
},
//正常的HTML特性
attrs:{
id:"my_h1",
title:"我是render生成"
},
//自定义事件监听
on:{
click:this.popup
},
//自定义指令
directives:[ ]
//作用域slot },
//子节点,可选填
[createElement('p',{
//DOM属性
domProps:{
innerHTML:'测试'
},
style:{
color:'red'
}
})]
)
},
methods:{
popup:function(){
alert('测试')
}
}
});
new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
关于render函数的总结的更多相关文章
- QTableView另类打印解决方案（复用render函数去解决print问题）
Qt QTableView另类打印解决方案 上回书说道Qt的model/view,我就做了个demo用于显示数据库中的内容.没想到tableview的打印竟然成了问题.我困惑了,难道Qt不应该 ...
- Vue2.x中的Render函数
Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElem ...
- Vue.js之render函数基础
刚才翻了一下博客,才发现,距离自己写的第一篇Vue的博客vue.js之绑定class和style(2016-10-30)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...
- 大白话Vue源码系列(03)：生成render函数
阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...
- 大白话Vue源码系列(04)：生成render函数
阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...
- vue2.0之render函数
虽然vue推荐用template来创建你的html,但是在某些时候你也会用到render函数. 虚拟DOM Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪.请近距离看一下这行代码 ...
- Vue中的render函数随笔
使用vue-cli创建项目后,再main.js里面有这样一段代码: new Vue({ render:h => h(App) }).$mount('#app') render函数是渲染一个视图, ...
- render函数
vue2.0之render函数 虽然vue推荐用template来创建你的html,但是在某些时候你也会用到render函数. 虚拟DOM Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的 ...
- Vuejs2.0学习（Render函数,createElement，vm.$slots）
直接来到进阶部分, Render函数 直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲 ...
- 【转】【Html】Vuejs2.0学习之二（Render函数,createElement，vm.$slots，函数化组件，模板编译，JSX）
1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...
随机推荐
- JQuery学习四（过滤选择器）
:first选择第一个元素.$(“div:first”)进行选择第一个<div> :last 选择最后一个最后一个元素 $("div:last")选取最后一个<d ...
- HDU4027 线段树
Can you answer these queries? Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65768/65768 K ...
- C++ 什么是多态
一．什么是多态(Polymorphism) 多态(Polymorphism)是面向对象(Object-Oriented,OO)思想"三大特征"之一,其余两个分别是封装(Encaps ...
- zookeeper的maxSessionTimeout默认值导致hbase regionserver超时
zookeeper的maxSessionTimeout默认值导致hbase regionserver超时 在hbase中经常会遇到regionserver挂掉的情况,查看日志会看到这样的错误信息 20 ...
- oracle重新编译失效对像
重新编译失效对像可执行utlrp.sql文件: SQL> @?/rdbms/admin/utlrp.sql TIMESTAMP --------------------------------- ...
- 图论&数学：矩阵树定理
运用矩阵树定理进行生成树计数 给定一个n个点m条边的无向图,问生成树有多少种可能 直接套用矩阵树定理计算即可 矩阵树定理的描述如下: 首先读入无向图的邻接矩阵,u-v G[u][v]++ G[v][u ...
- centos6.8+openvpn实现账户密码连接（通过端口映射的方式）
#搭建openvpn(编译安装) 初始化环境 #update epel mirror yum install wget -y cd /etc/yum.repos.d && rm -rf ...
- idea编写的java代码，在cmd运行乱码解决方案
1.解决方案 使用txt打开,另存为的时候选择编码为ANSI 即可.
- C# IEqualityComparer 使用方法 Linq Distinct使用方法
创建 IEqualityComparer的接口类必须实现Equals和GetHashCode方法 public class TipComparer : IEqualityComparer<Tip ...
- 为什么Javascript有设计缺陷
1. 设计阶段过于仓促 Javascript的设计,其实只用了十天.而且,设计师是为了向公司交差,本人并不愿意这样设计(参见<Javascript诞生记>). 另一方面,这种语言的设计初衷 ...