关于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 ...
随机推荐
- [iptables]iptables 添加log到syslog
比如iptables本来有这么一条: -A PREROUTING -d 125.65.27.xxx/32 -p tcp -m tcp --dport 11060 -j DNAT --to-destin ...
- 题解【poj2774 Long Long Message】
Description 求两个串的最长连续公共字串 Solution 后缀数组入门题吧 把两个串连在一起,中间加一个分隔符,然后跑一遍后缀数组,得到 height 和 sa 一个 height[i] ...
- mac之os x系统下搭建nodejs＋express4.x＋mongodb＋gruntjs整套前端工程
第一次在Mac OS X上搭建前端开发环境,做一个小小记录,包括一些与windows系统的区别和常用快捷键 首先,在进行环境搭建之前先来看一下苹果系统的“cmd”,也就是Terminal(终端). 打 ...
- WPF 与设备无关的单位
WPF从发布之日起,一直将“分辨率无关(resolution independence)”作为其亮点,声称使用WPF制作的用户界面在轻巧的Ultra-Mobile PC的屏幕上和在50英寸的电视机上都 ...
- Elastic Search操作入门
前言 Elastic Search是基于Lucene这个非常成熟的索引方案,另加上一些分布式的实现:集群,sharding,replication等.具体可以参考我同事写的文章. 本文主要介绍ES入门 ...
- centos6.8安装并配置zimbra
一.对域名设置MX记录 二.安装准备 1.关闭selinux vi /etc/selinux/config SELINUX=disabled 2.iptables防火墙端口设置 # iptables ...
- 【Foreign】咏叹 [模拟退火]
咏叹 Time Limit: 100 Sec Memory Limit: 256 MB Description 有n根木棍,第i根长度为ai.你要贴着墙围出一个矩形区域,木棍围成的矩形边缘必须平行或 ...
- 大聊Python----进程和线程
什么是线程? 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务. ...
- JS的prototype和__proto__
一.prototype和__proto__的概念 prototype是函数的一个属性(每个函数都有一 个prototype属性),这个属性是一个指针,指向一个对象.它 是显示修改对象的原型的属性. _ ...
- hdu 1272 小希的迷宫（并查集+最小生成树+队列）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1272 小希的迷宫 Time Limit: 2000/1000 MS (Java/Others) ...